feat: use highlightjs as highlighter

3 files changed, 22 insertions, 106 deletions

diff --git a/_includes/head.html b/_includes/head.html
index be3be7a..1ac5112 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -6,10 +6,17 @@
   {%- seo -%}
   <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 -%}
+  {%- include extensions/google-analytics.html -%}
   {%- endif -%}
 </head>
diff --git a/_sass/yat/_syntax-highlighting.scss b/_sass/yat/_syntax-highlighting.scss
deleted file mode 100644
index 8e1224d..0000000
--- a/_sass/yat/_syntax-highlighting.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Syntax highlighting styles
- */
-
-.highlight {
-  color: #c7c7c7;
-  @extend %vertical-rhythm;
-
-  .c     { color: #998; font-style: italic } // Comment
-  .err   { color: #a61717; background-color: #e3d2d2 } // Error
-  .k     { font-weight: bold } // Keyword
-  .o     { font-weight: bold } // Operator
-  .cm    { color: #998; font-style: italic } // Comment.Multiline
-  .cp    { color: #999; font-weight: bold } // Comment.Preproc
-  .c1    { color: #998; font-style: italic } // Comment.Single
-  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
-  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
-  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
-  .ge    { font-style: italic } // Generic.Emph
-  .gr    { color: #a00 } // Generic.Error
-  .gh    { color: #999 } // Generic.Heading
-  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
-  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
-  .go    { color: #888 } // Generic.Output
-  .gp    { color: #555 } // Generic.Prompt
-  .gs    { font-weight: bold } // Generic.Strong
-  .gu    { color: #aaa } // Generic.Subheading
-  .gt    { color: #a00 } // Generic.Traceback
-  .kc    { font-weight: bold } // Keyword.Constant
-  .kd    { color: #0fdcdc; font-weight: bold } // Keyword.Declaration
-  .kp    { font-weight: bold } // Keyword.Pseudo
-  .kr    { font-weight: bold } // Keyword.Reserved
-  .kt    { color: #a7a7a7; font-weight: bold } // Keyword.Type
-  .m     { color: #099 } // Literal.Number
-  .s     { color: #d0c55c } // Literal.String
-  .na    { color: #a6e22e } // Name.Attribute
-  .nb    { color: #6cc117 } // Name.Builtin
-  .nc    { color: #4682b4; font-weight: bold } // Name.Class
-  .no    { color: #a6e22e } // Name.Constant
-  .ni    { color: #800080 } // Name.Entity
-  .ne    { color: #e04b9b; font-weight: bold } // Name.Exception
-  .nf    { color: #e04b9b; font-weight: bold } // Name.Function
-  .nn    { color: #a6e22e } // Name.Namespace
-  .nt    { color: #4ec2e4 } // Name.Tag
-  .nv    { color: #a6e22e } // Name.Variable
-  .ow    { font-weight: bold } // Operator.Word
-  .w     { color: #bbb } // Text.Whitespace
-  .mf    { color: #099 } // Literal.Number.Float
-  .mh    { color: #099 } // Literal.Number.Hex
-  .mi    { color: #099 } // Literal.Number.Integer
-  .mo    { color: #099 } // Literal.Number.Oct
-  .sb    { color: #d0c55c } // Literal.String.Backtick
-  .sc    { color: #d0c55c } // Literal.String.Char
-  .sd    { color: #d0c55c } // Literal.String.Doc
-  .s2    { color: #d0c55c } // Literal.String.Double
-  .se    { color: #d0c55c } // Literal.String.Escape
-  .sh    { color: #d0c55c } // Literal.String.Heredoc
-  .si    { color: #d0c55c } // Literal.String.Interpol
-  .sx    { color: #d0c55c } // Literal.String.Other
-  .sr    { color: #009926 } // Literal.String.Regex
-  .s1    { color: #d0c55c } // Literal.String.Single
-  .ss    { color: #990073 } // Literal.String.Symbol
-  .bp    { color: #999 } // Name.Builtin.Pseudo
-  .vc    { color: #a6e22e } // Name.Variable.Class
-  .vg    { color: #a6e22e } // Name.Variable.Global
-  .vi    { color: #a6e22e } // Name.Variable.Instance
-  .il    { color: #099 } // Literal.Number.Integer.Long
-}
-
-code .rouge-table {
-  @extend .highlight;
-}
-
-code.highlighter-rouge {
-  color: white;
-  background: #676767;
-  border: none;
-  padding: 2px 4px;
-}
-
-figure.highlight pre {
-  border-radius: 3px;
-
-  code table.rouge-table {
-    margin: 0;
-
-    td {
-      border: 1px solid #efefef86;
-    }
-
-    pre {
-      margin: 0;
-      padding: 0;
-    }
-
-    .gutter.gl {
-      padding: 0;
-
-      .lineno {
-        padding: 2px;
-        text-align: center;
-      }
-    }
-  }
-}
diff --git a/assets/js/main.js b/assets/js/main.js
index 231191b..0a11d07 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -55,3 +55,17 @@ function smoothScrollTo(y, time) {
     })();
   }
 }
+
+// Init highlight js
+document.addEventListener('DOMContentLoaded', function(event) {
+  document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightBlock(block);
+    var lang = block.getAttribute('data-lang');
+    if (!lang) {
+      lang = block
+        .getAttribute('class')
+        .replace('hljs ', '');
+    }
+    block.parentNode.setAttribute('data-lang', lang);
+  });
+});