基于 Highlight的代码语法高亮插件 for Typecho,可显示语言类型、行号,有复制代码到剪切板等功能。本人博客使用的是Handsome主题,如若你在其他主题中使用该插件发现任何问题,可与我联系。
插件最新版本
旧版下载地址:
Github:https://github.com/Xcnte/ColorHighlight-for-typecho
码云:https://gitee.com/xcnte/ColorHighlight-for-typecho
起始
本插件是基于 Highlight 插件,改自泽泽https://qqdie.com/archives/typecho-highlightjs-plugin.html
首先名字改成了ColorHighlight
将Highlight.js
的js
和css
都换成最新的了
在原有的功能上新增代码复制功能,Mac风格代码高亮,代码块窗口化
(请勿与其它同类插件同时启用,以免互相影响)
使用方法
第 1 步:下载本插件,解压,放到 usr/plugins/
目录中;
第 2 步:文件夹名改为 ColorHighlight
;
第 3 步:登录管理后台,激活插件;
第 4 步:设置:选择主题风格,是否显示行号等。
第 5 步:主题
-->外观设置
-->代码高亮的风格选择
-->自定义
第 6 步: 删除/usr/themes/handsome/assets/css/handsome.min.css
中所有关于pre
、code
标签的CSS
(这里直接下载handsome.min.css文件,然后替换一下即可)
用法
\```php
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
pjax
如果你的网站有开启Pjax(handsome主题
默认开启,开启的情况下必须添加,否则代码复制、窗口化失效)
请把以下代码添加到回调函数的地方,在你使用的主题设置里看看
以Handsome主题
为例:
主题
-->设置外观
-->Pjax
-->PJAX回调函数
if (typeof myFunction !== 'undefined'){
myFunction();
}
$('pre').on('click', function (e) {
if (e.target !== this ) return;
$(this).toggleClass('code-block-fullscreen');
}
);
var l = $("pre code").find("ul").length;
if(l<=0){
$("pre code").each(function(){
$(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});
}
重要说明
可设置项
1. 选择高亮主题风格 (官方提供的 92 种风格切换(下面列出几种),本人自己添加了一种(Mac风格))
- dark.css
- default.css
- github.css
- customemin.css (默认选中:Mac风格,本人看着最顺眼)
- pojoaque.css
- tomorrow-night.css
- vs2015.css
2. 是否在代码左侧显示行号 (默认开启)
3. 兼容模式(默认关闭)
在插件设置中打开兼容模式,即可支持以前没有用Markdown书写的代码高亮
如果你的blog已经全部是Markdown书写,建议你不要打开它以节省资源。
本插件支持常见的一些语言高亮。您可以打开以下链接查看详情:
https://highlightjs.org/download/
与我联系
长期更新该插件,如果有任何意见或发现任何BUG请在该篇文章下留言
提示
由于插件只对了我博客的主题做了兼容性修改
点击代码块标题栏,就可以实现窗口化,再次点击缩小
默认没有加入代码Copy
后的提示效果
如果想要和本博客一样的效果
请在模板目录的header.php文件中引入layer资源文件,代码如下
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
然后在主题设置里的自定义javascrit或主题js源文件中加入
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){});};
版权属于:Xcnte' s Blog(除特别注明外)
本文链接:https://www.xcnte.com/archives/377/
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!
219 comments
旧版已经停止更新了,本文评论关闭!
如果还有继续使用小伙伴,有问题可以到右侧留言板询问!
还有博主你的站点引入文件好几个404 看着闹心,有时间你调整一下吧
好的,感谢提醒
滴!签到卡!请上车的乘客系好安全带,现在是:Fri Jun 28 2019 18:04:36 GMT+0800 (中国标准时间)
有几个问题想请教一下:
1/github代码中的css文件并没有你主题所使用的css文件https://www.xcnte.com/usr/plugins/CodePrettify/static/styles/WhiteMac.css
2/我所使用的主题是https://www.offodd.com/17.html 并没有pajx回调函数
3/我将WhiteMac.css文件上传到我博客相关目录下,所展示的样式和博主的也不同,初步估计是不兼容
1 我主题使用的css文件是最新版本的插件,具体请看文章开头
2 没有PJAX回调就可以忽略
3 根据问题1
sorry,github地址我看错了 用的还是旧版的
我是从github上下载的插件 github不是最新的版本么?
因为有些人喜欢旧版插件的窗口化功能,所有旧版的没有删除
请使用新版插件
插件自带的提示效果是按钮点击后文字变化,如果想和本博客一样,请参照本文中最后一段文字
我这边和博主用的是一样的主题js我在后台开发者添加进去的,我也在header.php引入了layer
清一下缓存,然后重新刷新页面看看
应该不是缓存的问题,清理过了,复制也是不提示的。
那麻烦你给出网址,我去看看
我看了下,你是在head标签中引用了该文件
一般引入外部css文件放在head中,引入外部js脚本放在body中
建议你把引用代码放到标签后面
不客气
博主我和你是相同模板,窗口化和复制提示好像都没有效果。用的最新版主题和插件
使用最新版本插件,文章开头给出链接了
我是Copy后的提示效果无效。可以用旧版本的方法设置的吧?
不可以
每次进入文章后不能正确显示代码框,需要手动刷新网页才会显示。怎么破?
请使用最新版本,文章头部有给出地址,请仔细看文章内容
注意一下PJAX函数的添加
啊 用错回调函数了。Code Prettify的插件用了Highlingt的函数.谢谢拉
en 不客气
博主我和你是相同模板,进入文章后只有刷新页面才能正常显示。是完全按照wiki操作,替换了handsome.min.css 并且加了pjax回调函数。Chrome Safari都是这个情况。源码是gitee下载的
老大,我在设置里关掉了左边的行号显示,但是实际文章里还是显示着行号的
请使用最新版本
Code Prettify和ColorHighlight那个是最新的
Code Prettify是最新的,注意文章开头
代码块硕大too
http://www.zxu.me/index.php/archives/9/
请使用插件最新版,旧版问题有点多哦,看文章开头有给出最新版插件地址
已更新~|´・ω・)ノ
有点忙,而且还在考虑要不要加入窗口化
还有就是建议作者大大在下个版本能够加入
最大化代码块之后点击其余空白区域也能关闭这个放大的弹出layer!
看了下貌似是服务器延迟的问题 抱歉!
目前本博客用的就是下版本,但有点事没有发布出来
下个版本可能会取消窗口化
我用的也是Handsome,但是主题设置里的自定义javascrit和header.php文件中引入layer资源文件 回调什么的都弄了还是不能复制
方便给一下博客地址吗?
可能要明后天才能更新了,因为有点事,不好意思了,大家见谅!!!
升级后主题自带代码不会换行了....
感觉升级以后,配置这个插件就更简单了φ( ̄∇ ̄o)
已更新~|´・ω・)ノ
最晚明天
Handsome更新2天多了,希望大佬能抽空更新下

已更新~|´・ω・)ノ
请问下那个自定义javascrit增加提示代码为什么不起作用呢?
后台主题设置加入到自定义javascript不行吗?
是的
不好意思,少写了一个步骤,文章中已更新,请刷新查看
已经解决了哈,谢谢了!
嗯嗯,好的,谢谢!
不客气,是我自己的疏忽了
嗯呢
这个版本问题还是太多了,考虑先用着等下一个版本
代码块真的硕大无比...
不知道问题出在哪里了
恳请博主帮忙看一下,谢谢
https://raspii.tech/archives/18-05-23.html
网址打不开
能打开的啊...
电信正常,移动正常
你检查一下插件设置里,行号显示开了吗
行号关了就正常了...
是bug还是我这边不太兼容?
应该是和主题不兼容导致的,下个版本不会出现这种问题了
谢谢,博主辛苦了
这样的插件真的很赞,看得出博主的心血
不客气,小事
为啥没有滚动条。。。
方便给一下网址me
最新版的插件, PAJX添加了,自定义JavaScript也添加了。 不能使用复制。https://www.isdxh.com
已经知道了,最新版本已经修复了,我博客已经用上,晚点会更新