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

94 comments

  1. Bixan

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

    1. Xcnte
      @Bixan

      给一下网址

      1. Bixan
        @Xcnte

        已经弄好了! 谢谢

        1. Xcnte
          @Bixan

          好的

  2. 苍蓝

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

  3. ahxx

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

  4. Xcnte

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

  5. 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

            不客气

  6. 柠檬

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

    1. Xcnte
      @柠檬

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

      1. 柠檬
        @Xcnte

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

        1. Xcnte
          @柠檬

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

        2. Xcnte
          @柠檬

          好的,明天我再检查下

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

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

      1. Cyadhy
        @Xcnte

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

        1. Xcnte
          @Cyadhy

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

          1. Cyadhy
            @Xcnte

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

            1. Xcnte
              @Cyadhy

              不客气

  8. Xcnte

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

    1. 门寒子
      @Xcnte

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

      1. Xcnte
        @门寒子

        不客气,小事

  9. 门寒子

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

    1. Xcnte
      @门寒子

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

      1. 门寒子
        @Xcnte

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

        1. Xcnte
          @门寒子

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

          1. 门寒子
            @Xcnte

            没有使用CDN

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

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

    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
                  @槐序二三煊

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

  11. Xcnte

    朋友,弄篇测试文章

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

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

  13. 萧晨冰雪

    激活404

    1. 萧晨冰雪
      @萧晨冰雪

      已正常

    2. Xcnte
      @萧晨冰雪

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

  14. 拾光

    我安装了插件,也开启了。直接下载对应版本的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
      @拾光

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

  15. 黄凯

    谢谢博主,已正常~

    1. Xcnte
      @黄凯

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

  16. Nisekoi

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

    1. Xcnte
      @Nisekoi

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

      1. Nisekoi
        @Xcnte

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

        1. Xcnte
          @Nisekoi

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

        2. Xcnte
          @Nisekoi

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

  17. 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

              嗯!好的,感谢你的建议

  18. 刘大喵

    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
              这里可以查看支持的语言类型

  19. 皮皮凛

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

    1. Xcnte
      @皮皮凛

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

  20. 哈喽雷

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

    1. Xcnte
      @哈喽雷

      感谢提醒,已修复

  21. 皮皮凛

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

    1. Xcnte
      @皮皮凛

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

      1. 皮皮凛
        @Xcnte

        谢谢,麻烦你了

        1. Xcnte
          @皮皮凛

          已添加~|´・ω・)ノ

          1. 皮皮凛
  22. 无用挂件

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

    1. 无用挂件
      @无用挂件

      突然又好了...尴尬

  23. 爱莉

    是大佬 关注了

  24. Airs_Lau

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

  25. 刘大喵

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

  26. Xcnte

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

  27. Gamesme

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