Merge pull request kakawait#224 from kakawait/feature/prism-js

Add prism.js support
zacbook · Nov 1, 2017 · a2ab8ef · a2ab8ef
2 parents 07daf1e + c1ae810
commit a2ab8ef
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 2,102 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.4.2-BETA](https://github.com/kakawait/hugo-tranquilpeak-theme/milestone/17) - TBD
+
+- Support [prism.js](http://prismjs.com/) syntax highlighter in addition to _highlight.js_ ([#24](https://github.com/kakawait/hugo-tranquilpeak-theme/issues/24))
+
+### Breaking changes
+
+Since new syntax highlighter prism.js, you have to configure which syntax highlighter you want to use between _highlight.js_ and _prism.js_. **However if you don't configure it, no syntax highligh will be apply** (where previously _highlight.js_ was forced by default).
+
+Please upgrade you're `config.toml` (you can checkout `exampleSite/config.toml` to see sample) to re-add _highlight.js_ as syntax highlighter (except if you don't need it):
+
+```toml
+[params]
+  syntaxHighlighter = "highligth.js"
+```
+
 ## [0.4.1-BETA](https://github.com/kakawait/hugo-tranquilpeak-theme/milestone/16) - 11 sep 2017
 
 - Fix _sharing options_ link generation bug, that break shares ([#196](https://github.com/kakawait/hugo-tranquilpeak-theme/pull/196))

diff --git a/docs/user.md b/docs/user.md
@@ -347,6 +347,7 @@ E.g to display a shortcut to open algolia search window :
   favicon = /favicon.png
   imageGallery = true
   hierarchicalCategories = true
+  syntaxHighlighter = 'highlight.js'
 ```
 
 | Variable | Description |
@@ -362,6 +363,7 @@ E.g to display a shortcut to open algolia search window :
 | hierarchicalCategories | Define categories will create hierarchy between parents: `categories = ["foo", "bar"]` will consider "bar" a sub-category of "foo". If false it will flat categories. |
 | customCSS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with css that override or extend the theme css: `customCSS` = ["css/mystyles.css"]. |
 | customJS (_DEPRECATED see [Add custom JS or CSS using configuration](#add-custom-js-or-css-using-configuration)_) | Define files with js that override or extend the theme js: `customJS` = ["js/myscripts.js"]. |
+| syntaxHighlighter | Define which syntax highlighter you want to use (if not set syntax highlighting is disable) between `highlight.js` and `prism.js` |
 
 E.g :  
 A category page look like this with `hierarchicalCategories = true` :  
@@ -497,7 +499,7 @@ Follow these steps, to add new filter :
 
 ### Prerequisites
 
-Since you are going to edit the theme, you have to install all the necessary to build it after changes : [Installation](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/docs/developer.md#installation)
+Since you are going to edit the theme, you have to install all the necessary to build it after changes : [Installation](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/developer.md#installation)
 
 **Run command in theme folder : `hexo-blog/themes/tranquilpeak`**
 
@@ -513,7 +515,7 @@ Of course, you can replace it with an other theme found on highlight.js reposito
 Follow these steps :
 
 1. Get your theme here : [Highlight.js theme](https://github.com/isagalaev/highlight.js/tree/master/src/styles) or create yours
-2. Follow guidelines in `source/scss/themes/hljs-custom.scss` file
+2. Follow guidelines in `src/scss/themes/hljs-custom.scss` file
 3. Build the theme with `npm run prod` or `grunt buildProd`. Learn more about Grunt tasks : [Grunt tasks](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/docs/developer.md#grunt-tasks)
 
 ## Writing posts

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -107,6 +107,10 @@ canonifyurls = true
   # Global keywords configuration. Following keywords will be add to every pages
   # keywords = ["development", "next-gen"]
 
+  # Syntax highlighter, possible choice between: "highligth.js" (recommanded) and "prism.js" (experimental)
+  # You can comment it to disable syntax highligthing
+  syntaxHighlighter = "highligth.js"
+
   # Hide sidebar on all article page to let article take full width to improve reading, and enjoy wide images and cover images. (true: enable, false: disable)
   clearReading = true
 

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -89,7 +89,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
     <!--EXTERNAL STYLES END-->
     <!--STYLES-->
-    <link rel="stylesheet" href="/css/style-fpbzgxsy0kgmdvyrj5ykkg6ratccrk3gocmaqn4xpcjywmv5dteilzucro4f.min.css" />
+    <link rel="stylesheet" href="/css/style-jsjn0006wyhpyzivf6yceb31gvpjatbcs3qzjvlumobfnugccvobqwxnnaj8.min.css" />
     <!--STYLES END-->
     {{ range .Site.Params.customCSS }}
       {{ if isset . "href" }}

diff --git a/layouts/partials/script.html b/layouts/partials/script.html
@@ -1,6 +1,10 @@
 <!--EXTERNAL SCRIPTS-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
+{{ if eq .Site.Params.syntaxHighlighter "highligth.js" }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
+{{ else if eq .Site.Params.syntaxHighlighter "prism.js" }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js" integrity="sha256-haEv2ilTk2sXcJaGbkTtErRCHy/qGt3g+bGbgPf5OTY=" crossorigin="anonymous"></script>
+{{ end }}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>
 <!--EXTERNAL SCRIPTS END-->
 <!--SCRIPTS-->
@@ -13,17 +17,19 @@
     <script src="{{ . | absURL }}"></script>
   {{ end }}
 {{ end }}
+{{ if eq .Site.Params.syntaxHighlighter "highligth.js" }}
 <script>
 $(document).ready(function() {
   hljs.configure({ classPrefix: '', useBR: false });
-  $('pre.code-highlight, pre > code').each(function(i, block) {
+  $('pre.code-highlight > code, pre > code').each(function(i, block) {
     if (!$(this).hasClass('codeblock')) {
       $(this).addClass('codeblock');
     }
     hljs.highlightBlock(block);
   });
 });
 </script>
+{{ end }}
 {{ if .IsPage }}
   {{ if not (eq .Params.comments false) }}
     {{ if .Site.DisqusShortname }}

diff --git a/layouts/shortcodes/codeblock.html b/layouts/shortcodes/codeblock.html
@@ -18,7 +18,7 @@
   {{ end }}
 {{ end }}
 {{ $trimmedContent := trim .Inner "\n" }}
-<figure class="highlight {{ with ($.Scratch.Get "c-language") }}{{ . }}{{ end }}">
+<figure class="highlight {{ $.Scratch.Get "c-language" }} language-{{ with ($.Scratch.Get "c-language") }}{{ . }}{{ end }}">
   <figcaption>
     {{ if and (($.Scratch.Get "c-url") ($.Scratch.Get "c-title")) }}
       <span>{{ $.Scratch.Get "c-title" }}</span><a href="{{ ($.Scratch.Get "c-url") | safeURL }}" target="_blank" rel="external">{{ $.Scratch.Get "c-link-text" | default ($.Scratch.Get "c-title") }}</a>
@@ -33,7 +33,7 @@
           <pre>{{ range $index,$value := (split $trimmedContent "\n") }}<span class="line">{{ add $index 1 }}</span><br>{{ end }}</pre>
         </td>
         <td class="code">
-          <pre class="{{ $.Scratch.Get "c-language" }} code-highlight">{{ $trimmedContent }}</pre>
+          <pre class="code-highlight language-{{ $.Scratch.Get "c-language" }}"><code class="{{ $.Scratch.Get "c-language" }}">{{ $trimmedContent }}</code></pre>
         </td>
       </tr>
     </tbody>

diff --git a/layouts/shortcodes/tabbed-codeblock.html b/layouts/shortcodes/tabbed-codeblock.html
@@ -33,15 +33,15 @@
   <div class="tabs-content">
     {{ range $index, $value := $.Scratch.Get "tc-content" }}
       {{ $trimmedContent := trim $value "\n" }}
-      <figure class="highlight {{ index ($.Scratch.Get "tc-languages") $index }}" style="display: {{ if eq $index 0 }}block{{ else }}none{{ end }};">   
+      <figure class="highlight language-{{ index ($.Scratch.Get "tc-languages") $index }}" style="display: {{ if eq $index 0 }}block{{ else }}none{{ end }};">   
         <table>
           <tbody>
             <tr>
               <td class="gutter">
                 <pre>{{ range $index,$value := (split $trimmedContent "\n") }}<span>{{ add $index 1 }}</span><br>{{ end }}</pre>
               </td>
               <td class="code">
-                <pre class="{{ index ($.Scratch.Get "tc-languages") $index }} code-highlight">{{ $trimmedContent }}</pre>
+                <pre class="code-highlight language-{{ index ($.Scratch.Get "tc-languages") $index }}"><code class="{{ index ($.Scratch.Get "tc-languages") $index }}">{{ $trimmedContent }}</code></pre>
               </td>
             </tr>
           </tbody>