code block title, symbole line number support

assets/sass/pages/_gallery.scss

@@ -75,6 +75,9 @@
     height: auto;
     cursor: pointer;
     
+    @include flexbox();
+    @include justify-content(center);
+
     &__desc {
       position: absolute;
       left: 0;

assets/sass/pages/_wrapper.scss

@@ -17,7 +17,7 @@ $grid_max: $grid_max_width + $grid_max_unit;
     top: 0;
     left: 0;
     height: 100vh;
-    width: calc((100vw - 980px) / 2);
+    width: calc((100vw - #{$grid_max}) / 2);
   }
 
   &__right {
@@ -25,6 +25,6 @@ $grid_max: $grid_max_width + $grid_max_unit;
     top: 0;
     right: 0;
     height: 100vh;
-    width: calc((100vw - 980px) / 2);
+    width: calc((100vw - #{$grid_max}) / 2);
   }
 }

layouts/_default/single.html

@@ -14,6 +14,7 @@
       {{ partial "body/toc" . }}
       {{ .Content }}
     </article>
+    {{ partial "script/codeblock-script" . }}
     {{ partial "body/share" . }}
     {{ partial "body/donation" . }}
     {{ partial "body/whoami" . }}

layouts/partials/script/codeblock-script.html

@@ -0,0 +1,48 @@
+<script>
+  'use strict';
+  // ====================== markdown code block ======================
+  function wrap(el, wrapper) {
+    el.parentNode.insertBefore(wrapper, el);
+    wrapper.appendChild(el);
+  }
+
+  (function () {
+    var singleContentsElem = document.querySelector('.single__contents');
+    singleContentsElem ? 
+    singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
+      var dataLang = elem.getAttribute('data-lang');
+      var dataLangWrapper = document.createElement('div');
+      var code = null;
+      var codeTitle = null;
+
+      if (dataLang && dataLang.includes(':')) {
+        code = dataLang.split(':')[0];
+        codeTitle = dataLang.split(':')[1];
+
+        dataLangWrapper.className = 'language-' + code;
+        dataLangWrapper.setAttribute('data-lang', codeTitle);
+
+        elem.className = 'language-' + code;
+        elem.setAttribute('data-lang', codeTitle);
+        elem.setAttribute('id', codeTitle);
+      } else if (!dataLang) {
+        dataLangWrapper.setAttribute('data-lang', 'Code');
+        dataLangWrapper.className = 'language-code';
+      }
+
+      if (!dataLang || codeTitle) {
+        wrap(elem.parentNode, dataLangWrapper);
+      }
+
+    }) : null;
+  })();
+
+  var langCodeElem = document.querySelectorAll('.language-code');
+  langCodeElem ? langCodeElem.forEach(function (elem) {
+    var newElem = document.createElement('span');
+    newElem.className = 'copy-to-clipboard';
+    newElem.setAttribute('title', 'Copy to clipboard');
+    elem.append(newElem);
+  }) : null;
+  // =================================================================
+</script>

layouts/partials/script/single-script.html

@@ -90,34 +90,6 @@
     var navbar = document.querySelector('.navbar');
     var singleContentsElem = document.querySelector('.single__contents');
 
-    // ====================== markdown code block ======================
-    function wrap(el, wrapper) {
-      el.parentNode.insertBefore(wrapper, el);
-      wrapper.appendChild(el);
-    }
-
-    (function () {
-      singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
-        var dataLang = elem.getAttribute('data-lang');
-        if (!dataLang) {
-          var dataLangWrapper = document.createElement('div');
-          dataLangWrapper.setAttribute('data-lang', 'Code');
-          dataLangWrapper.className = 'language-code';
-          wrap(elem.parentNode, dataLangWrapper);
-        }
-      });
-    })();
-
-    var langCodeElem = document.querySelectorAll('.language-code');
-    langCodeElem ? langCodeElem.forEach(function (elem) {
-      var newElem = document.createElement('span');
-      newElem.className = 'copy-to-clipboard';
-      newElem.setAttribute('title', 'Copy to clipboard');
-      elem.append(newElem);
-    }) : null;
-    // =================================================================
-
-
     // ======================= busuanzi counter ========================
     {{ $enableBusuanzi := .Site.Params.enableBusuanzi }}
     {{ $busuanziPagePV := .Site.Params.busuanziPagePV }}
@@ -338,6 +310,9 @@
     var clipInit = false;
     var preChromaElem = document.querySelectorAll('pre.chroma');
     var langCodeElem = document.querySelectorAll('.language-code');
+    var dolorCodeElem = document.querySelectorAll('div.language-\\$');
+    var gtCodeElem = document.querySelectorAll('div.language-\\>');
+
     var makeClipboard = function(elem) {
       var code = elem,
         text = elem.textContent;
@@ -398,6 +373,13 @@
       }
     }
 
+    var makeSymbolClipboard = function(elem) {
+      var clipboardSpan = document.createElement('span');
+      clipboardSpan.setAttribute('class', 'copy-to-clipboard');
+      clipboardSpan.setAttribute('title', 'Copy to clipboard');
+      elem.parentNode.parentNode.insertBefore(clipboardSpan, elem.parentNode.nextElementSibling);
+    }
+
     preChromaElem ? 
     preChromaElem.forEach(function(elem) {
       elem.querySelectorAll('code').forEach(function(codeElem) {
@@ -411,6 +393,41 @@
         makeClipboard(codeElem);
       });
     }) : null;
+
+    dolorCodeElem ? 
+    dolorCodeElem.forEach(function(elem) {
+      elem.querySelectorAll('code').forEach(function (codeElem) {
+        makeSymbolClipboard(codeElem);
+      });
+    }) : null;
+
+    gtCodeElem ?
+    gtCodeElem.forEach(function(elem) {
+      elem.querySelectorAll('code').forEach(function (codeElem) {
+        makeSymbolClipboard(codeElem);
+      });
+    }) : null;
+    // =================================================================
+
+
+    // ================ codeblock line number to symbol ================
+    dolorCodeElem ?
+    dolorCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '$<br/>';
+      }) : null;
+    }) : null;
+
+    gtCodeElem ?
+    gtCodeElem.forEach(function(elem) {
+      var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
+      lnts ? 
+      lnts.forEach(function(lnt) {
+        lnt.innerHTML = '><br/>';
+      }) : null;
+    }) : null;
     // =================================================================