起始
最初基于 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
大佬我的这个直接点进去没有加载按了F5后才有显示,这个怎么解决吖https://itmuzi.cc/414.html
pjax
可
博主我插件启动显示Server Error,怎么解决
重新启用插件看看
作者是不是没有添加c++语言高亮支持
注:C#代码与 C++代码使用 csharp 与 cpp进行标记声明
博主能帮我看一下这个白色怎么回事吗⌇●﹏●⌇,https://www.buleng.xyz/archives/161/
请按照文档操作
是的博主,我已经按照 上面的步骤,关闭了主题内置高亮和添加了Css样式,但是还是不知道什么原因,麻烦博主大大指点一下
缓存
我关闭插件里面的显示行号,它就会是白色的,我刚刚开启了显示行号,它就变成黑色的了,但是会有一道白色的线在行号旁边
你不是最新8.0主题吧,修改handsome.min.css 删除 #post-content pre:before
嗯嗯,还没买,谢谢博主啦
博主大大,请问行号挡住代码和原来的代码显示框怎么解决https://xianyu.cat/159.html
我这边看了下 行号没有显示,但是高亮顶部重叠了
删除一下多余的css吧
已解决,谢谢
手机端显示不正常,怎么适配。
http://i.tengzhou.ren/12.html
修改/themes/next/css/main.css这个样式文件,删除1220行到1228行
谢谢,已经解决
你好,想问一下我这个是什么问题,感谢
http://zhlblog.cn/default/8.html
第一行有太靠上了
你这用的还是以前的我写的旧插件,不看文章开头吗?
下载新的Code Prettify呀
作者大大,我看你文章放的github里面更新是10月前,那是最新代码么
是的
您好,我想请教一下我按照你的教程来为啥没效果呢|´・ω・)ノ
http://www.zhlblog.cn/default/8.html
你这用的还是默认
大佬,目前的版本兼容handsome8.2吗
文章已更新8.2
OωO请教下大佬,长行自动换行怎么开启,或者说修改什么文件.
滴!访客卡!请上车的乘客系好安全带,现在是:Thu Jun 03 2021 21:28:37 GMT+0800 (中国标准时间)
css
被行号挡住代码的可以试试把handsome.min.css文件还原先,然后在注意外观设置-开发者选项-自定义CSS里面加入博主发的修改的CSS,原来的不用删也可以,反正我的可以了,handsome 8.2
文章写得不错,支持一下!
大佬我装了最新的8.2版本,关闭了自带的代码高亮,但是行号与内容是错位的。
地址:http://list.wangjm.ml/index.php/archives/14/
到公司电脑上就可以了,可能是自己的电脑缓存有问题。
不过音乐播放机器又异常了
试了一下 好像有问题 不知道哪里错了 pjax也弄了 css也改了求大佬指教一下 网站http://yucls.com/index.php/default/55.html
主题自带高亮没关
谢谢!但是前面的行号挡住了一部分不知道怎么弄
应该css哪冲突了,你改一下css好了
加个margin-left
可以了,谢谢老哥,重新设置css就行了!
博主还是行号的问题
能做的都做了实在不知道还能如何处理
http://mywifeasuna.top/index.php/archives/81/
已正常
哇偶,谢谢!
试了,很不错。谢谢。
使用无效果
提交一个bug哈~~~
效果出不来的还有另外一个地方需要注意:
Handsome主题设置的位置,【编辑器设置】-【前台Markdown解析方式选择】需要选择
【使用typecho自带的markdown解析器】 。不能选择【前台引入vditor.js接管前台解析】。否则无效果,亲测!!找了很久发现的。。。。
感谢,一直按照博主的文章来做,不知道问题出在哪 ̄﹃ ̄建议博主把这个bug放到文章里ヾ(≧∇≦*)ゝ
我记得我文章中有提出来。
不错哦,安装使用中。就是有些风格在我的博客里显示的颜色和你的不一样.png)
博主大大行号遮挡如何操作?https://snaping.cn
主题切换也没用哦