起始
最初基于 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
全文几本无自动换行,本人应付中考,暂无时间去折腾,希望作者能首推。
你好,https://www.zxu.me/usr/themes/handsome/assets/css/handsome.css?v=1.3.2这个CSS文件与插件样式冲突,建议您删除文件中滑动条样式,也可以留下您联系方式,我这边发给你
呃呃呃呃,实在抱歉,打字过于匆忙,原意为:"全网基本无代码高亮自动换行"
换行,过长的代码适应页面另起一行,而不是滑动条。滑动条不够直接。
那除非你在文章的代码块里手动换行,插件默认的显示效果就是滑动条
φ( ̄∇ ̄o)我的意思是建议你研究下...算了...╮(╯▽╰)╭
明白你的意思,但是换行你想一下 如果一句代码中途被强制截断换行,视觉上不觉得奇怪吗?
朋友,弄篇测试文章
能否给个测试地址?
滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Mon Apr 22 2019 09:39:24 GMT+0800 (中国标准时间)
激活404
已正常
注意文件夹的命名,别带空格
我安装了插件,也开启了。直接下载对应版本的handsome.min.css替换。主题也设置了PJAX回调函数。清空了对应CDN,效果出不来呢。具体出来效果在我博客测试文章,有时间帮忙看看谢谢
还有,您的handsome.min.css文件没有替换成功,请重新替换一次
我更新了5.1.1插件的效果出来了。但是在首页点进文章页内容出不来。必须要刷新一遍内容才能出来。这个是什么回事呢
能仔细看文章嘛?Pjax这一块
原本Pjax是开启的,也添加了Pjax函数就会出现问题。现在关掉Pjax功能开关,文章内容才正常,但是整个网页都刷新了。好无奈∠( ᐛ 」∠)_
我也是~~关了pjax就正常了,不然要刷新一次~
检查一下pjax是否正确
哈哈,很奇怪。关了再打开就正常了~~
不会,开启了PJAX就没问题了,你开起来后自己清一下缓存看看吧
这边看了下,效果已经有了
谢谢博主,已正常~
搞定了就好|´・ω・)ノ
语言类型为空的时候输出默认风格啊,能不能改成当语言类型为某个特定的值时才输出为默认风格。
感觉挺多人都习惯不输入语言类别的。不说了,我去一个一个改类别了
你可以自己去改,不习惯输入语言类别的说真的,你是我见过第一个
如果喜欢默认风格,建议别用插件
我不是这个意思,并不是喜欢使用默认风格,我指的是在`后面必须加上语言类别如shell、php之类的,插件才会输出MAC风格的代码框。
我文章的都是没写语言类别的,装了插件之后由于没写语言类别全变成默认风格了。好在文章不多,后来一个一个去改好、添加了语言类别。接着我去看了几个使用了这款插件的用户,发现其中也有一些人不习惯写语言类别而变成了默认风格。当然可能大部分人都是写了的。
我的建议是能否在不输入语言类别时依旧输出MAC风格。在语言风格为none(这个随意)时输出默认风格。
当然,我只是把我的想法给写了上来,您也没有义务因为我一个人修改插件代码。
我也遇到了和你一样的问题
不好意思,因为最近很忙,没怎么认真看评论,感谢您的建议.png)
最初的时候我就是按照你现在的想法去改的,但是后来觉得可能有一部分人希望某些代码块不显示MAC风格,比如说一些简单的一句话代码之类,下个版本会考虑加入自定义开关吧
希望优化一点问题,就是当鼠标在code块里滑动(这个时候code块获得了焦点)的时候再把鼠标移出外界文章不能滑动(此时焦点还在code块里)希望能够优化这一问题,优化下用户体验!
最后资瓷一波大佬!!!!!!!!
滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Fri Apr 12 2019 22:33:40 GMT+0800 (中国标准时间)
这个问题已经解决了,你可以看看我https://www.xcnte.com/archives/297/,当鼠标移动到代码块中获得焦点,移到外界文章焦点就转到代码块外了
大佬可以尝试一下点击code块后,在将鼠标移出
可以在鼠标移出code块的时候初始化焦点,来改善下用户体验!
点击后,若鼠标移出code块,焦点已不在代码块里了,你可以换个游览器看看
好吧有个滚动缓动导致了有点延迟,尴尬
嗯!好的,感谢你的建议.png)
5.1.1好像不能用哎~~
已经更新了,Handsome5.1.1一样可用
请你仔细检查一下,包括文章里代码块的书写样式
别人使用都没任何问题的
知道了,原来是没设置语言类型 - -
另外我想请问下,支持的语言类型 在什么地方可以查看?
地址:https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
这里可以查看支持的语言类型
还有个问题...本文写的要将插件文件夹名改为"Code Prettify",应该是"CodePrettify"吧,不应该有空格
是的,这里我没有注意,稍后会修改一下
感谢大佬。。。发现小问题,在小屏幕界面代码开头会被当着,改了下css就正常了
感谢提醒,已修复.png)
还要替换handsome.min.css文件呀....我的各种魔改岂不是无法保留了..
其实替换高亮部分的css内容就够了,我等下发出来吧
谢谢,麻烦你了
已添加~|´・ω・)ノ
装了这个插件之后没法禁用/启用任何插件...
突然又好了...尴尬
是大佬 关注了
滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Thu Apr 11 2019 13:45:52 GMT+0800 (中国标准时间)
来了
滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Wed Apr 10 2019 23:22:49 GMT+0800 (中国标准时间)
如果插件符合你的心意,不妨留言支持一下?
已撸
滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Wed Apr 10 2019 20:46:20 GMT+0800 (中国标准时间)