基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,共提供11种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能
起始
最初基于 Highlight 插件,开发一款名为 ColorHighlight
插件
但因为插件本身存在不少BUG,自己又不想重写结构,于是便重新基于 CodeHighlighter
开发了一款
在原有的代码高亮样式上新增了Mac风格代码,修改了部分代码
下载
插件最新更新时间:2020/08/20
(新增Objective-c语言高亮
handsome.min.css更新时间:2020/08/30
(更新至handsome主题7.31
激活
第 1 步:下载本插件,解压,放到 usr/plugins/
目录中;
第 2 步:文件夹名改为 CodePrettify
;
第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)
第 4 步:设置:选择主题风格,是否显示行号等。
第 5 步:修改(替换)/usr/themes/handsome/assets/css/
下的handsome.min.css文件
由于handsome主题最新加入授权,旧版本必须更新至最新版,所以这里就不提供旧版 css
文件,从5.3.1版本开始
Handsome 7.3.1 版本(7.x版本通用:
提取码:1122
Handsome 6.0.0 版本:
提取码:1122
Handsome 5.3.1 版本:
提取码:a0d8
如果事先有对handsome.min.css
进行魔改的话,可以按照以下手动修改
删除handsome.min.css
里的
pre {
padding:0
}
pre code {
display:block;
overflow-x:auto;
position:relative;
margin:0;
padding:15px
}
后添加以下css
代码即可
#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
}
用法
\```php(语言类型必填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
若不填写语言类型,则无效果
Pjax
如果你的网站有开启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);}
重要说明
可设置项
1. 选择高亮主题风格 (官方提供的 6 种风格切换,本人自己新增了三种(Mac风格))
- coy.css
- dark.css
- BlackMac.css(黑色Mac风格)
- GrayMac.css (默认选中:Mac风格(灰色))
- WhiteMac.css(白色Mac风格)
- twilight.css
- tomorrow-night.css
2. 是否在代码左侧显示行号 (默认开启)
后记
很多人反馈插件在其它主题上没有效果或是样式不正常
由于有些主题是自带代码高亮
所以无法对每个主题都完美兼容
精力有限,只能尽量做好handsome
主题完美兼容
若真的很喜欢这款插件可以在本文留言,博主有时间会帮忙解决
有任何意见也欢迎留言
注:C#
代码与 C++
代码使用 csharp
与 cpp
进行标记声明
由于最新版本handsome主题内置的高亮与该插件冲突,请进入后台 --> 设置外观 --> 主题增强功能里关闭主题内置高亮
版权属于:Xcnte' s Blog(除特别注明外)
本文链接:https://xcnte.com/archives/523/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!
行号错位,试试很慢情况呢,麻烦博主了!
https://www.abu3d.com/377.html
第四个下拉按钮!
已正常
这样如果代码很长 那不是很难看么
有办法解决吗,大佬
我下版本做个开关
Handsome.min.css文件替换一下
如果你主题是最新的,替换文章里给出最新版即可,也就是7.0版本
我这边看到你替换貌似是旧版,有套cdn的话替换后也要清一下缓存
PJAX?
直接点开文章链接是没问题的,从首页点进去文章就不显示,要刷新后才显示
应该不是因为这个,这个之前就设置好了 没动过
我这边看到没有pjax函数
已经填到pjax回调函数里面了阿 奇怪
建议重新检查下
博主,我的代码高亮会自动有行数,刷新一下就又没了
https://blog.say521.cn/archives/193.html
PJAX?
老哥帮忙看一下,我这个只要文章中添加了图片,第一次进入页面都会加载高亮失败,然后刷新就好了。没有图片就没事
https://www.sicx.top
pjax没加入
已加,好像还有问题
为何我直接替换handsome.min.css 就发生bug 不替换,无法显示语言类型OωO
老哥,小白一枚,还是没搞清楚用法那里是个啥意思,方便讲详细点嘛?蟹蟹|´・ω・)ノ
是哪里不清楚
发现一个BUG,不止我一个. 绿色高亮引用乱码
缓存清了吗
大佬你可以看一下,https://blog.iyehua.top/1.html
我也没有开缓存,不过我还是去清了,没有用.. 我参考评论里的王洪峰大佬的评论把哪个as改成221a替换后依旧是显示as
我这边看了下,正常显示
刚才已经改了css文件,修复了一下这个乱码问题
网页版适配正常,手机端行号把代码盖住了,是什么情况?问题页:https://www.yanjiayu.cn/python/pythonjavamapper.html
貌似是缓存问题,清了一下好了
突然发现,typecho圈子里只有两者主题:这个 和 其他。
这个太出名了
用上了,真香
博主 你好 ,我用了插件 设置行号就会盖住部分代码这是为什么,能看下吗
blogyin.top
好像没问题
插件很好用。不知道能不能添加一个设置,可以选择或填写js和styles的CDN加速地址,比如使用cdnjs或jsdelivr。
说清楚些
你的博客没开评论区使用html标签,你加上img标签就能看到我发的图了。
看到了,应该是格式化的问题
你好,插件启用了,并且也按照步骤操作,为什么不显示呢
https://coldxuan.com/archives/21/
已正常
您好 这个代码框的背景色是什么问题
http://182.92.204.157/index.php/archives/119/
css
http://182.92.204.157/index.php/archives/120/
还有一个问题 不选代码种类 不显示代码复制按钮 就像这篇博客里面的代码
这个问题是插件默认设定的
开启行号会挡住代码唉,能帮忙看下吗,非handsome主题
http://www.doachieveit.cn/index.php/archives/92.html
css的问题 自己改一下吧 我后续有空会完善一下其它主题上的兼容
老哥帮忙看一下,我这个只要文章中添加了图片,第一次进入页面都会加载高亮失败,然后刷新就好了。没有图片就没事
https://www.yyxzz.xyz/index.php/2020/08/25/47.html
404
老哥我这个handsome文件和插件替换了,高亮取消了,缓存也清除了,但是行号还是显示不正确,麻烦看一下吧
http://koikakeru.com/index.php/archives/72/
函数在那里也已经修改了
可以了好像,是因为CDN。。。
好的