Skip to content

Commit 9fdaba2

Browse files
committedMay 8, 2020
Support using highlight.js
1 parent 9527ef6 commit 9fdaba2

File tree

8 files changed

+45
-198
lines changed

8 files changed

+45
-198
lines changed
 

‎_config.yml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -346,9 +346,8 @@ custom_logo: #/uploads/custom-logo.jpg
346346

347347
codeblock:
348348
# Code Highlight theme
349-
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
350-
# See: https://github.com/chriskempson/tomorrow-theme
351-
highlight_theme: normal
349+
# See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
350+
highlight_theme: default
352351
# Add copy button on codeblock
353352
copy_button:
354353
enable: false

‎scripts/events/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ hexo.on('generateBefore', () => {
77
require('./lib/config')(hexo);
88
// Add filter type `theme_inject`
99
require('./lib/injects')(hexo);
10+
// Highlight
11+
require('./lib/highlight')(hexo);
1012
});
1113

1214
hexo.on('exit', () => {

‎scripts/events/lib/highlight.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const fs = require('fs');
2+
3+
function parse(file) {
4+
let css = fs.readFileSync(file).toString();
5+
let rule = '';
6+
let background = '';
7+
let foreground = '';
8+
css.replace(/\.hljs([^\S]+|,[^\{]+)\{(.*?)\}/sg, (match, $1, content) => {
9+
rule += content;
10+
return match;
11+
});
12+
rule.split('\n').forEach(line => {
13+
if (line.includes('background:')) background = line.split('background:')[1];
14+
else if (line.includes('background-color:')) background = line.split('background-color:')[1];
15+
else if (line.includes('color:')) foreground = line.split('color:')[1];
16+
});
17+
return {
18+
file,
19+
background,
20+
foreground
21+
};
22+
}
23+
24+
module.exports = hexo => {
25+
hexo.config.highlight.hljs = false;
Code has comments. Press enter to view.
26+
let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
27+
hexo.theme.config.highlight = parse(file);
28+
};

‎source/css/_common/scaffolding/highlight/copy-code.styl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535

3636
if (hexo-config('codeblock.copy_button.style') == 'mac') {
3737
.highlight {
38-
background: #21252b;
3938
border-radius: 5px;
4039
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
4140
padding-top: 30px;

‎source/css/_common/scaffolding/highlight/diff.styl

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎source/css/_common/scaffolding/highlight/highlight.styl

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
// https://github.com/chriskempson/tomorrow-theme
2-
$highlight-theme = hexo-config('codeblock.highlight_theme');
3-
4-
@import 'theme';
5-
@import 'diff';
1+
@import hexo-config('highlight.file');
2+
$highlight-background = convert(hexo-config('highlight.background'));
3+
$highlight-foreground = convert(hexo-config('highlight.foreground'));
4+
$highlight-gutter = {
5+
color: mix($highlight-background, $highlight-foreground, 10%),
6+
bg-color: mix($highlight-background, $highlight-foreground, 90%)
7+
};
68

79
@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
810

@@ -30,10 +32,6 @@ code {
3032
@extend $code-block;
3133
position: relative;
3234

33-
*::selection {
34-
background: $highlight-selection;
35-
}
36-
3735
pre {
3836
border: 0;
3937
margin: 0;
@@ -108,45 +106,4 @@ pre {
108106
padding: 0;
109107
text-shadow: none;
110108
}
111-
// For diff highlight
112-
.deletion {
113-
background: $highlight-deletion;
114-
}
115-
116-
.addition {
117-
background: $highlight-addition;
118-
}
119-
120-
.meta {
121-
color: $highlight-yellow;
122-
disable-user-select();
Code has comments. Press enter to view.
123-
}
124-
125-
.comment {
126-
color: $highlight-comment;
127-
}
128-
129-
.variable, .attribute, .tag, .name, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
130-
color: $highlight-red;
131-
}
132-
133-
.number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command {
134-
color: $highlight-orange;
135-
}
136-
137-
.ruby .class .title, .css .rules .attribute, .string, .symbol, .value, .inheritance, .header, .ruby .symbol, .xml .cdata, .special, .formula {
138-
color: $highlight-green;
139-
}
140-
141-
.title, .css .hexcolor {
142-
color: $highlight-aqua;
143-
}
144-
145-
.function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
146-
color: $highlight-blue;
147-
}
148-
149-
.keyword, .javascript .function {
150-
color: $highlight-purple;
151-
}
152109
}

‎source/css/_common/scaffolding/highlight/theme.styl

Lines changed: 0 additions & 137 deletions
This file was deleted.

‎source/js/utils.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ NexT.utils = {
6464
*/
6565
registerCopyCode: function() {
6666
document.querySelectorAll('figure.highlight').forEach(element => {
67+
element.querySelectorAll('.code .line span').forEach(span => {
68+
span.classList.forEach(name => {
69+
span.classList.remove(name);
70+
span.classList.add(`hljs-${name}`);
71+
});
72+
});
6773
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
6874
const button = element.querySelector('.copy-btn');
6975
button.addEventListener('click', event => {

0 commit comments

Comments
 (0)
Please sign in to comment.