基于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://www.xcnte.com/archives/523/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!
joe模板怎么搞
大佬,行号遮挡怎么办
大佬,求适配8.0.0
好像是测试版,等正式版出来就更新
好的,顺便改一下插件
按魔改CSS的方法之后就变成这个样子了
https://blog.tigerroot.cn/archives/59/
我上面不是说了?8.0现在是测试版本,没更新
https://blog.say521.cn/archives/477.html
老哥,我的站不开启行号的情况下就有行号并且遮住,刷新一次就没了,开启行号的情况下也会遮住,但刷新后没反应,handsome.min.css文件也替换了,pjax也设置了
等8.0版本,插件重新改一下
启用插件的时候Server Error是为啥
检查一下插件的名字与插件文件的名字
嗯,谢谢,是名称没改对
http://www.lovercool.cn/index.php/archives/1/
我的开启显示行数遮挡代码
已正常
https://www.jizhi6.cn/1.html
帮忙看看咋回事被
关闭主题自带的高亮
新版的咋关
你好。今天刚刚升级主题,这个插件行号有错位,能不能麻烦你帮忙一下
自己替换handsome.min.css
已经替换了handsome.min.css,而且我在评论中发现有好几个朋友都是这样
你发一下演示地址
https://lapuhou.com/wlbj/155.html
打不开
不行
大佬不妨直接设置一个是否启动Pjax的选项,这样子的话就免去了加入Pjax的麻烦,也免去了一大堆人无效的问题
https://github.com/Xcnte/Code-Prettify-for-typecho/pull/7
我pull request了
嗯,打算下版本加上的
没有jsp的怎么办|´・ω・)ノ
下版本更新上
好的感谢作者
支持上alioss吗
老板 需要刷新一次才能显示完整 不刷新就没有mac效果 请问下这怎么回事?
pjax设置了吗
设置了 我之前装了其它插件 可能因为有冲突 重装博客只装了代码高亮就正常了
好的
博主,发现个bug,应该是bug吧,我小白
在使用你提供的css会导致首页显示的文章类表,文章的标题会自动居中,不知道怎么改成靠左或跟主题样式一起走呢?
应该是我多改了css样式
博主,下次修复下啦,感谢!
博主你好,按照方法已经替换了css 换成黑色风格为什么还是白色的一块??
演示
使用handsome主题,在handsome插件里,不要使用vditor编辑器
请使用typecho自带的markdown编辑器,暂时没做vditor支持
vditor会在下次handosme主题更新时添加上
博主,你好。我之前使用这个插件是没有问题的,今天打开博客发现样式貌似出问题了,显示的样式和之前完全不一样,希望有时间可以帮我看一下,谢谢。
你的高亮是tomorrow-night
你好,我是在使用BlackMac后无法正常使用,就换成了tomorrow-night,现在已经切换回了 BlackMac,和之前的已经完全不一样了。之前tomorrow-night注意是彩色的和vscode的风格很类似,现在变成了这种白色的了,代码看着都不是很清楚。
handsome插件,不要使用vditor编辑器
暂时没做vditor支持
问题已经解决了,多谢大佬
博主,看一下代码行号错位是什么原因
网址:https://blog.iyehua.top/39.html
打不开
已经恢复正常,麻烦看一下
handsome.min.css的问题,有其它的魔改样式
但是我只替换了大佬你提供的css啊 不过我自己去把插件一个个关掉试试
http://www.kkcloud.club/index.php/archives/8/
大佬看看怎么回事
css 有个padding:15px 导致对不上,应该怎么改
修改一下数值
这个15px是渲染上去的,源码没有,不知道改哪里…
写进style属性好了
作者你好,我在edge里面显示似乎是有显示问题的,在Chrome以及手机的浏览器没问题
这是预览图http://r6d.cn/Y2Pv
演示地址:http://www.789dl.cn/70-1.html
可能是不同游览器内核导致的
为什么我按照步骤来却失败了?显示的还是原来的
https://www.fivk.cn/
OωO文章写得不错,支持一下!
你貌似开了默认高亮
按照你的教程我在增强功能关闭了高亮呀
这边看到有开其它代码高亮,导致插件的未生效,请检查几次
我代碼變得有點不一樣了
好的
好多谢谢OωO