feat(highlight): add support for chroma

BREAKING CHANGE: You need add params to enable `chroma` or `highlight.js` since they are disabled by default.

exampleSite/config.toml

@@ -7,6 +7,12 @@ enableRobotsTXT = true
 enableEmoji = true
 theme = "even"
 
+# Syntax highlighting by Chroma. NOTE: Don't enable `highlightInClient` and `chroma` at the same time!
+pygmentsOptions = "linenos=table"
+pygmentsCodefences = true
+pygmentsUseClasses = true
+pygmentsCodefencesGuessSyntax = true
+
 hasCJKLanguage = true     # has chinese/japanese/korean ? # 自动检测是否包含 中文\日文\韩文
 paginate = 5                                              # 首页每页显示的文章数
 disqusShortname = ""      # disqus_shortname
@@ -65,6 +71,9 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
   # show word count and read time ?                       # 是否显示字数统计与阅读时间
   moreMeta = false
 
+  # Syntax highlighting by highlight.js
+  highlightInClient = false
+
   # 一些全局开关，你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能，在 archetypes/default.md 查看更多信息。
   # Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
   toc = true                                                                            # 是否开启目录

layouts/partials/scripts.html

@@ -1,5 +1,9 @@
-<!-- js -->
+<!-- highlight.js -->
-<script src="{{ "lib/highlight/highlight.pack.js?v=20171001" | relURL }}"></script>
+{{- if .Site.Params.highlightInClient -}}
+  <script src="{{ "lib/highlight/highlight.pack.js?v=20171001" | relURL }}"></script>
+{{- end -}}
+
+<!-- core -->
 {{- if .Site.Params.publicCDN.enable }}
   {{ .Site.Params.publicCDN.jquery | safeHTML }}
   {{ .Site.Params.publicCDN.slideout | safeHTML }}

src/css/_partial/_post/_code.scss

@@ -11,6 +11,7 @@ code {
   color: $code-color;
 }
 
+// highlight.js
 figure.highlight {
   margin: 1em 0;
   border-radius: 5px;
@@ -138,3 +139,145 @@ figure.highlight {
     }
   }
 }
+
+// chroma
+.highlight > .chroma {
+  margin: 1em 0;
+  border-radius: 5px;
+  overflow-x: auto;
+  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
+  position: relative;
+  background: $code-background;
+
+  code {
+    padding: 0;
+  }
+
+  table {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: 2px 7px;
+      font-size: $code-font-size;
+      font-weight: bold;
+      color: darken($gray, 10%);
+      background: darken($code-background, 3%);
+      content: 'Code';
+    }
+  }
+
+  @each $sign, $text in $code-type-list {
+    &.#{$sign} > table::after {
+      content: $text;
+    }
+  }
+
+  .lntd {
+    // Fix code block null line height and
+    // Synchronous gutter and code line highly.
+    line-height: round($code-font-size * 1.5);
+
+    &:first-child {
+      width: 10px;
+
+      pre {
+        margin: 0;
+        padding: 30px 7px 10px;
+      }
+    }
+
+    &:last-child {
+      vertical-align: top;
+
+      pre {
+        margin: 0;
+        padding: 30px 10px 10px;
+      }
+    }
+  }
+
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  /* LineNumbersTable */  .lnt { color: $gray; }
+  /* LineHighlight */  .hl { display: block; width: 100%; background-color: #ffffcc }
+
+  /* Keyword */  .k { color: #859900 }
+  /* KeywordConstant */  .kc { color: #859900; font-weight: bold }
+  /* KeywordDeclaration */  .kd { color: #859900 }
+  /* KeywordNamespace */  .kn { color: #dc322f; font-weight: bold }
+  /* KeywordPseudo */  .kp { color: #859900 }
+  /* KeywordReserved */  .kr { color: #859900 }
+  /* KeywordType */  .kt { color: #859900; font-weight: bold }
+  /* Name */  .n { color: #268bd2 }
+  /* NameAttribute */  .na { color: #268bd2 }
+  /* NameBuiltin */  .nb { color: #cb4b16 }
+  /* NameBuiltinPseudo */  .bp { color: #268bd2 }
+  /* NameClass */  .nc { color: #cb4b16 }
+  /* NameConstant */  .no { color: #268bd2 }
+  /* NameDecorator */  .nd { color: #268bd2 }
+  /* NameEntity */  .ni { color: #268bd2 }
+  /* NameException */  .ne { color: #268bd2 }
+  /* NameFunction */  .nf { color: #268bd2 }
+  /* NameFunctionMagic */  .fm { color: #268bd2 }
+  /* NameLabel */  .nl { color: #268bd2 }
+  /* NameNamespace */  .nn { color: #268bd2 }
+  /* NameOther */  .nx { color: #268bd2 }
+  /* NameProperty */  .py { color: #268bd2 }
+  /* NameTag */  .nt { color: #268bd2; font-weight: bold }
+  /* NameVariable */  .nv { color: #268bd2 }
+  /* NameVariableClass */  .vc { color: #268bd2 }
+  /* NameVariableGlobal */  .vg { color: #268bd2 }
+  /* NameVariableInstance */  .vi { color: #268bd2 }
+  /* NameVariableMagic */  .vm { color: #268bd2 }
+  /* Literal */  .l { color: #2aa198 }
+  /* LiteralDate */  .ld { color: #2aa198 }
+  /* LiteralString */  .s { color: #2aa198 }
+  /* LiteralStringAffix */  .sa { color: #2aa198 }
+  /* LiteralStringBacktick */  .sb { color: #2aa198 }
+  /* LiteralStringChar */  .sc { color: #2aa198 }
+  /* LiteralStringDelimiter */  .dl { color: #2aa198 }
+  /* LiteralStringDoc */  .sd { color: #2aa198 }
+  /* LiteralStringDouble */  .s2 { color: #2aa198 }
+  /* LiteralStringEscape */  .se { color: #2aa198 }
+  /* LiteralStringHeredoc */  .sh { color: #2aa198 }
+  /* LiteralStringInterpol */  .si { color: #2aa198 }
+  /* LiteralStringOther */  .sx { color: #2aa198 }
+  /* LiteralStringRegex */  .sr { color: #2aa198 }
+  /* LiteralStringSingle */  .s1 { color: #2aa198 }
+  /* LiteralStringSymbol */  .ss { color: #2aa198 }
+  /* LiteralNumber */  .m { color: #2aa198; font-weight: bold }
+  /* LiteralNumberBin */  .mb { color: #2aa198; font-weight: bold }
+  /* LiteralNumberFloat */  .mf { color: #2aa198; font-weight: bold }
+  /* LiteralNumberHex */  .mh { color: #2aa198; font-weight: bold }
+  /* LiteralNumberInteger */  .mi { color: #2aa198; font-weight: bold }
+  /* LiteralNumberIntegerLong */  .il { color: #2aa198; font-weight: bold }
+  /* LiteralNumberOct */  .mo { color: #2aa198; font-weight: bold }
+  /* OperatorWord */  .ow { color: #859900 }
+  /* Comment */  .c { color: #93a1a1; font-style: italic }
+  /* CommentHashbang */  .ch { color: #93a1a1; font-style: italic }
+  /* CommentMultiline */  .cm { color: #93a1a1; font-style: italic }
+  /* CommentSingle */  .c1 { color: #93a1a1; font-style: italic }
+  /* CommentSpecial */  .cs { color: #93a1a1; font-style: italic }
+  /* CommentPreproc */  .cp { color: #93a1a1; font-style: italic }
+  /* CommentPreprocFile */  .cpf { color: #93a1a1; font-style: italic }
+  /* Generic */  .g { color: #d33682 }
+  /* GenericDeleted */  .gd { color: #d33682 }
+  /* GenericEmph */  .ge { color: #d33682 }
+  /* GenericError */  .gr { color: #d33682 }
+  /* GenericHeading */  .gh { color: #d33682 }
+  /* GenericInserted */  .gi { color: #d33682 }
+  /* GenericOutput */  .go { color: #d33682 }
+  /* GenericPrompt */  .gp { color: #d33682 }
+  /* GenericStrong */  .gs { color: #d33682 }
+  /* GenericSubheading */  .gu { color: #d33682 }
+  /* GenericTraceback */  .gt { color: #d33682 }
+}

src/css/_variables.scss

@@ -235,6 +235,7 @@ $code-type-list: (
 
   language-erlang: "Erlang",
   language-go: "Go",
+  language-go-html-template: "Go HTML Template",
   language-groovy: "Groovy",
   language-haskell: "Haskell",
   language-kotlin: "Kotlin",

src/js/even.js

@@ -167,6 +167,16 @@ Even.highlight = function () {
   }
 }
 
+Even.chroma = function() {
+  const blocks = document.querySelectorAll('.highlight > .chroma')
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+    const afterHighLight =  block.querySelector('pre.chroma > code')
+    const lang = afterHighLight ? afterHighLight.className : ''
+    block.className += ' ' + lang
+  }
+}
+
 Even.toc = function () {
   const tocContainer = document.getElementById('post-toc')
   if (tocContainer !== null) {
@@ -210,8 +220,12 @@ Even.flowchart = function () {
 
   const blocks = document.querySelectorAll('pre code.language-flowchart')
   for (let i = 0; i < blocks.length; i++) {
+    if (!window.hljs && i % 2 === 0) continue
+
     const block = blocks[i]
-    const rootElement = block.parentElement
+    const rootElement = window.hljs
+        ? block.parentElement
+        : block.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
 
     const container = document.createElement('div')
     const id = `js-flowchart-diagrams-${i}`
@@ -229,8 +243,12 @@ Even.sequence = function () {
 
   const blocks = document.querySelectorAll('pre code.language-sequence')
   for (let i = 0; i < blocks.length; i++) {
+    if (!window.hljs && i % 2 === 0) continue
+
     const block = blocks[i]
-    const rootElement = block.parentElement
+    const rootElement = window.hljs
+        ? block.parentElement
+        : block.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
 
     const container = document.createElement('div')
     const id = `js-sequence-diagrams-${i}`

src/js/main.js

@@ -12,5 +12,10 @@ $(document).ready(function () {
 Even.flowchart()
 Even.sequence()
 
-hljs.initHighlighting()
+if (window.hljs) {
-Even.highlight()
+  hljs.initHighlighting()
+  Even.highlight()
+} else {
+  Even.chroma()
+}
+