From 77101032aa61cad251fbe02476aa6d1e0df24d74 Mon Sep 17 00:00:00 2001
From: olOwOlo <26087907+olOwOlo@users.noreply.github.com>
Date: Tue, 10 Jul 2018 00:49:20 +0800
Subject: [PATCH] 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 | 9 ++
layouts/partials/scripts.html | 8 +-
src/css/_partial/_post/_code.scss | 143 ++++++++++++++++++++++++++++++
src/css/_variables.scss | 1 +
src/js/even.js | 22 ++++-
src/js/main.js | 9 +-
6 files changed, 186 insertions(+), 6 deletions(-)
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0eb28e56a..14fa96075 100644
--- a/exampleSite/config.toml
+++ b/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 # 是否开启目录
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index fb6285b6c..a89ad8985 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,5 +1,9 @@
-
-
+
+{{- if .Site.Params.highlightInClient -}}
+
+{{- end -}}
+
+
{{- if .Site.Params.publicCDN.enable }}
{{ .Site.Params.publicCDN.jquery | safeHTML }}
{{ .Site.Params.publicCDN.slideout | safeHTML }}
diff --git a/src/css/_partial/_post/_code.scss b/src/css/_partial/_post/_code.scss
index 2a23a77ba..71652e681 100644
--- a/src/css/_partial/_post/_code.scss
+++ b/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 }
+}
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 06d750702..ef3fea7a3 100644
--- a/src/css/_variables.scss
+++ b/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",
diff --git a/src/js/even.js b/src/js/even.js
index 6b544a423..1711fa78e 100644
--- a/src/js/even.js
+++ b/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}`
diff --git a/src/js/main.js b/src/js/main.js
index 289b8dc72..64c44ca09 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -12,5 +12,10 @@ $(document).ready(function () {
Even.flowchart()
Even.sequence()
-hljs.initHighlighting()
-Even.highlight()
+if (window.hljs) {
+ hljs.initHighlighting()
+ Even.highlight()
+} else {
+ Even.chroma()
+}
+