前言

本人算是一个程序员，同时爱好打打ACM，因此有时候博客会需要放代码，但Typecho原本的代码引入就是个鸡肋。我加入handsome主题之后，感觉主题自带的代码高亮有点平凡，因此在按耐不住本人的折腾心的情况下，就去找了一下代码高亮插件。很幸运的是我发现跟我一起用handsome主题的博主很多，因此很快就找到了答案，这篇文章就打算讲讲怎么装代码高亮插件「Code Prettify」。感谢博主Xcnte撰写的Typecho代码高亮插件Code Prettify一文，「Code Prettify」也是出自他之手，本文的核心内容参考于他的文章。

Code Prettify

1.插件介绍

「Code Prettify」是一个基于 prismjs 的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，共提供11种代码高亮风格自由切换，支持显示代码语言类型、行号，以及支持复制代码到剪切板功能。最初Xcnte博主基于 Highlight 插件，开发一款名为「ColorHighlight」的插件，但由于存在着些许bug，因此就在原有的代码高亮样式上新增了Mac风格代码，修改了部分代码，诞生了现在有9种高亮风格的「Code Prettify」。

2.插件下载

插件最新更新时间：2020/08/20（新增Objective-c语言高亮），具体情况可看Xcnte博主的文章。

Github下载

码云下载

3.安装（以handsome主题为例）

第1步：下载插件，解压，把解压出来的文件夹重命名为 CodePrettify ，然后把整个文件夹放到博客站点的 usr/plugins/ 目录中。

第2步：登录自己博客的后台，进入插件管理，启用插件，注意如果有同类型的插件，记得关掉，否则可能会有冲突。

第3步：在设置中，可以选择主题风格，是否显示行号等。

第4步：接着需要更改（替换）一下handsome主题原有的 handsome.min.css ，在 /usr/themes/handsome/assets/css/ 路径下，这里放上原有的和更改后的handsome.min.css文件的度盘链接（提取码6576）。本人的css比较原生态，适合还没开始魔改的新人。

第5步：对于已经魔改过css的用户（没有魔改的可以跳过此步），可以直接在css文件中找到下面这段代码，可以 ctrl+f 查找 pre code ，查找到的第二个就是了，这段后面接着的是.hljs……。

pre {
    padding:0
}
pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding:15px
}

• Xcnte博主给的方法是删除上面的代码，接着在原处加入下面的代码。不过本人尝试过不删除上面的代码，直接在后面加入下面的代码，也能正常生效。

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

第6步：如果你的网站有开启Pjax（handsome主题默认开启），则要把下面的代码添加到回调函数的地方。以handsome主题为例，进入后台点击 主题 --> 设置外观 --> Pjax --> PJAX回调函数 ，把代码复制进去。

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

• 如果插件的设置里不显示行号，PJAX函数要改为如下

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

第7步：如果发现使用后出现了下面的行号没有正确渲染的情况，可能是css文件没有改对，如果改对了，则尝试清空浏览器缓存然后再加载一次（我出现了渲染错误的情况就是通过清空浏览器缓存搞定了）。

第8步：7.3.1的新版handsome主题内置的高亮与该插件冲突，要进入 后台 --> 设置外观 --> 主题增强功能 里关闭主题内置高亮

4.插件用法

\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
类比markdown插入代码的语法，使用的时候删除上边代码中的\即可

• c++写cpp进行标记声明
• c#写csharp进行标记声明

后记

代码高亮虽然是一件小事，但是可能也正是因为是小事，所以很多平台的编辑器自带的代码高亮做的都不好，Xcnte博主做的「Code Prettify」插件算是我见过比较用心的一个。虽然我是个理科生，但是对基本的审美是有一定的要求的，我不希望我的博客只有内容，一篇排版漂亮的博客才能让看客有更好的阅读体验，才能更好的把想传达的内容高效的传递给看客。

参考资料

• Typecho代码高亮插件Code Prettify

版权属于：PCsky

本文链接：http://www.hyouka.club/index.php/archives/7/

转载时须注明出处及本声明