基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，共提供11种代码高亮风格自由切换，支持显示代码语言类型、行号，以及支持复制代码到剪切板功能
起始
最初基于 Highlight 插件，开发一款名为ColorHighlight插件
但因为插件本身存在不少BUG，自己又不想重写结构，于是便重新基于CodeHighlighter开发了一款
依旧在原有的代码高亮样式上新增了Mac风格，修改了部分JS代码
下载
Github：https://github.com/Xcnte/Code-Prettify-for-typecho
码云：https://gitee.com/xcnte/Code-Prettify-for-typecho
激活
第 1 步：下载本插件，解压，放到 usr/plugins/ 目录中；
第 2 步：文件夹名改为 Code Prettify；
第 3 步：登录管理后台，激活插件
（请勿与其它同类插件同时启用，以免互相影响）
第 4 步：设置：选择主题风格，是否显示行号等。
第 5 步：修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件
-
将
handsome.min.css文件里的#post-content pre内容替换为padding:0; border-radius:0; overflow:hidden; -
将
handsome.min.css文件里的#post-content pre code内容替换为position:relative; display:block; overflow-x:auto; margin:4.4px 0.px 0.4px 1px; padding: 0; max-height:500px; padding-left:2em; -
在
handsome.min.css文件里末尾添加#post-content .code-toolbar pre code { position:relative; display:block; overflow-x:auto; margin:4.4px 0.px 0.4px 1px; padding: 0; max-height:500px; padding-left: 3.5em; } - 在
handsome.min.css文件里删除#post-content pre:before下所有内容
如果对主题css没有经过魔改的同学，可以通过直接替换handsome.min.css文件
根据你目前使用的handsome主题版本下载对应的handsome.min.css文件，建议大家使用最新handsome版本
Handsome 5.1.0 以上版本：
提取码：x1lq
Handsome 5.1.0 以下版本：
提取码：483p
用法
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\效果如下：
<?php echo 'hello jrotty!'; ?>若不填写语言类型
效果如下：
<?php echo 'hello jrotty!'; ?>Pjax
如果你的网站有开启Pjax（handsome主题默认开启）
若对Pjax不了解的同学，可以看看这篇文章的开头
请把以下代码添加到回调函数的地方，在你使用的主题设置里看看
以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);}重要说明
可设置项
1. 选择高亮主题风格 (官方提供的 8 种风格切换，本人自己新增了三种（Mac风格）)
- coy.css
- dark.css
- BlackMac.css（黑色Mac风格）
- GrayMac.css （默认选中：Mac风格（灰色））
- WhiteMac.css（白色Mac风格）
- twilight.css
- tomorrow-night.css
2. 是否在代码左侧显示行号 （默认开启）
后记
新版插件暂时取消了代码窗口化功能（功能已经写好了，但是效果达不到自己的预期），也许下个版本会加回来
因下个月要去参加比赛，估计要晚点才会更新下个版本
插件的兼容性应该不存在什么问题，博主在Handsome主题上使用一切正常
如果你在其他主题使用过程中出现了问题可以随时联系我
若有任何意见或发现任何BUG欢迎在该篇文章下留言 .png)
版权属于：Xcnte' s Blog（除特别注明外）
本文链接：https://www.xcnte.com/archives/523/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！
好像和handsome的5.2版本的兼容性有些问题，每次都需要刷新一下才能加载出效果（没有使用第三方MD编辑器接管解析）。不知道其他人有没有个毛病
回调函数已经添加了，并且只要关闭pjax动画便没有这种问题。但是没有无刷新体验了比较难受。
应该是不会出现这种情况，事先已经测试好了我有时间重新测试下
博主请帮我看下这个是什么原因呢
https://1345708774.top/archives/25/
abcd1234 abcd1234显示不全
默认的就会被序号挡住
请替换一下文章给出的handsome.min.css文件
已解决，感谢
更改css之后，出现了两个行号OωO
是需要在哪里关掉嘛
插件设置里行号显示关闭
单行的代码时 代码过长时 下面的滚动条height有点小 滑动时不容易按住 想调宽一点
F12自己调试一下就好
我安装并启用了插件。下载的对应版本的handsome.min.css替换。主题也设置了PJAX回调函数。但是在首页点进文章页内容出不来。必须要刷新一遍内容才能出来。关了pjax就正常了，缓存也清理了无数遍了，评论区能用的方法我都试了一遍，就是不行！求博主指点...
你主题设置里 将文章中的PJAX回调函数完整的粘贴进去，然后看看还会不会
重新新建一篇文章，看看
重新新建了一篇文章试了一下，还是不行。 第一篇测试文章 http://a7a7.net/blog/
遇到了相同的问题，请问解决了吗？求助
这边看你网站，已经没问题了
这个插件好像不支持C++？我用
include```c++
using namespace std;
int main(){
好像无法渲染cout<<"Hello World!";
return 0;
}
是的，晚点会更新一下
博主安装后启用说当前页面未找到
Server Error
文件夹名不能带空格，检查下
老哥，冒昧请教下 此页面中 激活下面 以Handsome主题为例 旁边那个 绿色的对号是怎么弄的
如果你是该主题，请注意看使用文档中增强功能这一块内容
楼主你好，我安装了这个插件。目前其它浏览器都没有问题，就是苹果的safari出现异常，显示很丑。能不能修复一下
提供一下截图
plugin.php 第44行 okaikia.css是干什么的
我控制报 okaikia.css net::ERR_ABORTED 404
默认显示的代码风格样式，你可以根据需要自己改成对应的高亮css文件名称
博主大哥，这里有个问题，我设置的都对，就是写好的文章用这个高亮之后，每次进去这个文章都不会显示代码高亮，每次都需要刷新一下才正常显示高亮，这个该怎么解决？换了好几个浏览器和网络都有这个问题……
我想知道你解决了没有
请注意文章中PJAX
博主，我设置了呀
清一下缓存。我这边看没问题
还是有问题呀！我设置的是MAC黑色风格的(╯°A°)╯︵○○○
我这边看了多次没问题，你游览器缓存清理完整，还不行你换游览器看一下就知道了
好的好的，谢谢你，φ(￣∇￣o)，我自己再试试，可能网络不好。。。
嗯，仔细检查下
博主，这个插件会不会与EditorMD冲突？css替换了但是没有效果，我把EditorMD禁用后也一样
没有效果？清理一下缓存，插件重新设置一下高亮样式，文章里注意代码块语法
不知道怎么又好了……刚刚弄了好久。感谢！
好的，有什么问题都可以说出来，我看到后会尽快回复( ๑´•ω•) "(ㆆᴗㆆ)
你好，博主，我下载了这个插件，但是我在后台启用插件的时候总是进入404页面啊，这是为什么啊，可不可以说一下，我什么插件都没启动，也是打不开
你检查一下插件目录下插件的文件夹名，不能带空格
文件夹没有空格还是Sever error
缓存
感谢啊，大兄弟，一下搞定φ(￣∇￣o)
不客气
滴！签到卡！请上车的乘客系好安全带，现在是：Mon May 27 2019 17:25:28 GMT+0800 (中国标准时间)
可否给一下博客地址？
我这边发布了一个测试页面的文章
https://www.qsit6.com/index.php/archives/45/
OωO
我看了下，行号正常显示，你清理一下缓存看看
已经解决了，刚才没注意清缓存嘻嘻(☆ω☆)
非常感谢博主抽出时间回复。
不客气OωO
滴！签到卡！请上车的乘客系好安全带，现在是：Mon May 27 2019 17:17:34 GMT+0800 (中国标准时间)
滴！签到卡！请上车的乘客系好安全带，现在是：Sun May 26 2019 22:21:15 GMT+0800 (中国标准时间)
请问主题自带的高亮要关掉吗 我这插件开了没效果 没有开CDN 清除缓存都试了 弄不好.png)
给一下网址
已经弄好了！ 谢谢
好的
滴！签到卡！请上车的乘客系好安全带，现在是：Fri May 17 2019 22:33:22 GMT+0800 (中国标准时间)
滴！签到卡！请上车的乘客系好安全带，现在是：Thu May 16 2019 00:27:27 GMT+0800 (中国标准时间)
滴！访客卡！请上车的乘客系好安全带，现在是：Sat May 11 2019 21:32:54 GMT+0800 (中国标准时间)
博主，我照你的设置弄好了，发现行号遮挡了代码（只有刷新一次遮挡的行号才会消失），我已经关闭了插件的显示行号的选项，规则缓存都刷新了。这是文章地址，http://www.myheyufei.com/index.php/archives/196/
已发现从主页进入就会出现上述的情况，如果直接访问文章页面就不会有这种情况，
Pjax的锅，你把文章中我给出的Pjax回调函数，2-5行的代码删除即可
好的，谢谢博主
不客气
博主大大你好，我按照你的方法替换了文件，结果在时光机里的私密和发送按钮有重叠，请问什么解决，目前我换回原来的那个css了。
我看了下css文件，导致按钮重叠不是该插件造成，你看看你是否有进行其他魔改？
按照直接替换文件会造成重叠，然后改代码不会，这样子
不好意思，上传的handsome.min.css我自己魔改过，起了冲突，已经修复了
好的，明天我再检查下
请注意看文章内容哦，下载替换Handsome.min.css文件
感谢，已经替换，难道是没有替换成功？
没有替换成功，如果你有使用CDN，要刷新一下规则
好的，已经成功了，非常感谢博主！
不客气
下次出现这种情况，插件设置里的样式重新设置一遍即可
好的~谢谢作者大大୧(๑•̀⌄•́๑)૭
不客气，小事
作者你好，我博客插件已按照上述设置设置成功，结果文章页面输出样式全变了，您可以看一下https://www.menron.com/archives/share/10.html
请问一下你后台是否启用的markdown语法解析？编辑器用的是什么
你好，我后台启用了markdown语法解析，没有使用编辑器插件，使用的是parsedown解析插件
如果有使用CDN，规则刷新一下
没有使用CDN
全文几本无自动换行，本人应付中考，暂无时间去折腾，希望作者能首推。
你好，https://www.zxu.me/usr/themes/handsome/assets/css/handsome.css?v=1.3.2这个CSS文件与插件样式冲突，建议您删除文件中滑动条样式，也可以留下您联系方式，我这边发给你
呃呃呃呃，实在抱歉，打字过于匆忙，原意为："全网基本无代码高亮自动换行"
换行，过长的代码适应页面另起一行，而不是滑动条。滑动条不够直接。
那除非你在文章的代码块里手动换行，插件默认的显示效果就是滑动条
φ(￣∇￣o)我的意思是建议你研究下...算了...╮(╯▽╰)╭
明白你的意思，但是换行你想一下 如果一句代码中途被强制截断换行，视觉上不觉得奇怪吗？
朋友，弄篇测试文章
能否给个测试地址？
滴滴滴~访客卡，请上车的旅客系好安全带，现在是：Mon Apr 22 2019 09:39:24 GMT+0800 (中国标准时间)
激活404
已正常
注意文件夹的命名，别带空格
我安装了插件，也开启了。直接下载对应版本的handsome.min.css替换。主题也设置了PJAX回调函数。清空了对应CDN，效果出不来呢。具体出来效果在我博客测试文章，有时间帮忙看看谢谢
还有，您的handsome.min.css文件没有替换成功，请重新替换一次
我更新了5.1.1插件的效果出来了。但是在首页点进文章页内容出不来。必须要刷新一遍内容才能出来。这个是什么回事呢
能仔细看文章嘛？Pjax这一块
原本Pjax是开启的，也添加了Pjax函数就会出现问题。现在关掉Pjax功能开关，文章内容才正常，但是整个网页都刷新了。好无奈∠( ᐛ 」∠)＿
我也是~~关了pjax就正常了，不然要刷新一次~
检查一下pjax是否正确
哈哈，很奇怪。关了再打开就正常了~~
不会，开启了PJAX就没问题了，你开起来后自己清一下缓存看看吧
这边看了下，效果已经有了
谢谢博主，已正常~
搞定了就好|´・ω・)ノ
语言类型为空的时候输出默认风格啊，能不能改成当语言类型为某个特定的值时才输出为默认风格。
感觉挺多人都习惯不输入语言类别的。不说了，我去一个一个改类别了
你可以自己去改，不习惯输入语言类别的说真的，你是我见过第一个
如果喜欢默认风格，建议别用插件
我不是这个意思，并不是喜欢使用默认风格，我指的是在```后面必须加上语言类别如shell、php之类的，插件才会输出MAC风格的代码框。
我文章的都是没写语言类别的，装了插件之后由于没写语言类别全变成默认风格了。好在文章不多，后来一个一个去改好、添加了语言类别。接着我去看了几个使用了这款插件的用户，发现其中也有一些人不习惯写语言类别而变成了默认风格。当然可能大部分人都是写了的。
我的建议是能否在不输入语言类别时依旧输出MAC风格。在语言风格为none（这个随意）时输出默认风格。
当然，我只是把我的想法给写了上来，您也没有义务因为我一个人修改插件代码。
不好意思，因为最近很忙，没怎么认真看评论，感谢您的建议.png)
最初的时候我就是按照你现在的想法去改的，但是后来觉得可能有一部分人希望某些代码块不显示MAC风格，比如说一些简单的一句话代码之类，下个版本会考虑加入自定义开关吧
希望优化一点问题,就是当鼠标在code块里滑动(这个时候code块获得了焦点)的时候再把鼠标移出外界文章不能滑动(此时焦点还在code块里)希望能够优化这一问题,优化下用户体验!
最后资瓷一波大佬!!!!!!!!
滴滴滴~访客卡，请上车的旅客系好安全带，现在是：Fri Apr 12 2019 22:33:40 GMT+0800 (中国标准时间)
这个问题已经解决了，你可以看看我https://www.xcnte.com/archives/297/，当鼠标移动到代码块中获得焦点，移到外界文章焦点就转到代码块外了
大佬可以尝试一下点击code块后,在将鼠标移出
可以在鼠标移出code块的时候初始化焦点,来改善下用户体验!
点击后，若鼠标移出code块，焦点已不在代码块里了，你可以换个游览器看看
好吧有个滚动缓动导致了有点延迟,尴尬
嗯！好的，感谢你的建议.png)
5.1.1好像不能用哎~~
已经更新了，Handsome5.1.1一样可用
请你仔细检查一下，包括文章里代码块的书写样式
别人使用都没任何问题的
知道了，原来是没设置语言类型 - -
另外我想请问下，支持的语言类型 在什么地方可以查看？
地址：https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
这里可以查看支持的语言类型
还有个问题...本文写的要将插件文件夹名改为"Code Prettify"，应该是"CodePrettify"吧，不应该有空格
是的，这里我没有注意，稍后会修改一下
感谢大佬。。。发现小问题，在小屏幕界面代码开头会被当着，改了下css就正常了
感谢提醒，已修复.png)
还要替换handsome.min.css文件呀....我的各种魔改岂不是无法保留了..
其实替换高亮部分的css内容就够了，我等下发出来吧
谢谢，麻烦你了
已添加~|´・ω・)ノ
装了这个插件之后没法禁用/启用任何插件...
突然又好了...尴尬
是大佬 关注了
滴滴滴~访客卡，请上车的旅客系好安全带，现在是：Thu Apr 11 2019 13:45:52 GMT+0800 (中国标准时间)
来了
滴滴滴~访客卡，请上车的旅客系好安全带，现在是：Wed Apr 10 2019 23:22:49 GMT+0800 (中国标准时间)
如果插件符合你的心意，不妨留言支持一下？
已撸
滴滴滴~访客卡，请上车的旅客系好安全带，现在是：Wed Apr 10 2019 20:46:20 GMT+0800 (中国标准时间)