aditya/hugo-theme-even
1
0
Fork 0
mirror of https://git.adityakumar.xyz/hugo-theme-even.git synced 2024-11-08 14:39:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(highlight): add support for chroma

Browse source 
BREAKING CHANGE: You need add params to enable `chroma` or `highlight.js` since they are disabled by default.
This commit is contained in:
olOwOlo 2018-07-10 00:49:20 +08:00
parent 85290e5c12
commit 77101032aa
No known key found for this signature in database
GPG key ID: 456394B6E7A15EA6
6 changed files with 186 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
exampleSite/config.toml
View file

@ -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 # 是否开启目录

8
layouts/partials/scripts.html
View file

@ -1,5 +1,9 @@
<!-- js -->
<script src="{{ "lib/highlight/highlight.pack.js?v=20171001" | relURL }}"></script>
<!-- highlight.js -->
{{- 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 }}

143
src/css/_partial/_post/_code.scss
View file

@ -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 }
}

1
src/css/_variables.scss
View file

@ -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",

22
src/js/even.js
View file

@ -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}`

9
src/js/main.js
View file

@ -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()
}