diff --git a/.prettierignore b/.prettierignore index 6b87623d..ccfc5f57 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,4 +8,4 @@ source/ pnpm-lock.yaml # 配色盘（别去毁了我们的空格，好吗） -src/scss/highlight/theme/ +src/scss/highlight/*/theme/ diff --git a/_config.yml b/_config.yml index 488ec15c..cb1b4371 100644 --- a/_config.yml +++ b/_config.yml @@ -88,8 +88,8 @@ pages: share: true # 代码高亮 -code_highlight: - theme: night-eighties # 代码高亮主题（light | night | night-eighties | night-blue | night-bright） +syntax_highlighter: + theme: night-eighties # 代码高亮主题（请参照具体的高亮插件对应的主题样式） # 侧边栏小挂件 sidebar: diff --git a/devtools/build-once.js b/devtools/build-once.js index ab1ff2fe..0957d8cf 100644 --- a/devtools/build-once.js +++ b/devtools/build-once.js @@ -4,7 +4,8 @@ const buildOpts = require("./build-options"); const buildOnce = () => { console.log("构建资源..."); esbuild.build(buildOpts.buildCSSOpts); - esbuild.build(buildOpts.buildHighlightCSSOpts); + esbuild.build(buildOpts.buildHighlightJSCSSOpts); + esbuild.build(buildOpts.buildPrismJSCSSOpts); esbuild.build(buildOpts.buildJSOpts); }; diff --git a/devtools/build-options.js b/devtools/build-options.js index 5041f257..b4c3e77e 100644 --- a/devtools/build-options.js +++ b/devtools/build-options.js @@ -26,16 +26,39 @@ const buildCSSOpts = { ], }; -const buildHighlightCSSOpts = { +const buildHighlightJSCSSOpts = { entryPoints: [ - "src/scss/highlight/theme/light.scss", - "src/scss/highlight/theme/night.scss", - "src/scss/highlight/theme/night-blue.scss", - "src/scss/highlight/theme/night-bright.scss", - "src/scss/highlight/theme/night-eighties.scss", + // highlight.js + "src/scss/highlight/highlight.js/theme/light.scss", + "src/scss/highlight/highlight.js/theme/night.scss", + "src/scss/highlight/highlight.js/theme/night-blue.scss", + "src/scss/highlight/highlight.js/theme/night-bright.scss", + "src/scss/highlight/highlight.js/theme/night-eighties.scss", ], outExtension: { ".css": ".min.css" }, - outdir: "source/css/highlight", + outdir: "source/css/highlight/highlight.js", + bundle: false, + minify: true, + plugins: [ + sassPlugin({ + async transform(source, resolveDir) { + const { css } = await postcss([ + autoprefixer, + postcssPresetEnv({ stage: 0 }), + ]).process(source, { from: undefined }); + return css; + }, + }), + ], +}; + +const buildPrismJSCSSOpts = { + entryPoints: [ + // prismjs + "src/scss/highlight/prismjs/theme/atom-dark.scss", + ], + outExtension: { ".css": ".min.css" }, + outdir: "source/css/highlight/prismjs", bundle: false, minify: true, plugins: [ @@ -68,6 +91,7 @@ const buildJSOpts = { module.exports = { buildCSSOpts, - buildHighlightCSSOpts, + buildHighlightJSCSSOpts, + buildPrismJSCSSOpts, buildJSOpts, }; diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 15fb983f..9609e4aa 100644 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -48,8 +48,8 @@ <% } %> <%- css_theme_cdn('css/kratosr.min.css', {id: "kratos-css", media:"all"}) %> - <% if (((config.highlight && config.highlight.enable) || config.syntax_highlighter === "highlight.js") && theme.code_highlight.theme) { %> - <%- css_theme_cdn(`css/highlight/${theme.code_highlight.theme || 'night-eighties'}.min.css`, {id: "highlight-css", media:"all"}) %> + <% if (config.syntax_highlighter && theme.syntax_highlighter.theme) { %> + <%- css_theme_cdn(`css/highlight/${config.syntax_highlighter}/${theme.syntax_highlighter.theme}.min.css`, {id: "highlight-css", media:"all"}) %> <% } %> <%- css_theme_cdn('css/kr-theme/light.min.css', {id: "theme-light-css", media:"all"}) %> <%- css_theme_cdn('css/kr-theme/dark.min.css', {id: "theme-dark-css", media:"(prefers-color-scheme: dark)"}) %> diff --git a/src/scss/highlight/style.scss b/src/scss/highlight/highlight.js/style.scss similarity index 100% rename from src/scss/highlight/style.scss rename to src/scss/highlight/highlight.js/style.scss diff --git a/src/scss/highlight/theme/light.scss b/src/scss/highlight/highlight.js/theme/light.scss similarity index 100% rename from src/scss/highlight/theme/light.scss rename to src/scss/highlight/highlight.js/theme/light.scss diff --git a/src/scss/highlight/theme/night-blue.scss b/src/scss/highlight/highlight.js/theme/night-blue.scss similarity index 100% rename from src/scss/highlight/theme/night-blue.scss rename to src/scss/highlight/highlight.js/theme/night-blue.scss diff --git a/src/scss/highlight/theme/night-bright.scss b/src/scss/highlight/highlight.js/theme/night-bright.scss similarity index 100% rename from src/scss/highlight/theme/night-bright.scss rename to src/scss/highlight/highlight.js/theme/night-bright.scss diff --git a/src/scss/highlight/theme/night-eighties.scss b/src/scss/highlight/highlight.js/theme/night-eighties.scss similarity index 100% rename from src/scss/highlight/theme/night-eighties.scss rename to src/scss/highlight/highlight.js/theme/night-eighties.scss diff --git a/src/scss/highlight/theme/night.scss b/src/scss/highlight/highlight.js/theme/night.scss similarity index 100% rename from src/scss/highlight/theme/night.scss rename to src/scss/highlight/highlight.js/theme/night.scss diff --git a/src/scss/highlight/prismjs/style.scss b/src/scss/highlight/prismjs/style.scss new file mode 100644 index 00000000..53d2c36f --- /dev/null +++ b/src/scss/highlight/prismjs/style.scss @@ -0,0 +1,167 @@ +// mac 样式的顶栏 + +pre[class*="language-"] { + border-radius: 8px; + padding-top: 30px !important; + position: relative; + + &:before { + background-color: #fc625d; + border-radius: 50%; + -webkit-box-shadow: + 20px 0 #fdbc40, + 40px 0 #35cd4b; + box-shadow: + 20px 0 #fdbc40, + 40px 0 #35cd4b; + content: " "; + height: 12px; + left: 10px; + position: absolute; + top: 10px; + width: 12px; + } + + code { + display: block; + overflow-x: auto; + } +} + +code[class*="language-"], +pre[class*="language-"] { + color: $prismjs_base_color; + text-shadow: $prismjs_text_shadow; + font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: $prismjs_base_background; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; + border-radius: 0.3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: $prismjs_comment; +} + +.token.punctuation { + color: $prismjs_punctuation; +} + +.namespace { + opacity: 0.7; +} + +.token.property, +.token.keyword, +.token.tag { + color: $prismjs_keyword; +} + +.token.class-name { + color: $prismjs_yellow; + text-decoration: underline; +} + +.token.boolean, +.token.constant { + color: $prismjs_constant; +} + +.token.symbol, +.token.deleted { + color: $prismjs_deleted; +} + +.token.number { + color: $prismjs_number; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: $prismjs_select; +} + +.token.variable { + color: $prismjs_variable; +} + +.token.operator { + color: $prismjs_operator; +} + +.token.entity { + color: $prismjs_entity; + cursor: help; +} + +.token.url { + color: $prismjs_url; +} + +.language-css .token.string, +.style .token.string { + color: $prismjs_string; +} + +.token.atrule, +.token.attr-value { + color: $prismjs_attribute; +} + +.token.function { + color: $prismjs_function; +} + +.token.regex { + color: $prismjs_regex; +} + +.token.important { + color: $prismjs_important; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} diff --git a/src/scss/highlight/prismjs/theme/atom-dark.scss b/src/scss/highlight/prismjs/theme/atom-dark.scss new file mode 100644 index 00000000..345d8710 --- /dev/null +++ b/src/scss/highlight/prismjs/theme/atom-dark.scss @@ -0,0 +1,28 @@ +/** + * atom-dark theme for `prism.js` + * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax + * @author Joe Gibson (@gibsjose) + */ + +$prismjs_base_color : #c5c8c6; +$prismjs_text_shadow : 0 1px rgba(0, 0, 0, 0.3); +$prismjs_base_background : #1d1f21; +$prismjs_comment : #7c7c7c; +$prismjs_punctuation : #c5c8c6; +$prismjs_keyword : #96cbfe; +$prismjs_yellow : #ffffb6; +$prismjs_constant : #99cc99; +$prismjs_deleted : #f92672; +$prismjs_number : #ff73fd; +$prismjs_select : #a8ff60; +$prismjs_variable : #c6c5fe; +$prismjs_operator : #ededed; +$prismjs_entity : #ffffb6; +$prismjs_url : #96cbfe; +$prismjs_string : #87c38a; +$prismjs_attribute : #f9ee98; +$prismjs_function : #dad085; +$prismjs_regex : #e9c062; +$prismjs_important : #fd971f; + +@import "../style.scss";