Syntax highlighting - support hugo chroma by default - a new Site Par…

…am allow to use the client side hightlight highlight.js

resolve #102

exampleSite/config.toml

@@ -5,6 +5,8 @@ DefaultContentLanguage = "en"
 title = "Docdock"
 theme = "hugo-theme-docdock"
 themesdir = "../.."
+pygmentsCodeFences = true
+pygmentsStyle = "monokai"
 
 [params]
 editURL = "https://github.com/vjeantet/hugo-theme-docdock/edit/master/exampleSite/content/"
@@ -15,6 +17,8 @@ ordersectionsby = "weight" # ordersectionsby = "title"
 disableHomeIcon = false # default is false
 disableSearch = false # default is false
 disableNavChevron = false # set true to hide next/prev chevron, default is false
+highlightClientSide = false # set true to use highlight.pack.js instead of the default hugo chroma highlighter
+
 
 [outputs]
 home = [ "HTML", "RSS", "JSON"]

layouts/partials/flex/scripts.html

@@ -1,7 +1,9 @@
 <script src="{{"js/clipboard.min.js" | relURL}}"></script>
 <script src="{{"js/featherlight.min.js" | relURL}}"></script>
 <!-- <script src="{{"js/html5shiv-printshiv.min.js" | relURL}}"></script> -->
+{{if eq .Site.Params.highlightClientSide true}}
 <script src="{{"js/highlight.pack.js" | relURL}}"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+{{end}}
 <!-- <script src="{{"js/modernizr.custom.71422.js" | relURL}}"></script> -->
 <script src="{{"theme-flex/script.js" | relURL}}"></script>

layouts/partials/original/scripts.html

@@ -1,8 +1,10 @@
 <script src="{{"js/clipboard.min.js" | relURL}}"></script>
 <script src="{{"js/featherlight.min.js" | relURL}}"></script>
 <script src="{{"js/html5shiv-printshiv.min.js" | relURL}}"></script>
+{{if eq .Site.Params.highlightClientSide true}}
 <script src="{{"js/highlight.pack.js" | relURL}}"></script>
 <script>hljs.initHighlightingOnLoad();</script>
+{{end}}
 <script src="{{"js/modernizr.custom.71422.js" | relURL}}"></script>
 <script src="{{"js/docdock.js" | relURL}}"></script>
 <script src="{{"theme-original/script.js" | relURL}}"></script>

static/scss/flex/article.scss

@@ -66,14 +66,15 @@ article pre {
     line-height: 1.15;
     border-radius: 0;
     color: #ffffff;
-    background: #1d1f21;
+    // background: #1d1f21;
+    border:1px solid #1d1f21;
 }
 
 article pre code {
     background: inherit;
     white-space: pre-wrap;
     border: 0;
-    color:white;
+    // color:white;
 }
 article .clippy-icon {
   width: 32px;
@@ -83,7 +84,7 @@ article pre .copy-to-clipboard {
     float:right;
     background-color: inherit;
     color: #ccc;
-    border: 1px solid #272a2c;
+    // border: 1px solid #272a2c;
     border-radius: 2px;
     cursor: pointer;
 }

static/scss/original/main.scss

@@ -691,7 +691,7 @@ code, kbd, pre, samp {
 code {
     border-radius: 2px;
     white-space: nowrap;
-    color: $main_code_inline_text_color;
+    // color: $main_code_inline_text_color;
     background: $main_code_inline_back_color;
     border: 1px solid $main_code_inline_border_color;
     padding: 0px 2px;
@@ -713,14 +713,13 @@ code + .copy-to-clipboard {
 pre {
     padding: 1rem;
     margin: 2rem 0;
-    background: $main_code_block_back_color;
+    // background: $main_code_block_back_color;
     border: 1px solid $main_code_block_border_color;
     border-radius: 2px;
     line-height: 1.15;
 }
 
 pre code {
-    color: #237794;
     background: inherit;
     white-space: inherit;
     border: 0;
@@ -1163,7 +1162,7 @@ td {
     display: inline-block;
     position: relative;
     color: $main_other_text_color;
-    background-color: $main_code_inline_back_color;
+    background-color: $main_code_inline_back_hover_color;
     text-align: center;
     cursor: pointer;
     border-radius: 0 2px 2px 0;
@@ -1196,14 +1195,14 @@ pre .copy-to-clipboard {
     position: absolute;
     right: 4px;
     top: 4px;
-    background-color: lshift($main_code_block_back_color, $main_code_block_back_color, 15%, 15%);
+    background-color: lshift($main_code_block_back_color, $main_other_text_color, 20%, 20%);
     color: #ccc;
-    border: 1px solid $main_code_block_border_color;
+    // border: 1px solid $main_code_block_border_color;
     border-radius: 2px;
 }
 
 pre .copy-to-clipboard:hover {
-    background-color: lshift($main_code_block_back_color, $main_code_block_back_color, 20%, 20%);
+    background-color: lshift($main_code_block_back_color, $main_other_text_color, 20%, 20%);
     color: #fff;
 }