diff --git a/README.md b/README.md
index 573b8c7e02a..2471415497d 100644
--- a/README.md
+++ b/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
diff --git a/_config.yml b/_config.yml
index 9724c6b9f5c..42a3d3b1ebe 100644
--- a/_config.yml
+++ b/_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
diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html
index b7c6399f15c..c5782cc96ab 100644
--- a/_includes/extensions/code-highlight.html
+++ b/_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 -%}
diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss
index cb83d82b81c..e12dc36c171 100644
--- a/_sass/yat/_base.scss
+++ b/_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;
diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss
index a23896d6160..5c388726180 100644
--- a/_sass/yat/_dark.scss
+++ b/_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;
   }
diff --git a/assets/css/code-highlight-rouge.css b/assets/css/code-highlight-rouge.css
new file mode 100644
index 00000000000..e74c4056264
--- /dev/null
+++ b/assets/css/code-highlight-rouge.css
@@ -0,0 +1,224 @@
+.highlight pre table td { padding: 5px; }
+.highlight pre table pre { margin: 0; }
+.highlight pre, .highlight pre .w {
+  color: #24292f;
+  background-color: #f6f8fa;
+}
+.highlight pre .k, .highlight pre .kd, .highlight pre .kn, .highlight pre .kp, .highlight pre .kr, .highlight pre .kt, .highlight pre .kv {
+  color: #cf222e;
+}
+.highlight pre .gr {
+  color: #f6f8fa;
+}
+.highlight pre .gd {
+  color: #82071e;
+  background-color: #ffebe9;
+}
+.highlight pre .nb {
+  color: #953800;
+}
+.highlight pre .nc {
+  color: #953800;
+}
+.highlight pre .no {
+  color: #953800;
+}
+.highlight pre .nn {
+  color: #953800;
+}
+.highlight pre .sr {
+  color: #116329;
+}
+.highlight pre .na {
+  color: #116329;
+}
+.highlight pre .nt {
+  color: #116329;
+}
+.highlight pre .gi {
+  color: #116329;
+  background-color: #dafbe1;
+}
+.highlight pre .kc {
+  color: #0550ae;
+}
+.highlight pre .l, .highlight pre .ld, .highlight pre .m, .highlight pre .mb, .highlight pre .mf, .highlight pre .mh, .highlight pre .mi, .highlight pre .il, .highlight pre .mo, .highlight pre .mx {
+  color: #0550ae;
+}
+.highlight pre .sb {
+  color: #0550ae;
+}
+.highlight pre .bp {
+  color: #0550ae;
+}
+.highlight pre .ne {
+  color: #0550ae;
+}
+.highlight pre .nl {
+  color: #0550ae;
+}
+.highlight pre .py {
+  color: #0550ae;
+}
+.highlight pre .nv, .highlight pre .vc, .highlight pre .vg, .highlight pre .vi, .highlight pre .vm {
+  color: #0550ae;
+}
+.highlight pre .o, .highlight pre .ow {
+  color: #0550ae;
+}
+.highlight pre .gh {
+  color: #0550ae;
+  font-weight: bold;
+}
+.highlight pre .gu {
+  color: #0550ae;
+  font-weight: bold;
+}
+.highlight pre .s, .highlight pre .sa, .highlight pre .sc, .highlight pre .dl, .highlight pre .sd, .highlight pre .s2, .highlight pre .se, .highlight pre .sh, .highlight pre .sx, .highlight pre .s1, .highlight pre .ss {
+  color: #0a3069;
+}
+.highlight pre .nd {
+  color: #8250df;
+}
+.highlight pre .nf, .highlight pre .fm {
+  color: #8250df;
+}
+.highlight pre .err {
+  color: #f6f8fa;
+  background-color: #82071e;
+}
+.highlight pre .c, .highlight pre .ch, .highlight pre .cd, .highlight pre .cm, .highlight pre .cp, .highlight pre .cpf, .highlight pre .c1, .highlight pre .cs {
+  color: #6e7781;
+}
+.highlight pre .gl {
+  color: #6e7781;
+}
+.highlight pre .gt {
+  color: #6e7781;
+}
+.highlight pre .ni {
+  color: #24292f;
+}
+.highlight pre .si {
+  color: #24292f;
+}
+.highlight pre .ge {
+  color: #24292f;
+  font-style: italic;
+}
+.highlight pre .gs {
+  color: #24292f;
+  font-weight: bold;
+}
+html[data-theme="dark"] .highlight pre table td { padding: 5px; }
+html[data-theme="dark"] .highlight pre table pre { margin: 0; }
+html[data-theme="dark"] .highlight pre, html[data-theme="dark"] .highlight pre .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+html[data-theme="dark"] .highlight pre .k, html[data-theme="dark"] .highlight pre .kd, html[data-theme="dark"] .highlight pre .kn, html[data-theme="dark"] .highlight pre .kp, html[data-theme="dark"] .highlight pre .kr, html[data-theme="dark"] .highlight pre .kt, html[data-theme="dark"] .highlight pre .kv {
+  color: #ff7b72;
+}
+html[data-theme="dark"] .highlight pre .gr {
+  color: #f0f6fc;
+}
+html[data-theme="dark"] .highlight pre .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+html[data-theme="dark"] .highlight pre .nb {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .nc {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .no {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .nn {
+  color: #ffa657;
+}
+html[data-theme="dark"] .highlight pre .sr {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .na {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .nt {
+  color: #7ee787;
+}
+html[data-theme="dark"] .highlight pre .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+html[data-theme="dark"] .highlight pre .kc {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .l, html[data-theme="dark"] .highlight pre .ld, html[data-theme="dark"] .highlight pre .m, html[data-theme="dark"] .highlight pre .mb, html[data-theme="dark"] .highlight pre .mf, html[data-theme="dark"] .highlight pre .mh, html[data-theme="dark"] .highlight pre .mi, html[data-theme="dark"] .highlight pre .il, html[data-theme="dark"] .highlight pre .mo, html[data-theme="dark"] .highlight pre .mx {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .sb {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .bp {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .ne {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .nl {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .py {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .nv, html[data-theme="dark"] .highlight pre .vc, html[data-theme="dark"] .highlight pre .vg, html[data-theme="dark"] .highlight pre .vi, html[data-theme="dark"] .highlight pre .vm {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .o, html[data-theme="dark"] .highlight pre .ow {
+  color: #79c0ff;
+}
+html[data-theme="dark"] .highlight pre .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+html[data-theme="dark"] .highlight pre .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+html[data-theme="dark"] .highlight pre .s, html[data-theme="dark"] .highlight pre .sa, html[data-theme="dark"] .highlight pre .sc, html[data-theme="dark"] .highlight pre .dl, html[data-theme="dark"] .highlight pre .sd, html[data-theme="dark"] .highlight pre .s2, html[data-theme="dark"] .highlight pre .se, html[data-theme="dark"] .highlight pre .sh, html[data-theme="dark"] .highlight pre .sx, html[data-theme="dark"] .highlight pre .s1, html[data-theme="dark"] .highlight pre .ss {
+  color: #a5d6ff;
+}
+html[data-theme="dark"] .highlight pre .nd {
+  color: #d2a8ff;
+}
+html[data-theme="dark"] .highlight pre .nf, html[data-theme="dark"] .highlight pre .fm {
+  color: #d2a8ff;
+}
+html[data-theme="dark"] .highlight pre .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+html[data-theme="dark"] .highlight pre .c, html[data-theme="dark"] .highlight pre .ch, html[data-theme="dark"] .highlight pre .cd, html[data-theme="dark"] .highlight pre .cm, html[data-theme="dark"] .highlight pre .cp, html[data-theme="dark"] .highlight pre .cpf, html[data-theme="dark"] .highlight pre .c1, html[data-theme="dark"] .highlight pre .cs {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .gl {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .gt {
+  color: #8b949e;
+}
+html[data-theme="dark"] .highlight pre .ni {
+  color: #c9d1d9;
+}
+html[data-theme="dark"] .highlight pre .si {
+  color: #c9d1d9;
+}
+html[data-theme="dark"] .highlight pre .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+html[data-theme="dark"] .highlight pre .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}