起始
最初基于 Highlight 插件,写一款名为 ColorHighlight
插件
但因为插件本身存在不少BUG,自己又不想重写,便重新基于 CodeHighlighter
写了一款
在原有的代码高亮样式上新增了Mac风格代码,修改了JS代码
下载
插件最新动态:已更新至handsome主题8.2
使用
第 1 步:下载本插件,解压,放到 usr/plugins/
目录中;
第 2 步:文件夹名改为 CodePrettify
;
第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)
第 4 步:设置:选择主题风格,是否显示行号等。
第 5 步:最新版本handsome主题内置的高亮与该插件冲突,请进入后台 -> 设置外观 -> 主题增强功能里关闭主题内置高亮
第 6 步:外观设置 -> 开发者选项 -> 自定义CSS
添加以下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主题
为例:
主题
-->设置外观
-->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
进行标记声明
版权属于:Xcnte' s Blog(除特别注明外)
本文链接:https://xcnte.com/archives/523/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!
1274 comments
求助,Handsome开了前台前台引入vditor.js接管前台解析,本 插件就不能正常显示了,希望能完善下
目前7.2版本还是存在bug,看看作者近几周会完善不
还是出现代码被行号遮挡的问题,恳请大佬解决一下
http://www.tr0jan.top/index.php/archives/23/
已正常
我这也出现了代码被行号遮挡的问题,怎么解决这一问题啊
https://www.iwayen.cn/datastruct/28.html
一直都是这样
您好作者,handsome更新到7.2.1后,您的GrayMac样式表配色都被主题内置代码高亮所覆盖
后台 --> 设置外观 --> 主题增强功能里关闭主题内置高亮
等更新吧
感谢博主的插件!但是插件使用后有个小问题,启用了PJAX回调之后,PJAX加载页面时prism.js会被重复加载,而且是有多少个代码高亮块就重复加载*2遍:比如有3个高亮块就会加载6次prism.js,直接刷新页面不会有该问题。虽然对外观和正常阅读没有影响,但是重复加载会造成多余的网络操作或是流量。恳请解决方案
我看看
检查你的解析方式
我不太明白,可以讲得通俗点吗?
你的前台解析用的是什么
我是个刚刚学的小白还是听不懂哪里解析,我的文章是直接用Typecho中的撰写文章写的,插件完整上传,css文件已替换,Pjax回调函数按照教程来,Handsome外观设置代码高亮选自定义,其他设置没改动。
你自己检查下Handsome插件里 前台解析设置的是什么
为啥更新之后行号就被挡道了 怎么改啊
替换新版css文件
大佬 7.0-7.1的css文件好像不能下载了
得嘞谢谢博主
可以了
好的
代码被行号挡住了,咋搞,地址:https://lingn.top/5
已正常
阅读模式,代码行会向前一行,
666
你好 设置后文章代码出现双行号是什么问题
http://koi.ll8s.com/index.php/archives/106/
替换handsome.min.css 记得清缓存
替换了css 也清缓存了 还是双行显示
cdn?
还真是CDn问题 静态资源上传Cdn 设置了 就显示双行.png)
在设置的情况下 能解决么?
清规则
可否出个清规则的 教程
方便提供md编辑器嘛,还有就是静态资源
前台引入vditor.js接管前台解析之后无法兼容此插件,望早日修复
我知道 等7.2版本再更新了 问过作者 很快就出了
之前backmac的那个风格挺好看的,现在backmac的风格不太好看了.png)
都一样吧,我记得我只修改了代码的高亮配色
对对对,就是那个配色不太好看,7.2的时候能出一个自定义配色的教程就完美了.png)
好的ヾ(≧∇≦*)ゝ
谢谢.png)
没事
我的不显示这个效果啊
看了下 已经正常
我把PJAX这个功能关闭了,才显示 开启 不怎么显示 得刷新才有
关闭PJAX后 不需要添加对应函数了
我这里出现代码遮挡

用了WhiteMac.css,代码也白色怎么办
喜欢WhiteMac.css,代码白色的就看不见了,能把白色代码换成别的颜色吗,现在换灰色mac使用了
请给出具体的demo
您看一下这个页面的代码块 https://www.moe.mw/said/zcyqljdtx.html
你自己检查一下主题自定义css里,有一段code标签css样式代码
自定义没有这个
那你自己去页面源码文件上看看
去除了还是白色的OωO
请自行F12审查
handsom.min.css文件,7.0版本和7.1版本通用
下周更新一下插件,支持vditor
7.1.0中行号貌似会影响代码,坐等大佬修复
http://www.nimisora.com/index.php/archives/57/
替换handsom.min.css文件,7.0和7.1通用
感谢!
坐等更新7.1.0
以后会兼容 vditor.js 解析吗?因为不使用 vditor.js 解析 朗读文章会不生效 7.0 主题就体验不到这个功能了
可能会吧
题外话:博主使用的是什么邮件通知插件?你可以收到访客主动给你文章评论的邮件的?
LoveKKComment 我貌似写过文章
handsome主题7.0版本新增了vditor.js接管前台解析,该插件暂时不支持
若要使用该插件,请选择使用typecho自带的markdown解析器
请问如何解决:
如果采用替换handsome.min.css文件的方式,如果不加语言类型,前面的行号显示空白的问题
如果采用增加handsome.min.css代码的方式,如果不加语言类型,前面显示双行号的问题?
演示页面:https://blog.shuaiguoer.com/re.html
不加语言类型 默认采用主题的代码高亮
对的。
但是替换handsome.min.css文件后,不加语言类型的话,前面的行号消失了
貌似这版本主题使用vditor.js接管前台解析才自带行号
多谢呀,很有可能是我用了EditorMD,导致前面才自带行号的
现在好像不能和7.0的vditor共存,同时打开会不兼容
是的