生成海报3
在本主题中,支持自定义代码块高亮样式,使用的是highlightjs
# 下载css
在使用之前,你需要先下载highlightjs
的css文件,我们是通过导入高亮css样式,来切换代码块高亮样式的,请在当前博客中,运行下面命令
npm install highlight.js
1
# 导入css
当运行npm install highlight.js
命令之后,会将highlight.js的所有文件放置在node_modules
目录中,你需要在此目录中,找到一个文件夹为highlight.js
的目录,点击进去
如果你实在没有找到这个
highlight.js
文件夹,那么就是你没有运行npm install highlight.js
这个命令,或者是没有在正确的地方运行
# 修改config.js
进入docs/.vuepress/config.js
文件内,将下面的代码加入到此文件中
extendsMarkdown: (md) => {
md.set({
highlight: function (str, lang) {
if (lang && require('highlight.js').getLanguage(lang)) {
try {
//if (lang === "c") {
// lang = "csharp"
//}
return require('highlight.js').highlight(str, { language: lang }).value;
} catch (__) {}
}
return '';
}
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
必看
# 使用样式
待你上面步骤完成之后,你现在只需要在docs/.vuepress/styles/index.css
文件内,使用你刚才复制的那些样式就行了
@import "css样式路径";
1
这里的css样式文件,就是你刚才在第二步中,从
\node_modules\highlight.js\styles
内复制出来的文件,如果你的路径正确的话,那么你现在刷新网页,就会看到代码块样式发生改变了
TIP
因为highlightjs的样式非常多,有200多款,你具体喜欢哪种,请自己尝试,上图中的,styles目录下的css样式,每一个css文件,就是一个代码块样式,我这里也没有能够直接展示这200多款样式的工具,需要你自己修改@import "css样式路径";
的样式文件路径,才能看到效果
# 关于C#代码块不能高亮问题
如果C#代码块不能高亮,请修改一下下面的判断条件,如果你使用其他语言,也是代码块高亮不正确的话,也是一样的,修改一下判断条件
extendsMarkdown: (md) => {
md.set({
highlight: function (str, lang) {
if (lang && require('highlight.js').getLanguage(lang)) {
try {
/*
修改一下下面,如果同时存在多个语言,代码块不能正常显示,也是增加多个判断就行
这是是写c,但是我修改成csharp的原因是因为,C#代码块,默认显示的时候,是c,但是其真正的名字需要为csharp,才能正常显示,否则C#代码
块,最终就是以C的高亮显示
*/
if (lang === "c") {
lang = "csharp"
}
return require('highlight.js').highlight(str, { language: lang }).value;
} catch (__) {}
}
return '';
}
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21



古茗
¥ 10

烧奶珍珠奶茶
¥ 9

酸奶
¥ 4

其他
¥ 自定义
冰糖指蜂蜜
¥ 10
推荐阅读
点击评论
文章目录
最新文章
公告
