前言

  我的博客主题采用的是black-blue,从SPFK和yalia主题摇身一变过来的,整体风格偏黑,我比较喜欢,最重要的是,手机版有目录页面!!!
  然而最近在使用的过程中,发现代码块的效果有很多问题

  • 代码块的标题栏长度,随着滚动会不及代码的长度
  • 代码块标题栏没有当前语言的显示
  • 代码块不支持VEX等大部分的CG语言

操作截图

代码块滚动问题

  滚动条的问题原本不难解决,只要让它窗口监听resize事件,当窗口发生变化的时候,让代码的长度匹配标题的长度。
  然而这里并没有这么简单,最主要的问题是,标题栏居然是个CSS伪元素,正如上面截图看到的,它的element是::before,那么要对其进行DOM操作就变得非常曲折。
  后面我上网查了之后,得出结论就是要动态加入style标签修改::before的样式。
  虽然思路是对的,但是代码块的::before都是源于同一个CSS,直接修改就会修改全部的代码块,最后只能让一个代码块适配。
  因此我要为一个代码块另外创建一个有区分的CSS样式表。
  这个过程我一度怀疑这样的可行性,如此麻烦还不如用div进行操作。
  后来还是让我找到了解决方案,将下面的代码放到article.ejs里面(这个文件在主题文件夹的layout里面)
  这样在生成文章html的时候,代码就会嵌套到文章当中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//添加到article.ejs中
function codeAutoResize(){
if($(".highlight").length >   0) {//判断代码块是否存在
$(".highlight").each(function(index){//遍历代码块
let parentWidth = $(this).css('width');//获取代码块的宽度
let childWidth = $(this).children('table').css('width');//获取代码的宽度
if(parseInt(parentWidth) < parseInt(childWidth) ){//转成整数比较宽度大小
$(this).children('style').remove();//清理style标签(不会让style标签无限增加)
$(this).addClass("resize"+ index);//添加class名 用于区分不同的代码块
$(this).append("<style>.highlight.resize"+ index +"::before{width:" + childWidth + "}</style>");//根据class名来修改宽度
}else{
$(this).children('style').remove();
$(this).addClass("resize"+ index);
$(this).append("<style>.highlight.resize"+ index +"::before{width:" + parentWidth + "}</style>");
}
});
}
}

codeAutoResize();//初始化

$(window).resize(function(){
codeAutoResize();//改变尺寸的时候执行
});

代码块标题栏没有当前语言的显示

  在上面的截图可以看到伪元素的content上是有attr(data-lang)属性。
  网上查了才知道原来这个可以获取html的自定义属性嵌入到内容中,显然这里的html就没有这个属性。
  但是代码块是在哪里生成的,又应该在哪里嵌入这个html属性呢?
  经过我一番摸索,在article.ejs里面发现了猫腻,

操作截图

  上面的div标签是通过浏览器的控制台发现的,但是文章内容这么多,为何ejs的模板却这么短。
  原来所有的内容都在post.content里面了。
  也就是说hexo内部完成了markdown的解析,作为hexo的使用者只需要关心网站的架构即可。
  但是这样就导致我没有办法给相应的代码块添加对应语言的标签了。(或许可以通过jquery添加对应的data-lang属性,但是获取到对的应语言似乎挺麻烦的)

  鉴于此,我就在hexo里面寻找答案,况且后面解决代码高亮的问题也许好在hexo的内核里面寻求答案。
  经过很长时间的摸索,我终于找到了关键代码。在node_module中的hexo\lib\plugins\filter\before_post_render文件其中有backtick_code_block.js的js文件。
  这个文件就是hexo解析markdown代码块的核心代码,通过在这里加入console.log之后可以在hexo生成文章链接的时候看到信息反馈在git中,

操作截图

  这里通过正则表达式将代码块识别出来,并且分别截获代码块后面的内容,进行不同的操作。而关键的代码语言存储到options.lang中,最后options传入到highlight函数中。
  在node_module的hexo-util\lib中可以找到highlight.js,这里就可以找到html代码块的生成代码了。

操作截图

  在这里加入data-lang就可以在生成代码块的时候将语言的信息嵌套到html供::before去调用了。

加入自定义语言高亮支持

  通过上面的一通操作可以知道,hexo解析markdown代码块是通过highlight.js来实现的。上面hexo的highlight.js是hexo内部用来调用外部的highlight.js用的,在node_module文件夹中就有highlight.js,专门用来高亮代码的脚本。
  奈何特效相关的编程语言比较小众,它居然还支持MEL,我都惊了。然而VEX还是个遗憾,另外之前我写了正则表达式相关的博文,正则表达式也没有高亮支持。

  既然没有那就做一个呗,反正它内部有那么多门语言作为参考我就不信自己搞不定,所以我先从简单的正则表达式入手。
  不过加入之前要先在hexo弄好相关的代码,否则就会跳过脚本的。
  首先是node_modules\highlight.js\lib 的 index.js,需要在里面添加新的注册语言。
  另外node_modules\hexo-util 的 highlight_alias.json可以添加语言的模糊识别。
  后面就是如何对相应的内容进行高亮显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
module.exports = function(hljs) {
var COMMA = {
className: 'keyword',//识别成功之后加入的class名
begin: '[,]'//正则表达式识别
};

var Key = {
className: 'keyword',
begin: '[?!$*+.\^|]'//识别正则表达式的典型符号
};

var BUILD_IN = {
className: 'class',
begin: /\\/ ,
end: '[dfnrsStvbBw]'//识别正则表达式\n \w 等标志
};

var PARENTHESIS = {
className: 'value',
begin: /[()]/,
};

return {
case_insensitive: true,
contains: [
{
className: 'strings',
begin: /\{/, end: /\}/,
relevance: 0,
contains: [
hljs.C_NUMBER_MODE,
COMMA,
]
},
hljs.C_LINE_COMMENT_MODE,//C语言单行注释
hljs.C_BLOCK_COMMENT_MODE,//C语言多行注释
hljs.C_NUMBER_MODE,//识别数字
Key,
BUILD_IN,
PARENTHESIS

]
};
};

  从上面的代码可以知道,highlight.js是通过正则表达式找到相应的代码加入class名,而着色是需要自己写css给相应的代码进行着色。

1
2
3
(<script>(.*\n)+</.*?>)|(<.*?>)(?=(.*\n)+
```[a-zA-Z])|(<.*?>)(?!(.*\n)+
```)

操作截图


  貌似正则表达式还是比较简单的,要处理Vex这种复杂的语言要如何进行正则表达式判断呢?
  其实没有那么复杂,因为VScode和sublime都支持VEX高亮,截取里面的关键代码就好了。
  VEX高亮脚本-链接

  当然别忘了加入CSS样式处理高亮效果

1
2
3
4
5
6
7
8
9
10
pre .vex_built_in{color:#66cccc}
pre .vex_type{color:#ed77ed}
pre .vex_operator{color:#ed77ed}
pre .vex_string{color:#63c563}
/* 这个部分Houdini没有高亮 有需要的话可以自己设置 */
/* pre .vex_context{color:#ed77ed} */
/* pre .vex_variable{color:#eecd10} */
/* pre .vex_function{color:#66d9ef} */
/* pre .vex_title{color:#66d9ef} */
/* pre .vex_number{color:#7163d7} */

  Vex代码的呈现效果:

1
2
3
4
5
6
for (int i = 0; i < @numprim; i++)
{
float test = 1;
string group_name = "curve" + itoa(i+1);
setprimgroup(0, group_name, i, true);
}

操作截图