基于 Highlight的代码语法高亮插件 for Typecho，可显示语言类型、行号，有复制代码到剪切板等功能。本人博客使用的是Handsome主题，如若你在其他主题中使用该插件发现任何问题，可与我联系。
插件最新版本
旧版下载地址：
Github：https://github.com/Xcnte/ColorHighlight-for-typecho
码云：https://gitee.com/xcnte/ColorHighlight-for-typecho
起始
本插件是基于 Highlight 插件，改自泽泽https://qqdie.com/archives/typecho-highlightjs-plugin.html
首先名字改成了ColorHighlight
将Highlight.js的js和css都换成最新的了
在原有的功能上新增代码复制功能，Mac风格代码高亮，代码块窗口化
（请勿与其它同类插件同时启用，以免互相影响）
使用方法
第 1 步：下载本插件，解压，放到 usr/plugins/ 目录中；
第 2 步：文件夹名改为 ColorHighlight；
第 3 步：登录管理后台，激活插件；
第 4 步：设置：选择主题风格，是否显示行号等。
第 5 步：主题-->外观设置-->代码高亮的风格选择-->自定义
第 6 步： 删除/usr/themes/handsome/assets/css/handsome.min.css中所有关于pre、code标签的CSS
（这里直接下载handsome.min.css文件，然后替换一下即可）
用法
\```php
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\pjax
如果你的网站有开启Pjax（handsome主题默认开启，开启的情况下必须添加，否则代码复制、窗口化失效）
请把以下代码添加到回调函数的地方，在你使用的主题设置里看看
以Handsome主题为例：
主题-->设置外观-->Pjax-->PJAX回调函数
if (typeof myFunction !== 'undefined'){
myFunction();
}
$('pre').on('click', function (e) {
if (e.target !== this ) return;
$(this).toggleClass('code-block-fullscreen');
}
);
var l = $("pre code").find("ul").length;
if(l<=0){
$("pre code").each(function(){
$(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});
}重要说明
可设置项
1. 选择高亮主题风格 (官方提供的 92 种风格切换（下面列出几种），本人自己添加了一种（Mac风格）)
- dark.css
- default.css
- github.css
- customemin.css （默认选中：Mac风格，本人看着最顺眼）
- pojoaque.css
- tomorrow-night.css
- vs2015.css
2. 是否在代码左侧显示行号 （默认开启）
3. 兼容模式（默认关闭）
在插件设置中打开兼容模式，即可支持以前没有用Markdown书写的代码高亮
如果你的blog已经全部是Markdown书写，建议你不要打开它以节省资源。
本插件支持常见的一些语言高亮。您可以打开以下链接查看详情：
https://highlightjs.org/download/
与我联系
长期更新该插件，如果有任何意见或发现任何BUG请在该篇文章下留言 .png)
提示
由于插件只对了我博客的主题做了兼容性修改，在其它主题使用中可能会出现BUG，有什么问题可以随时联系我
点击代码块标题栏，就可以实现窗口化，再次点击缩小
插件复制默认没有加入代码Copy后的提示效果
如果想要和本博客一样的效果
请在模板目录的header.php文件中引入layer资源文件，代码如下
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>然后在主题设置里的自定义javascrit或主题js源文件中加入
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！', function(){});}; 版权属于：Xcnte' s Blog（除特别注明外）
本文链接：https://www.xcnte.com/archives/377/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！
旧版已经停止更新了，本文评论关闭！
如果还有继续使用小伙伴，有问题可以到右侧留言板询问！
还有博主你的站点引入文件好几个404 看着闹心，有时间你调整一下吧
好的，感谢提醒
滴！签到卡！请上车的乘客系好安全带，现在是：Fri Jun 28 2019 18:04:36 GMT+0800 (中国标准时间)
有几个问题想请教一下：
1/github代码中的css文件并没有你主题所使用的css文件https://www.xcnte.com/usr/plugins/CodePrettify/static/styles/WhiteMac.css
2/我所使用的主题是https://www.offodd.com/17.html 并没有pajx回调函数
3/我将WhiteMac.css文件上传到我博客相关目录下，所展示的样式和博主的也不同，初步估计是不兼容
1 我主题使用的css文件是最新版本的插件，具体请看文章开头
2 没有PJAX回调就可以忽略
3 根据问题1
sorry，github地址我看错了 用的还是旧版的
我是从github上下载的插件 github不是最新的版本么？
因为有些人喜欢旧版插件的窗口化功能，所有旧版的没有删除
请使用新版插件
插件自带的提示效果是按钮点击后文字变化，如果想和本博客一样，请参照本文中最后一段文字
我这边和博主用的是一样的主题js我在后台开发者添加进去的，我也在header.php引入了layer
清一下缓存，然后重新刷新页面看看
应该不是缓存的问题，清理过了，复制也是不提示的。
那麻烦你给出网址，我去看看
我看了下，你是在head标签中引用了该文件
一般引入外部css文件放在head中，引入外部js脚本放在body中
建议你把引用代码放到标签后面
不客气
博主我和你是相同模板,窗口化和复制提示好像都没有效果。用的最新版主题和插件
使用最新版本插件，文章开头给出链接了
我是Copy后的提示效果无效。可以用旧版本的方法设置的吧？
不可以
每次进入文章后不能正确显示代码框，需要手动刷新网页才会显示。怎么破？
请使用最新版本，文章头部有给出地址，请仔细看文章内容
注意一下PJAX函数的添加
啊 用错回调函数了。Code Prettify的插件用了Highlingt的函数.谢谢拉
en 不客气
博主我和你是相同模板，进入文章后只有刷新页面才能正常显示。是完全按照wiki操作，替换了handsome.min.css 并且加了pjax回调函数。Chrome Safari都是这个情况。源码是gitee下载的
老大，我在设置里关掉了左边的行号显示，但是实际文章里还是显示着行号的
请使用最新版本
Code Prettify和ColorHighlight那个是最新的
Code Prettify是最新的，注意文章开头
代码块硕大too
http://www.zxu.me/index.php/archives/9/
请使用插件最新版，旧版问题有点多哦，看文章开头有给出最新版插件地址
已更新~|´・ω・)ノ
有点忙，而且还在考虑要不要加入窗口化
还有就是建议作者大大在下个版本能够加入
最大化代码块之后点击其余空白区域也能关闭这个放大的弹出layer!
看了下貌似是服务器延迟的问题 抱歉!
目前本博客用的就是下版本，但有点事没有发布出来
下个版本可能会取消窗口化
我用的也是Handsome，但是主题设置里的自定义javascrit和header.php文件中引入layer资源文件 回调什么的都弄了还是不能复制
方便给一下博客地址吗？
可能要明后天才能更新了，因为有点事，不好意思了，大家见谅！！！
升级后主题自带代码不会换行了....
感觉升级以后,配置这个插件就更简单了φ(￣∇￣o)
已更新~|´・ω・)ノ
最晚明天
Handsome更新2天多了，希望大佬能抽空更新下
已更新~|´・ω・)ノ
请问下那个自定义javascrit增加提示代码为什么不起作用呢？
后台主题设置加入到自定义javascript不行吗？
是的
不好意思，少写了一个步骤，文章中已更新，请刷新查看
已经解决了哈，谢谢了！
嗯嗯，好的，谢谢！
不客气，是我自己的疏忽了
嗯呢
这个版本问题还是太多了，考虑先用着等下一个版本
代码块真的硕大无比...
不知道问题出在哪里了
恳请博主帮忙看一下，谢谢
https://raspii.tech/archives/18-05-23.html
网址打不开
能打开的啊...
电信正常，移动正常
你检查一下插件设置里，行号显示开了吗
行号关了就正常了...
是bug还是我这边不太兼容？
应该是和主题不兼容导致的，下个版本不会出现这种问题了
谢谢，博主辛苦了
这样的插件真的很赞，看得出博主的心血
不客气，小事
为啥没有滚动条。。。
方便给一下网址me
最新版的插件， PAJX添加了，自定义JavaScript也添加了。 不能使用复制。https://www.isdxh.com
已经知道了，最新版本已经修复了，我博客已经用上，晚点会更新
后台没有这个插件显示
注意一下文件夹的名字
改了的，还是没有
不会吧？你是typecho博客程序？
我就是下载插件，放在博客插件文件夹里，改文件名字，去博客后台看，没有这个插件显示
仔细检查一下，或者重新下载一下插件，放到插件文件夹
对啊
博主，https://www.14bk.cn/3.html，为啥复制不弹出提示？
在自定义javascrit也弄了
请问你是在哪下载的插件？尽量去github上或者码云下载，因为是最新的
博主，https://www.isdxh.com/58.html ，需要一次刷新才能载入。而且复制等功能无法使用。
添加一下PJAX回调函数
我的主题中没有PJAX回调函数添加的地方。应该添加在哪个模板页面？
把PJAX关闭后， 复制也不好用哎、
你是默认主题是么？现在的版本问题有点多 或者考虑一下等下个版本吧
在哪里设置“用法”步骤？
具体的步骤，在使用方法里有一个点击开合即看
PJAX是在主题设置里配置
@Xcnte
Handsome复制失效
PJAX函数添加了吗
非常谢谢你！
加了,还是有点问题
如果完全按照文章里走，是不会有问题了，我刚才看了下你貌似没替换handsome.min.css文件，或者等下一个版本吧，快更新了
请下载文章里的handsome.min.css文件，然后替换一下
尝试了,但是还是有问题
控制台报错 不知道什么回事→_→
这些问题都不用管了，下个版本全部修复
下一版貌似会增加
应该会在handsome主题5.1发布后更新，因为高亮行号是主题的，下个版本貌似会大改，所以。。
对头，等5.1，也在等你~٩(ˊᗜˋ*)و
博主，你好，我复制是能复制的，但chrome后台报错说 layer 找不到
Uncaught ReferenceError: layer is not defined
以及更新求艾特
如果不影响使用可以先用着，下个版本这些问题都会修复
那就更新求艾特了
已更新~|´・ω・)ノ
代码字体较细了，建议修改font-weight为800，会美观很多
你说的是目前文章显示的效果吗？
大概是这样https://www.zrahh.com/usr/uploads/2019/03/2789192166.png
好的 会修改一下|´・ω・)ノ
现显示正常了，窗口化啥时候恢复呀⌇●﹏●⌇
窗口化还在想应该实现什么样的效果
→_→坐等更新，更新了艾特一下 蟹蟹
白色看起来舒服点~个人感觉(ฅ´ω`ฅ)
好的OωO
报告，再次发现bug; 移动端看有问题
现在看看还会吗
报告，您的代码块貌似不能窗口化了，点了没反应(/ω＼)
在改
代码框很大，我也不知道什么原因。233，麻烦大佬看一下
我这边看了下， 是你把lines.css给修改了，麻烦你访问一下项目地址，重新替换lines.css文件
秒评论哇
Server酱 是个好东西
还是会诶OωO，应该是主题css什么东西冲突了吗？emm￣﹃￣
把lines.css文件中的min-height属性删除
貌似还是不行要回学校了先用引用标签代替一阵子，回来再来改改
好吧
代码窗口最大显示的行数有点少，这个能不能调整，求告知.png)
在customemin.css 文件里调整
另外，鼠标划过代码块会显示 高亮的语言名称 像PHP那样，这个怎么做的？
一个简单的hover，现在文章显示的是最新版，明后天会加上
控制台报错：
Uncaught ReferenceError: ClipboardJS is not defined
at guess.js:11
点击无法代码全屏
麻烦能帮忙解决一下吗
进你的网站看了下，可以实现代码全屏
大佬，我这出现了和他一样的问题，怎么解决的？
看看pjax函数有没有添加，我现在进你博客看了一下 已经没问题了
嗷，pjax添加了，貌似是代码太长的话下拉拉不到最底部，要标题打开窗口才行
下个版本会全部修复这些问题
已经解决了，谢谢!
希望后期能够更新添加点击除代码框以外退出全屏。
好的，已经在改了|´・ω・)ノ
看代码舒服多了
就是用起来有点麻烦了
我换主题后又变了，是不是要把上次的css替换？
你现在的主题，按文章的流程走就好了
这样式真好看，谢谢分享
感谢分享如果窗口化时，窗口上显示关闭图标就方便了，刚开始还不知道怎么关闭窗口化哈哈哈
哈哈，没考虑到这个，过几天会重新改改
支持一下，感谢分享
代码块的滚动貌似有问题，不放大的情况下往下拉，最后一行不会显示
已修复，请重新下载customemin.css，并覆盖上传
我这存在问题，是mac之外的超过20行就不显示多余的代码，默认的风格可以显示多余20行代码，不过上面的红绿灯与第一行重叠。
我这边帮你修改好了，你方便的话提供一下邮箱，我发给你
已发送
检查一下你主题下的style_page-post.css文件，存在样式冲突
谢谢你，你给的我替换了，不过只显示20行了。
替换不行，覆盖了就好了。谢谢！
好的，那应该是我不小心多删除了
确实有用，支持了！
谢谢博主的这个插件。
添加了你的代码也没用。。。
控制台报错：
Uncaught ReferenceError: ClipboardJS is not defined
at guess.js:11
我这边看了下，没什么问题，但没有提示效果
qwq
复制不了啊
可以复制的，只是没有提示效果，你们可能没加入文章中我说的那行代码
我刚刚更新了一下js文件，你重新替换一下吧
嗯，好的
来学习学习
我也来看看
我来打卡
试了一下，放大后应该缩小必须点按钮过于麻烦，建议点击边缘外的元素触发操作，用户体验会更好。
多谢提议，会改善下
很喜欢这个风格，拿走了
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Thu Feb 21 2019 19:44:41 GMT+0800 (中国标准时间)
来给大佬洒洒水,拿走了好多好玩的东西..!!!
我这里居然还有好玩的！！！
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Thu Feb 21 2019 19:00:36 GMT+0800 (CST)
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Thu Feb 21 2019 18:44:21 GMT+0800 (CST)
你好，我已经安装教程安装，但是初次打开页面，不显示代码高亮的颜色，必须刷新下代码高亮的效果才会出来。能帮我解决下吗？地址：blog.bbskali.cn
已联系你QQ，同意下
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Thu Feb 21 2019 15:22:46 GMT+0800 (中国标准时间)
千辛万苦终于找到|´・ω・)ノ
୧(๑•̀⌄•́๑)૭
超级喜欢mac风格的代码块，感谢博主(☆ω☆)
很不错！坐等Handsome5.1更新，然后就用你这版了！
ColorHighlight插件算是正式发布了吧，希望大家喜欢
你好，代码风格更新了没！
还在更新一些东西，明天会发出来了.png)
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Mon Feb 18 2019 19:37:24 GMT+0800 (中国标准时间)
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Mon Feb 18 2019 19:01:13 GMT+0800 (CST)
棒！我能转到我的博客里吗？
今天或者明天会更新一下，可以晚点再转载
没问题，最好是保留一下原文链接哈
好
mark
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Mon Feb 18 2019 12:17:52 GMT+0800 (中国标准时间)
看看 不错的样子
可以的 ！ 感谢分享
找了好久，终于找到了！感谢分享！
滴！访客卡！请上车的乘客系好安全带~φ(￣∇￣o)，现在是：Thu Feb 14 2019 20:41:22 GMT+0800 (CST)
过几天会更新一下，会加上代码复制
好的，感谢分享！已收藏！
学习一下
来学习一下OωO
不错
需要往下拉，只能显示到25行么？这个窗口最大显示长度可调不？
可以调整，至于往下拉你鼠标移动到代码块里滑动鼠标滚轮就够了，也不算麻烦୧(๑•̀⌄•́๑)૭
相当舒服~
( ๑´•ω•) "(ㆆᴗㆆ)