Skip to content

Commit

Permalink
feat: add support for prismjs
Browse files Browse the repository at this point in the history
  • Loading branch information
Candinya committed May 23, 2024
1 parent 47627cc commit bae8a8d
Show file tree
Hide file tree
Showing 13 changed files with 234 additions and 14 deletions.
2 changes: 1 addition & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ source/
pnpm-lock.yaml

# 配色盘(别去毁了我们的空格,好吗)
src/scss/highlight/theme/
src/scss/highlight/*/theme/
4 changes: 2 additions & 2 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 2 additions & 1 deletion devtools/build-once.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand Down
40 changes: 32 additions & 8 deletions devtools/build-options.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -68,6 +91,7 @@ const buildJSOpts = {

module.exports = {
buildCSSOpts,
buildHighlightCSSOpts,
buildHighlightJSCSSOpts,
buildPrismJSCSSOpts,
buildJSOpts,
};
4 changes: 2 additions & 2 deletions layout/_partial/head.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -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)"}) %>
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
167 changes: 167 additions & 0 deletions src/scss/highlight/prismjs/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
28 changes: 28 additions & 0 deletions src/scss/highlight/prismjs/theme/atom-dark.scss
Original file line number Diff line number Diff line change
@@ -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";

0 comments on commit bae8a8d

Please sign in to comment.