feat: add highlight.js as an option

assets/js/highlight.js

@@ -0,0 +1,22 @@
+import hljs from 'highlight.js/lib/core';
+
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import bash from 'highlight.js/lib/languages/bash';
+import htmlbars from 'highlight.js/lib/languages/htmlbars';
+import ini from 'highlight.js/lib/languages/ini';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('html', htmlbars);
+hljs.registerLanguage('ini', ini);
+hljs.registerLanguage('toml', ini);
+hljs.registerLanguage('yaml', yaml);
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightBlock(block);
+  });
+});

assets/scss/app.scss

@@ -7,14 +7,17 @@
 /** Import Bootstrap */
 @import "bootstrap/scss/bootstrap";
 
+/** Import highlight.js */
+@import "highlight.js/scss/gradient-dark";
+
 /** Import theme styles */
 @import "common/fonts";
 @import "common/global";
 @import "common/dark";
-@import "components/alerts";
-@import "components/buttons";
 @import "components/code";
 // @import "components/syntax";
+@import "components/alerts";
+@import "components/buttons";
 @import "components/comments";
 @import "components/forms";
 @import "components/images";

assets/scss/common/_dark.scss

@@ -38,6 +38,16 @@ body.dark .btn-primary {
   color: $body-bg-dark !important;
 }
 
+body.dark .btn-outline-primary {
+  @include button-outline-variant($button-color-dark, $button-color-dark);
+
+  color: $link-color-dark;
+}
+
+body.dark .btn-outline-primary:hover {
+  color: $body-bg-dark;
+}
+
 body.dark .navbar {
   background: $body-bg-dark;
   opacity: 0.975;
@@ -178,12 +188,7 @@ body.dark ::selection {
   background: $selection-color-dark;
 }
 
-body.dark pre {
-  background: $body-overlay-dark;
-  color: $body-color-dark;
-}
-
-body.dark code {
+body.dark code:not(.hljs) {
   background: $body-overlay-dark;
   color: $body-color-dark;
 }

assets/scss/common/_variables.scss

@@ -110,6 +110,7 @@ $font-size-xl:                $font-size-base * 1.375;
 $font-size-lg:                $font-size-base * 1.25;
 $font-size-md:                $font-size-base * 1.125;
 $font-size-sm:                $font-size-base * 0.875;
+$font-size-xs:                $font-size-base * 0.625;
 
 $line-height-base:            1.5;
 

assets/scss/components/_buttons.scss

@@ -55,9 +55,19 @@ body.dark .toggle-dark {
 }
 
 @include media-breakpoint-up(md) {
+  .doks-clipboard {
+    position: relative;
+    float: right;
+  }
+
   .btn-clipboard {
+    position: absolute;
+    top: 2.125rem;
+    right: 1rem;
+    z-index: 10;
     display: block;
-    margin: 2.0625rem 0.25rem -4rem auto;
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;
   }
 }
 

assets/scss/components/_code.scss

@@ -7,37 +7,37 @@ samp {
   border-radius: $border-radius;
 }
 
-pre {
-  background: $beige;
-  color: $black;
-  line-height: $line-height-base;
-  margin: 2rem 0;
-  overflow: auto;
-  padding: 1.25rem 1.5rem;
-  tab-size: 4;
-}
-
 code {
   background: $beige;
   color: $black;
   padding: 0.25rem 0.5rem;
 }
 
+pre {
+  margin: 2rem 0;
+}
+
 pre code {
-  background: none;
-  font-size: inherit;
-  padding: 0;
+  display: block;
+  overflow-x: auto;
+  line-height: $line-height-base;
+  padding: 1.25rem 1.5rem;
+  tab-size: 4;
 }
 
-@include media-breakpoint-down(sm) {
-  pre {
-    margin: 2rem -1.5rem;
-  }
+.hljs {
+  padding: 1.25rem 1.5rem;
+}
 
+@include media-breakpoint-down(sm) {
   pre,
   code,
   kbd,
   samp {
     border-radius: 0;
   }
+
+  pre {
+    margin: 2rem -1.5rem;
+  }
 }

config/_default/config.toml

@@ -54,7 +54,7 @@ rel  = "sitemap"
     [markup.goldmark.renderer]
       unsafe = true
   [markup.highlight]
-    codeFences = true
+    codeFences = false
     guessSyntax = false
     hl_Lines = ""
     lineNoStart = 1

config/_default/params.toml

@@ -54,3 +54,4 @@ editPage = false
   darkMode = true
   bootStrapJs = false
   breadCrumb = false
+  highLight = false

layouts/partials/footer/script-footer.html

@@ -4,6 +4,9 @@
 {{ $bs := resources.Get "js/bootstrap.js" -}}
 {{ $bs := $bs | js.Build -}}
 
+{{ $highlight := resources.Get "js/highlight.js" -}}
+{{ $highlight := $highlight | js.Build -}}
+
 {{ $app := resources.Get "js/app.js" -}}
 
 {{ $slice := slice $app -}}
@@ -44,17 +47,24 @@
     <script src="{{ $bs.Permalink }}" defer></script>
   {{ end -}}
   <script src="{{ $js.Permalink }}" defer></script>
+  {{ if .Site.Params.options.highLight -}}
+    <script src="{{ $highlight.Permalink }}" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" defer></script>
   {{ end -}}
 {{ else -}}
   {{ $js := $js | minify | fingerprint "sha512" -}}
   {{ $index := $index | minify | fingerprint "sha512" -}}
   {{ $bs := $bs | minify | fingerprint "sha512" -}}
+  {{ $highlight := $highlight | minify | fingerprint "sha512" -}}
   {{ if .Site.Params.options.bootStrapJs -}}
-  <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
+    <script src="{{ $bs.Permalink }}" integrity="{{ $bs.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
   <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  {{ if .Site.Params.options.highLight -}}
+    <script src="{{ $highlight.Permalink }}" defer></script>
+  {{ end -}}
   {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}

layouts/shortcodes/btn-copy.html

@@ -1 +1,5 @@
-<button class="btn-clipboard btn btn-sm btn-link" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
+{{ if .Site.Params.options.clipBoard -}}
+<div class="doks-clipboard">
+  <button class="btn-clipboard btn btn-outline-primary" data-clipboard-text="{{ .Get "text" | safeHTML }}"><span class="copy-status"></span></button>
+</div>
+{{ end -}}

package.json

@@ -40,6 +40,7 @@
     "clipboard": "^2.0",
     "eslint": "^7.22",
     "flexsearch": "^0.6",
+    "highlight.js": "^10.6.0",
     "hugo-bin": "^0.69",
     "instant.page": "^5.1",
     "lazysizes": "^5.3",