起始
最初基于 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 国际许可协议 进行许可,请在转载时注明出处及本声明!
1275 comments
博主大大行号遮挡如何操作?https://snaping.cn
主题切换也没用哦
博主行号遮挡如何操作https://blog.ccnode.cn/index.php/archives/5/
没看到有开启行号
我之前开启了就错位了,pjax css啥的我都替换增加了还是不行
博主,行号遮挡了代码,麻烦看一眼 前面装了一次好的现在装了一次不行
https://blog.uundo.cn/index.php/archives/3/
已好 更换了CSS
我按照步骤配置了,替换了handsome.min.css ,依旧无效果,大佬能否帮忙看看?https://moe.ma/292.html
有效果了不显示行号
Pjax替换对了吗
这个插件还是为handsome主题量身定制的,其他主题或者Typecho原生主题根本不能直接使用,不嫌麻烦还是直接使用Prism.JS这类的JS插件
是的,也无力去对多款主题进行兼容
博主,行号遮挡了代码,麻烦看一眼
https://www.tr0jan.top/archives/72/
已正常
做了的
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);}
你是用什么编辑器
会不会是因为文章体积太大了,我单独对这片文章进行 Prism.highlightAll(true,null); 会卡死,但是效果会出来。但是为什么刷新又会不卡的渲染出来呢
用的typaro写的,然后复制过来的
你看看你handsome插件里 编辑器使用的是什么
请问您分析出了出了问题在哪吗
您好,我也不知道叫啥,我的版本是6.0
你看看你都开了什么插件
我把插件都删除了也没用
请作者查看我的这篇文章,第一次查看代码高亮是 没有生效的,刷新以后是可以高亮的http://blog.yqlzmzr.cn/index.php/archives/50/ 您可以查看别的文章,别的文章并没有出现这个问题,请问是因为这个文章篇幅太长的原因吗
现在发现直接通过链接访问好像是没有问题的,但是从首页&分类进去的话第一次是有问题的
Pjax做了吗
再来支持一波大佬,顺便催一波8.0更新
8.0现在是测试版本,稳定出来就更新
kotlin不支持?
下版本加上
大佬,求适配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设置了吗
设置了 我之前装了其它插件 可能因为有冲突 重装博客只装了代码高亮就正常了
好的