Merge pull request #1 from henryiii/highlighting

Highlighting

README.md

@@ -18,20 +18,46 @@ This theme is designed to look great on both large-screen and small-screen (mobi
 
 ### Syntax highlighting
 
-This theme has support for both server side and client side highlighting.
+This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting.
+
+#### Chroma
+
+To enable Chroma, add the following to your site parameters:
+
+```
+pygmentsCodeFences = true
+pygmentsUseClasses = true
+[params]
+    useChroma = true
+```
+
+Then, you can use a different style by running:
+
+```
+hugo gen chromastyles --style=manni > static/css/syntax.css
+```
+
+See [the Hugo docs for more](https://gohugo.io/content-management/syntax-highlighting/).
 
 #### Server side syntax highlighting
 
 Use the `highlight` shortcode (with Pygments),
 see [the Hugo documentation](http://gohugo.io/extras/highlighting/) for more information.
 
-To use this feature install Pygments (`pip install Pygments`) and add `pygmentsuseclasses = true` to your `config.toml`.
+To use this feature install Pygments (`pip install Pygments`) and add
+
+```
+pygmentsUseClasses = true
+pygmentsUseClassic = true
+```
+
+to your `config.toml`.
 
 #### Client side syntax highlighting
 
 Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks.
 
-Client side highlighting does not require pygments to be installed.
+Client side highlighting does not require pygments to be installed. This currently is only active if you have not selected Chroma, because they don't play well together.
 
 ### Disqus support
 

layouts/partials/footer.html

@@ -58,8 +58,10 @@
 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <script src="{{ "js/main.js" | absURL }}"></script>
+{{- if (not ( .Site.Params.UseChroma )) }}
 <script src="{{ "js/highlight.min.js" | absURL }}"></script>
 <script> hljs.initHighlightingOnLoad(); </script>
+{{- end -}}
 <script> renderMathInElement(document.body); </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>

layouts/partials/head.html

@@ -49,7 +49,7 @@
   <link rel="stylesheet" href="{{ "css/pygment_highlights.css" | absURL }}" />
   <link rel="stylesheet" href="{{ "css/highlight.min.css" | absURL }}" />
   {{- else -}}
-  <link rel="stylesheet" href="{{ "css/chroma_syntax.css" | absURL }}" />
+  <link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
   {{- end -}}
 
 {{- partial "head_custom.html" . }}