feat: use highlightjs as highlighter
This commit is contained in:
jeffreytse
parent
5d8928659e
commit
9204cde353
3 changed files with 22 additions and 106 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue