github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-17 18:22:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support using highlight.js

Browse Source
This commit is contained in:
Mimi 2020-05-08 12:55:35 +08:00
parent 9527ef6b06
commit 9fdaba295a
8 changed files with 45 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_config.yml
View File

@ -346,9 +346,8 @@ custom_logo: #/uploads/custom-logo.jpg
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal
# See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
highlight_theme: default
# Add copy button on codeblock
copy_button:
enable: false

2
scripts/events/index.js
View File

@ -7,6 +7,8 @@ hexo.on('generateBefore', () => {
require('./lib/config')(hexo);
// Add filter type `theme_inject`
require('./lib/injects')(hexo);
// Highlight
require('./lib/highlight')(hexo);
});
hexo.on('exit', () => {

28
scripts/events/lib/highlight.js Normal file
View File

@ -0,0 +1,28 @@
const fs = require('fs');
function parse(file) {
let css = fs.readFileSync(file).toString();
let rule = '';
let background = '';
let foreground = '';
css.replace(/\.hljs([^\S]+|,[^\{]+)\{(.*?)\}/sg, (match, $1, content) => {
rule += content;
return match;
});
rule.split('\n').forEach(line => {
if (line.includes('background:')) background = line.split('background:')[1];
else if (line.includes('background-color:')) background = line.split('background-color:')[1];
else if (line.includes('color:')) foreground = line.split('color:')[1];
});
return {
file,
background,
foreground
};
}
module.exports = hexo => {
hexo.config.highlight.hljs = false;
let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
hexo.theme.config.highlight = parse(file);
};

1
source/css/_common/scaffolding/highlight/copy-code.styl
View File

@ -35,7 +35,6 @@
if (hexo-config('codeblock.copy_button.style') == 'mac') {
.highlight {
background: #21252b;
border-radius: 5px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
padding-top: 30px;

7
source/css/_common/scaffolding/highlight/diff.styl
View File

@ -1,7 +0,0 @@
if ($highlight-theme == 'normal') {
$highlight-deletion = #fdd;
$highlight-addition = #dfd;
} else {
$highlight-deletion = #800000;
$highlight-addition = #008000;
}

57
source/css/_common/scaffolding/highlight/highlight.styl
View File

@ -1,8 +1,10 @@
// https://github.com/chriskempson/tomorrow-theme
$highlight-theme = hexo-config('codeblock.highlight_theme');
@import 'theme';
@import 'diff';
@import hexo-config('highlight.file');
$highlight-background = convert(hexo-config('highlight.background'));
$highlight-foreground = convert(hexo-config('highlight.foreground'));
$highlight-gutter = {
color: mix($highlight-background, $highlight-foreground, 10%),
bg-color: mix($highlight-background, $highlight-foreground, 90%)
};
@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
@ -30,10 +32,6 @@ code {
@extend $code-block;
position: relative;
*::selection {
background: $highlight-selection;
}
pre {
border: 0;
margin: 0;
@ -108,45 +106,4 @@ pre {
padding: 0;
text-shadow: none;
}
// For diff highlight
.deletion {
background: $highlight-deletion;
}
.addition {
background: $highlight-addition;
}
.meta {
color: $highlight-yellow;
disable-user-select();
}
.comment {
color: $highlight-comment;
}
.variable, .attribute, .tag, .name, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
color: $highlight-red;
}
.number, .preprocessor, .built_in, .builtin-name, .literal, .params, .constant, .command {
color: $highlight-orange;
}
.ruby .class .title, .css .rules .attribute, .string, .symbol, .value, .inheritance, .header, .ruby .symbol, .xml .cdata, .special, .formula {
color: $highlight-green;
}
.title, .css .hexcolor {
color: $highlight-aqua;
}
.function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
color: $highlight-blue;
}
.keyword, .javascript .function {
color: $highlight-purple;
}
}

137
source/css/_common/scaffolding/highlight/theme.styl
View File

@ -1,137 +0,0 @@
if ($highlight-theme == 'night') {
$highlight-background = #1d1f21;
$highlight-current-line = #282a2e;
$highlight-selection = #373b41;
$highlight-foreground = #c5c8c6;
$highlight-comment = #969896;
$highlight-red = #cc6666;
$highlight-orange = #de935f;
$highlight-yellow = #f0c674;
$highlight-green = #b5bd68;
$highlight-aqua = #8abeb7;
$highlight-blue = #81a2be;
$highlight-purple = #b294bb;
$highlight-gutter = {
color: lighten($highlight-background, 50%),
bg-color: darken($highlight-background, 100%)
};
} else if ($highlight-theme == 'night eighties') {
$highlight-background = #2d2d2d;
$highlight-current-line = #393939;
$highlight-selection = #515151;
$highlight-foreground = #cccccc;
$highlight-comment = #999999;
$highlight-red = #f2777a;
$highlight-orange = #f99157;
$highlight-yellow = #ffcc66;
$highlight-green = #99cc99;
$highlight-aqua = #66cccc;
$highlight-blue = #6699cc;
$highlight-purple = #cc99cc;
$highlight-gutter = {
color: $highlight-comment,
bg-color: darken($highlight-background, 40%)
};
} else if ($highlight-theme == 'night blue') {
$highlight-background = #002451;
$highlight-current-line = #00346e;
$highlight-selection = #003f8e;
$highlight-foreground = #ffffff;
$highlight-comment = #7285b7;
$highlight-red = #ff9da4;
$highlight-orange = #ffc58f;
$highlight-yellow = #ffeead;
$highlight-green = #d1f1a9;
$highlight-aqua = #99ffff;
$highlight-blue = #bbdaff;
$highlight-purple = #ebbbff;
$highlight-gutter = {
color: $highlight-comment,
bg-color: darken($highlight-background, 60%)
};
} else if ($highlight-theme == 'night bright') {
$highlight-background = #000000;
$highlight-current-line = #2a2a2a;
$highlight-selection = #424242;
$highlight-foreground = #eaeaea;
$highlight-comment = #969896;
$highlight-red = #d54e53;
$highlight-orange = #e78c45;
$highlight-yellow = #e7c547;
$highlight-green = #b9ca4a;
$highlight-aqua = #70c0b1;
$highlight-blue = #7aa6da;
$highlight-purple = #c397d8;
$highlight-gutter = {
color: lighten($highlight-background, 40%),
bg-color: lighten($highlight-background, 16%)
};
} else if ($highlight-theme == 'solarized') {
$highlight-background = #fdf6e3;
$highlight-current-line = #eee8d5;
$highlight-selection = #eee8d5;
$highlight-foreground = #586e75;
$highlight-comment = #93a1a1;
$highlight-red = #dc322f;
$highlight-orange = #cb4b16;
$highlight-yellow = #b58900;
$highlight-green = #859900;
$highlight-aqua = #2aa198;
$highlight-blue = #268bd2;
$highlight-purple = #6c71c4;
$highlight-gutter = {
color: $highlight-comment,
bg-color: $highlight-background
};
} else if ($highlight-theme == 'solarized dark') {
$highlight-background = #002b36;
$highlight-current-line = #073642;
$highlight-selection = #073642;
$highlight-foreground = #93a1a1;
$highlight-comment = #586e75;
$highlight-red = #dc322f;
$highlight-orange = #cb4b16;
$highlight-yellow = #b58900;
$highlight-green = #859900;
$highlight-aqua = #2aa198;
$highlight-blue = #268bd2;
$highlight-purple = #6c71c4;
$highlight-gutter = {
color: $highlight-comment,
bg-color: $highlight-background
};
} else if ($highlight-theme == 'galactic') {
$highlight-background = #262626;
$highlight-current-line = #303030;
$highlight-selection = #303030;
$highlight-foreground = #9e9e9e;
$highlight-comment = #6a6a6a;
$highlight-red = #ff511a;
$highlight-orange = #dd7202;
$highlight-yellow = #a68f01;
$highlight-green = #4ca340;
$highlight-aqua = #07a38f;
$highlight-blue = #3294ff;
$highlight-purple = #cc62fe;
$highlight-gutter = {
color: $highlight-comment,
bg-color: $highlight-background
};
} else {
$highlight-background = #f7f7f7;
$highlight-current-line = #efefef;
$highlight-selection = #d6d6d6;
$highlight-foreground = #4d4d4c;
$highlight-comment = #8e908c;
$highlight-red = #c82829;
$highlight-orange = #f5871f;
$highlight-yellow = #eab700;
$highlight-green = #718c00;
$highlight-aqua = #3e999f;
$highlight-blue = #4271ae;
$highlight-purple = #8959a8;
$highlight-gutter = {
color: #869194,
bg-color: #eff2f3
};
}

6
source/js/utils.js
View File

@ -64,6 +64,12 @@ NexT.utils = {
*/
registerCopyCode: function() {
document.querySelectorAll('figure.highlight').forEach(element => {
element.querySelectorAll('.code .line span').forEach(span => {
span.classList.forEach(name => {
span.classList.remove(name);
span.classList.add(`hljs-${name}`);
});
});
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-clipboard fa-fw"></i></div>');
const button = element.querySelector('.copy-btn');
button.addEventListener('click', event => {