SyntaxHighlighter Evolved解决代码高亮问题

自本站建立至今已有将近两月,刚建站时遇到了Google Fonts影响加载速度的问题,解决之后写了这篇文章,已被Google收录。

不得不说Google对独立博客的友好度真是秒杀百度N条街

这篇文章中大量粘贴了我在Linux Shell中所使用的命令,但是问题来了,既然已经能在Google上搜到我的文章,那下面这种极其不美观且影响阅读体验的代码样式也应该要改一改。

代码和正文内容混杂在一起,除了字号之外毫无区分度

既然如此,就要对代码块加上关键字高亮以及显示行数的样式,经过一番测试之后,最终选用了SyntaxHighlighter Evolved这个插件,毕竟是官方文档钦定的,而且更新较为频繁,适配到了5.0.3版本。

该插件使用上也相当简单,安装之后在原来代码块前后增加下图所示的标签即可,标签内容根据所使用的语言而定。

添加样式之后会变成这样:

相较于原来而言,代码块的区分度更为明显

除了在原来的代码块中加入标签之外,该插件在区块编辑器中提供了一个新的区块类型:SyntaxHighlighter Code

如果直接用该区块类型创建代码块,则无需添加声明代码语言的标签,可直接在编辑器右侧的区块设置中选择:

但是该方式创建的代码块字号较大,需要另外修改css文件来配置字体大小。

可在wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css中修改字体、字号、行间距等多个属性,可操作空间相当大。

发表评论

电子邮件地址不会被公开。 必填项已用*标注