Add client side syntax highlighting support

Added client side syntax highlighting support in addition to existing
server side syntax highlighting support. Updated readme and sample to
reflect both types of highlighting.

README.md

@@ -18,11 +18,21 @@ This theme is designed to look great on both large-screen and small-screen (mobi
 
 ### Syntax highlighting
 
-This theme has support for `highlight` shortcode (with Pygments),
+This theme has support for both server side and client side 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`.
 
+#### Client side syntax highlighting
+
+Use triple backticks "```" or triple tilde "~~~" around code blocks.
+
+Client side highlighting does not require pygments to be installed.
+
 ### Disqus support
 
 To use this feature, uncomment and fill out the `disqusShortname` parameter in `config.toml`.

exampleSite/config.toml

@@ -3,6 +3,7 @@ languageCode = "en-us"
 title = "Beautiful Hugo"
 theme = "beautifulhugo"
 pygmentsUseClasses = true
+pygmentCodeFences = true
 #disqusShortname = "XXX"
 #googleAnalytics = "XXX"
 

exampleSite/content/post/2016-03-08-code-sample.md

@@ -1,13 +1,15 @@
 ---
 title: Code Sample
-subtitle: Using Pygments
+subtitle: Using Pygments or Highlight.js
 date: 2016-03-08
 ---
 
-The following is a code sample using the "highlight" shortcode provided in Hugo.
+The following are two code samples using syntax highlighting.
 
 <!--more-->
 
+The following is a code sample using the "highlight" shortcode provided in Hugo. This is server side highlighting and requires Python and Pygments to be installed.
+
 {{< highlight javascript >}}
     var num1, num2, sum
     num1 = prompt("Enter first number")
@@ -15,3 +17,14 @@ The following is a code sample using the "highlight" shortcode provided in Hugo.
     sum = parseInt(num1) + parseInt(num2) // "+" means "add"
     alert("Sum = " + sum)  // "+" means combine into a string
 {{</ highlight >}}
+
+
+The following is a code sample using triple backticks (```) code fencing provided in Hugo. This is client side highlighting and does not require any special installation.
+
+```javascript
+    var num1, num2, sum
+    num1 = prompt("Enter first number")
+    num2 = prompt("Enter second number")
+    sum = parseInt(num1) + parseInt(num2) // "+" means "add"
+    alert("Sum = " + sum)  // "+" means combine into a string
+```

layouts/partials/footer.html

@@ -117,5 +117,9 @@
 <script src="{{ .Site.BaseURL }}/js/jquery-1.11.2.min.js"></script>
 <script src="{{ .Site.BaseURL }}/js/bootstrap.min.js"></script>
 <script src="{{ .Site.BaseURL }}/js/main.js"></script>
+<script src="{{ .Site.BaseURL }}js/highlight.min.js"></script>
+<script>
+  hljs.initHighlightingOnLoad();
+</script>
 
 {{ template "_internal/google_analytics.html" . }}

layouts/partials/head.html

@@ -17,6 +17,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
   <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/pygment_highlights.css" />
+  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.min.css">
   
   <!-- Facebook OpenGraph tags -->
   <meta property="og:title" content="{{ .Title }}" />

static/css/highlight.min.css

@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#f9f9f9;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,.nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rule .hljs-value,.hljs-preprocessor,.hljs-pragma,.hljs-name,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute{color:#800}.smartquote,.hljs-comment,.hljs-annotation,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.hljs-javadoc,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-javadoctag,.hljs-phpdoc,.hljs-dartdoc,.hljs-yardoctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status{font-weight:bold}.asciidoc .hljs-emphasis,.markdown .hljs-emphasis{font-style:italic}.nginx .hljs-built_in{font-weight:normal}.coffeescript .javascript,.javascript .xml,.lasso .markup,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5}