Suxiaoyu

Typecho代码高亮插件Code Highlighter
原作者:Copterfly,很遗憾的是他已经不在更新此款插件了,但是插件现在还是可以用的,很给力!
扫描右侧二维码阅读全文
29
2020/03

Typecho代码高亮插件Code Highlighter

原作者:Copterfly,很遗憾的是他已经不在更新此款插件了,但是插件现在还是可以用的,很给力!

基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,共提供8种代码高亮风格自由切换,支持显示代码语言类型、行号,以及支持复制代码到剪切板功能

使用方法

\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
使用的时候删除上边代码中的\

插件下载

下载-->解压-->文件夹改名为CodeHighlighter
注意:不改文件夹名字后台看不到插件!
(请勿与其它同类插件同时启用,以免互相影响)

如果你的网站有开启Pjax(开启的情况下必须添加,否则代码复制、窗口化失效)

请把以下代码添加到回调函数的地方

控制台--> 外观 --> 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);}

如果修改完不显示行号,就把模版里边代码高亮关闭即可

复制弹窗效果

默认没有加入代码Copy后的提示效果,如果想要和本博客一样的效果

请在模板目录的header.php文件中引入layer资源文件,代码如下

<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接!', function(){});}; 
Last modification:March 29th, 2020 at 02:00 pm

Leave a Comment

2 comments

  1. Suxiaoyu

    写得好好哟,我要给你生猴子!

  2. Suxiaoyu

    滴!学生卡!打卡时间:下午2:42:53,请上车的乘客系好安全带~