Xcnte

Typecho代码高亮插件Code Prettify
基于prismjs的代码语法高亮typecho插件,支持众多常见的代码语言高亮显示,共提供11种代码高亮风格自由切...
扫描右侧二维码阅读全文
10
2019/04

Typecho代码高亮插件Code Prettify

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

起始

最初基于 Highlight 插件,开发一款名为ColorHighlight插件

但因为插件本身存在不少BUG,自己又不想重写结构,于是便重新基于CodeHighlighter开发了一款

依旧在原有的代码高亮样式上新增了Mac风格,修改了部分JS代码

下载

Github:https://github.com/Xcnte/Code-Prettify-for-typecho

码云:https://gitee.com/xcnte/Code-Prettify-for-typecho

激活

以Handsome主题为例

点击开合查看

第 1 步:下载本插件,解压,放到 usr/plugins/ 目录中;

第 2 步:文件夹名改为 Code Prettify

第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)

第 4 步:设置:选择主题风格,是否显示行号等。

第 5 步:修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件

  • handsome.min.css文件里的#post-content pre内容替换为

    padding:0;
    border-radius:0;
    overflow:hidden;
  • handsome.min.css文件里的#post-content pre code内容替换为

    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px 0.4px 1px;
    padding: 0;
    max-height:500px;
    padding-left:2em;
  • handsome.min.css文件里末尾添加

    #post-content .code-toolbar pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px 0.4px 1px;
    padding: 0;
    max-height:500px;
    padding-left: 3.5em;
    }
  • handsome.min.css文件里删除#post-content pre:before下所有内容

如果对主题css没有经过魔改的同学,可以通过直接替换handsome.min.css文件
根据你目前使用的handsome主题版本下载对应的handsome.min.css文件,建议大家使用最新handsome版本

Handsome 5.1.0 以上版本:
提取码:x1lq

Handsome 5.1.0 以下版本:
提取码:483p

用法

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

效果如下:

<?php echo 'hello jrotty!'; ?>

若不填写语言类型
效果如下:

<?php echo 'hello jrotty!'; ?>

Pjax

如果你的网站有开启Pjax(handsome主题默认开启)

若对Pjax不了解的同学,可以看看这篇文章的开头

请把以下代码添加到回调函数的地方,在你使用的主题设置里看看

Handsome主题为例:

  1. 主题 --> 设置外观 --> 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);}

重要说明

可设置项

1. 选择高亮主题风格 (官方提供的 8 种风格切换,本人自己新增了三种(Mac风格))

  • coy.css
  • dark.css
  • BlackMac.css(黑色Mac风格)
  • GrayMac.css (默认选中:Mac风格(灰色))
  • WhiteMac.css(白色Mac风格)
  • twilight.css
  • tomorrow-night.css

2. 是否在代码左侧显示行号 (默认开启)

后记

新版插件暂时取消了代码窗口化功能(功能已经写好了,但是效果达不到自己的预期),也许下个版本会加回来

因下个月要去参加比赛,估计要晚点才会更新下个版本

插件的兼容性应该不存在什么问题,博主在Handsome主题上使用一切正常

如果你在其他主题使用过程中出现了问题可以随时联系我

若有任何意见或发现任何BUG欢迎在该篇文章下留言

Last modification:May 11th, 2019 at 08:45 am
听说打赏我的人,都进了福布斯排行榜

Leave a Comment

148 comments

  1. Nisekoi

    好像和handsome的5.2版本的兼容性有些问题,每次都需要刷新一下才能加载出效果(没有使用第三方MD编辑器接管解析)。不知道其他人有没有个毛病

    1. Nisekoi
      @Nisekoi

      回调函数已经添加了,并且只要关闭pjax动画便没有这种问题。但是没有无刷新体验了比较难受。

      1. Xcnte
        @Nisekoi

        应该是不会出现这种情况,事先已经测试好了我有时间重新测试下

  2. for love

    博主请帮我看下这个是什么原因呢

    1. for love
      @for love

      https://1345708774.top/archives/25/
      显示不全
      默认的就会被序号挡住

      abcd1234 abcd1234
      1. Xcnte
        @for love

        请替换一下文章给出的handsome.min.css文件

        1. for love
          @Xcnte

          已解决,感谢

  3. shine

    更改css之后,出现了两个行号OωO
    是需要在哪里关掉嘛

    1. Xcnte
      @shine

      插件设置里行号显示关闭

  4. 妖怪

    单行的代码时 代码过长时 下面的滚动条height有点小 滑动时不容易按住 想调宽一点

    1. Xcnte
      @妖怪

      F12自己调试一下就好

  5. 阿七博客

    我安装并启用了插件。下载的对应版本的handsome.min.css替换。主题也设置了PJAX回调函数。但是在首页点进文章页内容出不来。必须要刷新一遍内容才能出来。关了pjax就正常了,缓存也清理了无数遍了,评论区能用的方法我都试了一遍,就是不行!求博主指点...

    1. Xcnte
      @阿七博客

      你主题设置里 将文章中的PJAX回调函数完整的粘贴进去,然后看看还会不会
      重新新建一篇文章,看看

      1. 阿七博客
        @Xcnte

        重新新建了一篇文章试了一下,还是不行。 第一篇测试文章 http://a7a7.net/blog/

        1. Zachary
          @阿七博客

          遇到了相同的问题,请问解决了吗?求助

          1. Xcnte
            @Zachary

            这边看你网站,已经没问题了

  6. opid

    这个插件好像不支持C++?我用
    ```c++

    include

    using namespace std;

    int main(){
    cout<<"Hello World!";
    return 0;
    }

    好像无法渲染
    1. Xcnte
      @opid

      是的,晚点会更新一下

  7. 博主安装后启用说当前页面未找到

    1. @龙

      Server Error

      1. Xcnte
        @龙

        文件夹名不能带空格,检查下

  8. 妖怪

    老哥,冒昧请教下 此页面中 激活下面 以Handsome主题为例 旁边那个 绿色的对号是怎么弄的

    1. Xcnte
      @妖怪

      如果你是该主题,请注意看使用文档中增强功能这一块内容

  9. 大鹏

    楼主你好,我安装了这个插件。目前其它浏览器都没有问题,就是苹果的safari出现异常,显示很丑。能不能修复一下

    1. Xcnte
      @大鹏

      提供一下截图

  10. 妖怪

    plugin.php 第44行 okaikia.css是干什么的
    我控制报 okaikia.css net::ERR_ABORTED 404

    1. Xcnte
      @妖怪

      默认显示的代码风格样式,你可以根据需要自己改成对应的高亮css文件名称

  11. 孟超

    博主大哥,这里有个问题,我设置的都对,就是写好的文章用这个高亮之后,每次进去这个文章都不会显示代码高亮,每次都需要刷新一下才正常显示高亮,这个该怎么解决?换了好几个浏览器和网络都有这个问题……

    1. 妖怪
      @孟超

      我想知道你解决了没有

    2. Xcnte
      @孟超

      请注意文章中PJAX

      1. 孟超
        @Xcnte

        博主,我设置了呀

        1. Xcnte
          @孟超

          清一下缓存。我这边看没问题

          1. 孟超
            @Xcnte

            还是有问题呀!我设置的是MAC黑色风格的(╯°A°)╯︵○○○

            1. Xcnte
              @孟超

              我这边看了多次没问题,你游览器缓存清理完整,还不行你换游览器看一下就知道了

              1. 孟超
                @Xcnte

                好的好的,谢谢你,φ( ̄∇ ̄o),我自己再试试,可能网络不好。。。

                1. Xcnte
                  @孟超

                  嗯,仔细检查下

  12. Jockie

    博主,这个插件会不会与EditorMD冲突?css替换了但是没有效果,我把EditorMD禁用后也一样

    1. Xcnte
      @Jockie

      没有效果?清理一下缓存,插件重新设置一下高亮样式,文章里注意代码块语法

      1. Jockie
        @Xcnte

        不知道怎么又好了……刚刚弄了好久。感谢!

        1. Xcnte
          @Jockie

          好的,有什么问题都可以说出来,我看到后会尽快回复( ๑´•ω•) "(ㆆᴗㆆ)

  13. 孟超

    你好,博主,我下载了这个插件,但是我在后台启用插件的时候总是进入404页面啊,这是为什么啊,可不可以说一下,我什么插件都没启动,也是打不开

    1. Xcnte
      @孟超

      你检查一下插件目录下插件的文件夹名,不能带空格

      1. Zachary
        @Xcnte

        文件夹没有空格还是Sever error

        1. Xcnte
          @Zachary

          缓存

      2. 孟超
        @Xcnte

        感谢啊,大兄弟,一下搞定φ( ̄∇ ̄o)

        1. Xcnte
          @孟超

          不客气

  14. 阿强

    滴!签到卡!请上车的乘客系好安全带,现在是:Mon May 27 2019 17:25:28 GMT+0800 (中国标准时间)

  15. 阿强
    该评论仅登录用户及评论双方可见
    1. Xcnte
      @阿强

      可否给一下博客地址?

      1. 阿强
        @Xcnte

        我这边发布了一个测试页面的文章
        https://www.qsit6.com/index.php/archives/45/
        OωO

        1. Xcnte
          @阿强

          我看了下,行号正常显示,你清理一下缓存看看

          1. 阿强
            @Xcnte

            已经解决了,刚才没注意清缓存嘻嘻(☆ω☆)
            非常感谢博主抽出时间回复。

            1. Xcnte
              @阿强

              不客气OωO
              滴!签到卡!请上车的乘客系好安全带,现在是:Mon May 27 2019 17:17:34 GMT+0800 (中国标准时间)

  16. Bixan

    滴!签到卡!请上车的乘客系好安全带,现在是:Sun May 26 2019 22:21:15 GMT+0800 (中国标准时间)

  17. Bixan

    请问主题自带的高亮要关掉吗 我这插件开了没效果 没有开CDN 清除缓存都试了 弄不好

    1. Xcnte
      @Bixan

      给一下网址

      1. Bixan
        @Xcnte

        已经弄好了! 谢谢

        1. Xcnte
          @Bixan

          好的

  18. 苍蓝

    滴!签到卡!请上车的乘客系好安全带,现在是:Fri May 17 2019 22:33:22 GMT+0800 (中国标准时间)

  19. ahxx

    滴!签到卡!请上车的乘客系好安全带,现在是:Thu May 16 2019 00:27:27 GMT+0800 (中国标准时间)

  20. Xcnte

    滴!访客卡!请上车的乘客系好安全带,现在是:Sat May 11 2019 21:32:54 GMT+0800 (中国标准时间)

  21. adapt

    博主,我照你的设置弄好了,发现行号遮挡了代码(只有刷新一次遮挡的行号才会消失),我已经关闭了插件的显示行号的选项,规则缓存都刷新了。这是文章地址,http://www.myheyufei.com/index.php/archives/196/

    1. adapt
      @adapt

      已发现从主页进入就会出现上述的情况,如果直接访问文章页面就不会有这种情况,

      1. Xcnte
        @adapt

        Pjax的锅,你把文章中我给出的Pjax回调函数,2-5行的代码删除即可

        1. adapt
          @Xcnte

          好的,谢谢博主

          1. Xcnte
            @adapt

            不客气

  22. 柠檬

    博主大大你好,我按照你的方法替换了文件,结果在时光机里的私密和发送按钮有重叠,请问什么解决,目前我换回原来的那个css了。

    1. Xcnte
      @柠檬

      我看了下css文件,导致按钮重叠不是该插件造成,你看看你是否有进行其他魔改?

      1. 柠檬
        @Xcnte

        按照直接替换文件会造成重叠,然后改代码不会,这样子

        1. Xcnte
          @柠檬

          不好意思,上传的handsome.min.css我自己魔改过,起了冲突,已经修复了

        2. Xcnte
          @柠檬

          好的,明天我再检查下

  23. Cyadhy
    该评论仅登录用户及评论双方可见
    1. Xcnte
      @Cyadhy

      请注意看文章内容哦,下载替换Handsome.min.css文件

      1. Cyadhy
        @Xcnte

        感谢,已经替换,难道是没有替换成功?

        1. Xcnte
          @Cyadhy

          没有替换成功,如果你有使用CDN,要刷新一下规则

          1. Cyadhy
            @Xcnte

            好的,已经成功了,非常感谢博主!

            1. Xcnte
              @Cyadhy

              不客气

  24. Xcnte

    下次出现这种情况,插件设置里的样式重新设置一遍即可

    1. 门寒子
      @Xcnte

      好的~谢谢作者大大୧(๑•̀⌄•́๑)૭

      1. Xcnte
        @门寒子

        不客气,小事

  25. 门寒子

    作者你好,我博客插件已按照上述设置设置成功,结果文章页面输出样式全变了,您可以看一下https://www.menron.com/archives/share/10.html

    1. Xcnte
      @门寒子

      请问一下你后台是否启用的markdown语法解析?编辑器用的是什么

      1. 门寒子
        @Xcnte

        你好,我后台启用了markdown语法解析,没有使用编辑器插件,使用的是parsedown解析插件

        1. Xcnte
          @门寒子

          如果有使用CDN,规则刷新一下

          1. 门寒子
            @Xcnte

            没有使用CDN

            1. Xcnte
              @门寒子
              该评论仅登录用户及评论双方可见
  26. 槐序二三煊

    全文几本无自动换行,本人应付中考,暂无时间去折腾,希望作者能首推。

    1. Xcnte
      @槐序二三煊

      你好,https://www.zxu.me/usr/themes/handsome/assets/css/handsome.css?v=1.3.2这个CSS文件与插件样式冲突,建议您删除文件中滑动条样式,也可以留下您联系方式,我这边发给你

      1. 槐序二三煊
        @Xcnte

        呃呃呃呃,实在抱歉,打字过于匆忙,原意为:"全网基本无代码高亮自动换行"

        1. Xcnte
          @槐序二三煊
          该评论仅登录用户及评论双方可见
          1. 槐序二三煊
            @Xcnte

            换行,过长的代码适应页面另起一行,而不是滑动条。滑动条不够直接。

            1. Xcnte
              @槐序二三煊

              那除非你在文章的代码块里手动换行,插件默认的显示效果就是滑动条

              1. 槐序二三煊
                @Xcnte

                φ( ̄∇ ̄o)我的意思是建议你研究下...算了...╮(╯▽╰)╭

                1. Xcnte
                  @槐序二三煊

                  明白你的意思,但是换行你想一下 如果一句代码中途被强制截断换行,视觉上不觉得奇怪吗?

  27. Xcnte

    朋友,弄篇测试文章

    1. 小波仔
      @Xcnte
      该评论仅登录用户及评论双方可见
      1. Xcnte
        @小波仔
        该评论仅登录用户及评论双方可见
        1. 小波仔
          @Xcnte
          该评论仅登录用户及评论双方可见
  28. 小波仔
    该评论仅登录用户及评论双方可见
    1. Xcnte
      @小波仔

      能否给个测试地址?
      滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Mon Apr 22 2019 09:39:24 GMT+0800 (中国标准时间)

  29. 萧晨冰雪

    激活404

    1. 萧晨冰雪
      @萧晨冰雪

      已正常

    2. Xcnte
      @萧晨冰雪

      注意文件夹的命名,别带空格

  30. 拾光

    我安装了插件,也开启了。直接下载对应版本的handsome.min.css替换。主题也设置了PJAX回调函数。清空了对应CDN,效果出不来呢。具体出来效果在我博客测试文章,有时间帮忙看看谢谢

    1. Xcnte
      @拾光

      还有,您的handsome.min.css文件没有替换成功,请重新替换一次

      1. 拾光
        @Xcnte

        我更新了5.1.1插件的效果出来了。但是在首页点进文章页内容出不来。必须要刷新一遍内容才能出来。这个是什么回事呢

        1. Xcnte
          @拾光

          能仔细看文章嘛?Pjax这一块

          1. 拾光
            @Xcnte

            原本Pjax是开启的,也添加了Pjax函数就会出现问题。现在关掉Pjax功能开关,文章内容才正常,但是整个网页都刷新了。好无奈∠( ᐛ 」∠)_

            1. 黄凯
              @拾光

              我也是~~关了pjax就正常了,不然要刷新一次~

              1. Xcnte
                @黄凯

                检查一下pjax是否正确

                1. 黄凯
                  @Xcnte

                  哈哈,很奇怪。关了再打开就正常了~~

            2. Xcnte
              @拾光

              不会,开启了PJAX就没问题了,你开起来后自己清一下缓存看看吧

    2. Xcnte
      @拾光

      这边看了下,效果已经有了

  31. 黄凯

    谢谢博主,已正常~

    1. Xcnte
      @黄凯

      搞定了就好|´・ω・)ノ

  32. Nisekoi

    语言类型为空的时候输出默认风格啊,能不能改成当语言类型为某个特定的值时才输出为默认风格。
    感觉挺多人都习惯不输入语言类别的。不说了,我去一个一个改类别了

    1. Xcnte
      @Nisekoi

      你可以自己去改,不习惯输入语言类别的说真的,你是我见过第一个
      如果喜欢默认风格,建议别用插件

      1. Nisekoi
        @Xcnte

        我不是这个意思,并不是喜欢使用默认风格,我指的是在```后面必须加上语言类别如shell、php之类的,插件才会输出MAC风格的代码框。
        我文章的都是没写语言类别的,装了插件之后由于没写语言类别全变成默认风格了。好在文章不多,后来一个一个去改好、添加了语言类别。接着我去看了几个使用了这款插件的用户,发现其中也有一些人不习惯写语言类别而变成了默认风格。当然可能大部分人都是写了的。
        我的建议是能否在不输入语言类别时依旧输出MAC风格。在语言风格为none(这个随意)时输出默认风格。
        当然,我只是把我的想法给写了上来,您也没有义务因为我一个人修改插件代码。

        1. Xcnte
          @Nisekoi

          不好意思,因为最近很忙,没怎么认真看评论,感谢您的建议

        2. Xcnte
          @Nisekoi

          最初的时候我就是按照你现在的想法去改的,但是后来觉得可能有一部分人希望某些代码块不显示MAC风格,比如说一些简单的一句话代码之类,下个版本会考虑加入自定义开关吧

  33. Seale

    希望优化一点问题,就是当鼠标在code块里滑动(这个时候code块获得了焦点)的时候再把鼠标移出外界文章不能滑动(此时焦点还在code块里)希望能够优化这一问题,优化下用户体验! 最后资瓷一波大佬!!!!!!!!

    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Fri Apr 12 2019 22:33:40 GMT+0800 (中国标准时间)

    1. Xcnte
      @Seale

      这个问题已经解决了,你可以看看我https://www.xcnte.com/archives/297/,当鼠标移动到代码块中获得焦点,移到外界文章焦点就转到代码块外了

      1. Seale
        @Xcnte

        大佬可以尝试一下点击code块后,在将鼠标移出
        可以在鼠标移出code块的时候初始化焦点,来改善下用户体验!

        1. Xcnte
          @Seale

          点击后,若鼠标移出code块,焦点已不在代码块里了,你可以换个游览器看看

          1. Seale
            @Xcnte

            好吧有个滚动缓动导致了有点延迟,尴尬

            1. Xcnte
              @Seale

              嗯!好的,感谢你的建议

  34. 刘大喵

    5.1.1好像不能用哎~~

    1. Xcnte
      @刘大喵

      已经更新了,Handsome5.1.1一样可用

      1. 刘大喵
        @Xcnte

        按照步骤设置了 没生效...

        1. Xcnte
          @刘大喵

          请你仔细检查一下,包括文章里代码块的书写样式
          别人使用都没任何问题的

          1. 刘大喵
            @Xcnte

            知道了,原来是没设置语言类型 - -
            另外我想请问下,支持的语言类型 在什么地方可以查看?

            1. Xcnte
              @刘大喵

              地址:https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript
              这里可以查看支持的语言类型

  35. 皮皮凛

    还有个问题...本文写的要将插件文件夹名改为"Code Prettify",应该是"CodePrettify"吧,不应该有空格

    1. Xcnte
      @皮皮凛

      是的,这里我没有注意,稍后会修改一下

  36. 哈喽雷

    感谢大佬。。。发现小问题,在小屏幕界面代码开头会被当着,改了下css就正常了

    1. Xcnte
      @哈喽雷

      感谢提醒,已修复

  37. 皮皮凛

    还要替换handsome.min.css文件呀....我的各种魔改岂不是无法保留了..

    1. Xcnte
      @皮皮凛

      其实替换高亮部分的css内容就够了,我等下发出来吧

      1. 皮皮凛
        @Xcnte

        谢谢,麻烦你了

        1. Xcnte
          @皮皮凛

          已添加~|´・ω・)ノ

          1. 皮皮凛
  38. 无用挂件

    装了这个插件之后没法禁用/启用任何插件...

    1. 无用挂件
      @无用挂件

      突然又好了...尴尬

  39. 爱莉

    是大佬 关注了

  40. Airs_Lau

    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Thu Apr 11 2019 13:45:52 GMT+0800 (中国标准时间)

  41. 刘大喵

    来了
    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Wed Apr 10 2019 23:22:49 GMT+0800 (中国标准时间)

  42. Xcnte

    如果插件符合你的心意,不妨留言支持一下?

  43. Gamesme

    已撸
    滴滴滴~访客卡,请上车的旅客系好安全带,现在是:Wed Apr 10 2019 20:46:20 GMT+0800 (中国标准时间)