refactor: migrate code highlight to an extension

2 files changed, 83 insertions, 6 deletions

diff --git a/_includes/extensions/code-highlight.html b/_includes/extensions/code-highlight.html
new file mode 100644
index 0000000..c843459
--- /dev/null
+++ b/_includes/extensions/code-highlight.html
@@ -0,0 +1,82 @@
+<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"></script>
+
+{%- assign name = 'code_badge.enabled' -%}
+{%- include functions.html func='get_value' default='false' -%}
+{%- assign badge_enabled = return -%}
+
+{%- assign name = 'code_badge.color' -%}
+{%- include functions.html func='get_value' default='#fff' -%}
+{%- assign badge_color = return -%}
+
+{%- assign name = 'code_badge.background_color' -%}
+{%- include functions.html func='get_value' default='#ff4e00' -%}
+{%- assign badge_background_color = return -%}
+
+{%- assign name = 'code_badge.text_transform' -%}
+{%- include functions.html func='get_value' default='uppercase' -%}
+{%- assign badge_text_transform = return -%}
+
+<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];
+      if (cls.startsWith('language-')) {
+        lang = cls;
+        break;
+      }
+    }
+    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);
+  }
+
+  function handle(block) {
+    addLangData(block);
+    hljs.highlightBlock(block);
+  }
+
+  for (var i = 0; i < els.length; i++) {
+    var el = els[i];
+    handle(el);
+  }
+});
+</script>
+
+<style>
+  /* code language badge */
+  pre::before {
+    content: attr(data-lang);
+    color: #fff;
+    background-color: #ff4e00;
+    padding: 0 .5em;
+    border-radius: 0 2px;
+    text-transform: uppercase;
+    text-align: center;
+    min-width: 32px;
+    display: inline-block;
+    position: absolute;
+    right: 0;
+  }
+
+  /* fix wrong badge display for firefox browser */
+  code > table pre::before {
+    display: none;
+  }
+</style>
diff --git a/_includes/head.html b/_includes/head.html
index 1ac5112..66cca12 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -7,16 +7,11 @@
   <link rel="shortcut icon" href="{{ site.favicon }}">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-noto-sans@0.0.72/index.min.css">
-  <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"></script>
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
   <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
   {%- include extensions/google-analytics.html -%}
   {%- endif -%}
+  {%- include extensions/code-highlight.html -%}
 </head>