Highlight code blocks with Rouge instead of highlight.js, add code block dark mode

README.md

@@ -85,7 +85,7 @@ I will respect your crucial support and say THANK YOU!
 - Full layouts `home`, `post`, `tags`, `archive` and `about`.
 - Uses font awesome 5 for icons.
 - Beautiful page banner with image and video.
-- Beautiful Syntax Highlight using [highlight.js][highlight-js].
+- Beautiful Syntax Highlight with overridable [Rouge][rouge] themes.
 - RSS support using [Jekyll Feed][jekyll-feed] gem.
 - Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
 - Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
@@ -197,4 +197,4 @@ This theme is licensed under the [MIT license](https://opensource.org/licenses/m
 [jekyll-seo-tag]: https://github.com/jekyll/jekyll-seo-tag
 [jekyll-sitemap]: https://github.com/jekyll/jekyll-sitemap
 [jekyll-feed]: https://github.com/jekyll/jekyll-feed
-[highlight-js]: https://github.com/highlightjs/highlight.js
+[rouge]: https://github.com/rouge-ruby/rouge

_config.yml

@@ -150,6 +150,28 @@ yat:
 #   background_color: "#ff4e00"
 #   text_transform: "uppercase"  # ("uppercase", "lowercase", "capitalize")
 
+# Code highlighting setting
+# This is a Jekyll setting rather than a theme setting, but the theme includes
+# stylesheets to highlight code when the Rouge highlighter (the default) is in
+# use. This setting affects both Markdown code blocks and Liquid `highlight`
+# blocks. You can set it to `none` to disable highlighting.
+#
+# By default, we highlight code with Rouge's "github.light" and `github.dark`
+# themes for light and dark mode, respectively. If you want to change that, you
+# can override `assets/css/code-highlight-rouge.css` with a different
+# stylesheet generated with Rouge's `rougify` command. If you do so, you must
+# set the CSS scope to `.highlight pre` for your light-mode theme:
+#
+#   $ mkdir -p assets/css
+#   $ bundle exec rougify style --scope '.highlight pre' <THEME> >assets/css/code-highlight-rouge.css
+#
+# ...and to `html[data-theme="dark"] .highlight pre` for your dark-mode theme.
+# A dark-mode theme is optional, but if you want one just append its stylesheet
+# to the same CSS file (note the >>):
+#
+#   $ bundle exec rougify style --scope 'html[data-theme="dark"] .highlight pre' <DARK_THEME> >>assets/css/code-highlight-rouge.css
+# highlighter: rouge
+
 # If you want to link only specific pages in your header, uncomment
 # this and add the path to the pages in order as they should show up
 # header_pages:
@@ -233,7 +255,6 @@ yat:
 #   follow_site_theme: true
 
 # Build settings
-# highlighter: none
 markdown: kramdown
 kramdown:
   input: GFM

_includes/extensions/code-highlight.html

@@ -1,9 +1,4 @@
-<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
-<!-- and it's easy to individually load additional languages -->
-<script charset="UTF-8"
-        src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/languages/go.min.js"
-        async></script>
+<link rel="stylesheet" href="{{ "/assets/css/code-highlight-rouge.css" | relative_url }}">
 
 {%- assign name = 'code_badge.enabled' -%}
 {%- include functions.html func='get_value' default='true' -%}
@@ -21,71 +16,76 @@
 {%- include functions.html func='get_value' default='uppercase' -%}
 {%- assign badge_text_transform = return -%}
 
+{%- if badge_enabled -%}
 <script>
-// Init highlight js
 document.addEventListener('DOMContentLoaded', function(event) {
-  var els = document.querySelectorAll('pre code')
-
-  function addLangData(block) {
-    var outer = block.parentElement.parentElement.parentElement;
-    var lang = block.getAttribute('data-lang');
-    for (var i = 0; i < outer.classList.length; i++) {
-      var cls = outer.classList[i];
+  function getLangFromClass(elem) {
+    for (cls of elem.classList) {
       if (cls.startsWith('language-')) {
-        lang = cls;
-        break;
+        return cls.substr(9);
       }
     }
-    if (!lang) {
-      cls = block.getAttribute('class');
-      lang = cls ? cls.replace('hljs ', '') : '';
-    }
-    if (lang.startsWith('language-')) {
-      lang = lang.substr(9);
-    }
-    block.setAttribute('class', 'hljs ' + lang);
-    block.parentNode.setAttribute('data-lang', lang);
+    return null;
   }
 
-  function addBadge(block) {
-    var enabled = ('{{ badge_enabled }}' || 'true').toLowerCase();
-    if (enabled == 'true') {
-      var pre = block.parentElement;
-      pre.classList.add('badge');
-    }
-  }
+  function addBadge(preElem, lang) {
+    let badgeWrapper = document.createElement('div');
+    badgeWrapper.classList.add('badge-wrapper')
 
-  function handle(block) {
-    addLangData(block);
-    addBadge(block)
-    hljs.highlightBlock(block);
-  }
+    let badge = document.createElement('div');
+    badge.classList.add('badge');
+    badge.append(lang);
 
-  for (var i = 0; i < els.length; i++) {
-    var el = els[i];
-    handle(el);
+    preElem.replaceWith(badgeWrapper);
+    badgeWrapper.append(badge, preElem);
   }
+
+  // Kramdown code blocks (Rouge highlighter):
+  //   div.highlighter_rouge.language-XXX > div.highlight > pre.highlight > code
+  document.querySelectorAll('.highlighter-rouge').forEach((e) => {
+    let pre = e.querySelector('pre');
+    if (pre !== null) {
+      let lang = getLangFromClass(e);
+      if (lang !== null) {
+        addBadge(pre, lang);
+      }
+    }
+  });
+
+  // Liquid code blocks (any highlighter):
+  //   figure.highlight > pre > code.language-XXX[data-lang="XXX"]
+  // Kramdown code blocks (no highlighter):
+  //   pre > code.language-XXX
+  document.querySelectorAll('pre > code').forEach((e) => {
+    let lang = e.hasAttribute('data-lang')
+      ? e.getAttribute('data-lang')   // Liquid
+      : getLangFromClass(e);          // Kramdown
+
+    if (lang !== null) {
+      addBadge(e.parentElement, lang);
+    }
+  });
 });
 </script>
 
 <style>
-  /* code language badge */
-  pre.badge::before {
-    content: attr(data-lang);
-    color: {{badge_color}};
-    background-color: {{badge_background_color}};
-    padding: 0 .5em;
-    border-radius: 0 2px;
-    text-transform: {{badge_text_transform}};
-    text-align: center;
-    min-width: 32px;
-    display: inline-block;
+  .badge-wrapper {
+    position: relative;
+  }
+
+  .badge-wrapper .badge {
     position: absolute;
+    top: 0;
     right: 0;
-  }
 
-  /* fix wrong badge display for firefox browser */
-  code > table pre::before {
-    display: none;
+    min-width: 32px;
+    padding: 0 .5em;
+    border-bottom-left-radius: 2px;
+    text-align: center;
+
+    color: {{badge_color}};
+    background-color: {{badge_background_color}};
+    text-transform: {{badge_text_transform}};
   }
 </style>
+{%- endif -%}

_sass/yat/_base.scss

@@ -146,7 +146,6 @@ blockquote {
 pre,
 code {
   @include relative-font-size(0.9375);
-  color: $text-color;
 }
 
 *:not(pre) > code {
@@ -158,15 +157,8 @@ code {
 
 pre {
   overflow-x: auto;
-  position: relative;
   background-color: #f0f0f0;
-
-  > code {
-    display: inline-block;
-    padding: 20px!important;
-    background-color: transparent;
-    border: 0;
-  }
+  padding: 20px;
 
   table, pre {
     margin-bottom: 0;

_sass/yat/_dark.scss

@@ -27,10 +27,13 @@ html[data-theme="dark"]  {
   }
 
   *:not(pre) > code {
-    color: $dark-text-color;
     background-color: #454545;
   }
 
+  pre {
+    background-color: #222;
+  }
+
   blockquote {
     border-left: 4px solid #484848;
   }