Xcnte

ColorHighlight插件实现Mac风格代码高亮
基于 Highlight的代码语法高亮插件 for Typecho,可显示语言类型、行号,有复制代码到剪切板等功能...
扫描右侧二维码阅读全文
24
2019/01

ColorHighlight插件实现Mac风格代码高亮

基于 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.jsjscss都换成最新的了

在原有的功能上新增代码复制功能,Mac风格代码高亮,代码块窗口化

(请勿与其它同类插件同时启用,以免互相影响)

使用方法

以Handsome主题为例

点击开合查看

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

第 2 步:文件夹名改为 ColorHighlight

第 3 步:登录管理后台,激活插件;

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

第 5 步:主题-->外观设置-->代码高亮的风格选择-->自定义

第 6 步: 删除/usr/themes/handsome/assets/css/handsome.min.css中所有关于precode标签的CSS
(这里直接下载handsome.min.css文件,然后替换一下即可)

用法

\```php
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

pjax

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

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

Handsome主题为例:

  1. 主题 --> 设置外观 --> 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请在该篇文章下留言

提示

由于插件只对了我博客的主题做了兼容性修改,在其它主题使用中可能会出现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(){});}; 
Last modification:April 10th, 2019 at 06:33 pm
听说打赏我的人,都进了福布斯排行榜

Leave a Comment

191 comments

  1. 黄凯

    博主我和你是相同模板,进入文章后只有刷新页面才能正常显示。是完全按照wiki操作,替换了handsome.min.css 并且加了pjax回调函数。Chrome Safari都是这个情况。源码是gitee下载的

  2. IFYOUNEED

    老大,我在设置里关掉了左边的行号显示,但是实际文章里还是显示着行号的

    1. Xcnte
      @IFYOUNEED

      请使用最新版本

      1. IFYOUNEED
        @Xcnte

        Code Prettify和ColorHighlight那个是最新的

        1. Xcnte
          @IFYOUNEED

          Code Prettify是最新的,注意文章开头

  3. 槐序二三煊

    代码块硕大too
    http://www.zxu.me/index.php/archives/9/

    1. Xcnte
      @槐序二三煊

      请使用插件最新版,旧版问题有点多哦,看文章开头有给出最新版插件地址

  4. 刘大喵

    我来了,咋还没有呀更新

    1. Xcnte
      @刘大喵

      已更新~|´・ω・)ノ

    2. Xcnte
      @刘大喵

      有点忙,而且还在考虑要不要加入窗口化

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

        还有就是建议作者大大在下个版本能够加入
        最大化代码块之后点击其余空白区域也能关闭这个放大的弹出layer!

      2. Seale
        @Xcnte

        看了下貌似是服务器延迟的问题 抱歉!

        1. Xcnte
          @Seale

          目前本博客用的就是下版本,但有点事没有发布出来
          下个版本可能会取消窗口化

  6. Billyy

    我用的也是Handsome,但是主题设置里的自定义javascrit和header.php文件中引入layer资源文件 回调什么的都弄了还是不能复制

    1. Xcnte
      @Billyy

      方便给一下博客地址吗?

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

    可能要明后天才能更新了,因为有点事,不好意思了,大家见谅!!!

  8. 日月明

    升级后主题自带代码不会换行了....
    感觉升级以后,配置这个插件就更简单了φ( ̄∇ ̄o)

  9. Airs_Lau

    Handsome更新了,希望大佬能抽空更新下

    1. Xcnte
      @Airs_Lau

      已更新~|´・ω・)ノ

    2. Xcnte
      @Airs_Lau

      最晚明天

      1. Peter
        @Xcnte

        Handsome更新2天多了,希望大佬能抽空更新下

        1. Xcnte
          @Peter

          已更新~|´・ω・)ノ

  10. Baicho

    请问下那个自定义javascrit增加提示代码为什么不起作用呢?

    1. Xcnte
      @Baicho

      后台主题设置加入到自定义javascript不行吗?

      1. Baicho
        @Xcnte

        是的

        1. Xcnte
          @Baicho

          不好意思,少写了一个步骤,文章中已更新,请刷新查看

          1. Baicho
            @Xcnte

            已经解决了哈,谢谢了!

          2. Baicho
            @Xcnte

            嗯嗯,好的,谢谢!

            1. Xcnte
              @Baicho

              不客气,是我自己的疏忽了

              1. Baicho
                @Xcnte

                嗯呢

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

      这个版本问题还是太多了,考虑先用着等下一个版本

  12. 无用挂件

    代码块真的硕大无比...
    不知道问题出在哪里了
    恳请博主帮忙看一下,谢谢
    https://raspii.tech/archives/18-05-23.html

    1. Xcnte
      @无用挂件

      网址打不开

      1. 无用挂件
        @Xcnte

        能打开的啊...
        电信正常,移动正常

        1. Xcnte
          @无用挂件

          你检查一下插件设置里,行号显示开了吗

          1. 无用挂件
            @Xcnte

            行号关了就正常了...
            是bug还是我这边不太兼容?

            1. Xcnte
              @无用挂件

              应该是和主题不兼容导致的,下个版本不会出现这种问题了

              1. 无用挂件
                @Xcnte

                谢谢,博主辛苦了
                这样的插件真的很赞,看得出博主的心血

                1. Xcnte
                  @无用挂件

                  不客气,小事

  13. LowBee

    为啥没有滚动条。。。

    1. Xcnte
      @LowBee

      方便给一下网址me

  14. DengXh

    最新版的插件, PAJX添加了,自定义JavaScript也添加了。 不能使用复制。https://www.isdxh.com

    1. Xcnte
      @DengXh

      已经知道了,最新版本已经修复了,我博客已经用上,晚点会更新

  15. 小天教主

    后台没有这个插件显示

    1. Xcnte
      @小天教主

      注意一下文件夹的名字

      1. 小天教主
        @Xcnte

        改了的,还是没有

        1. Xcnte
          @小天教主

          不会吧?你是typecho博客程序?

          1. 小天教主
            @Xcnte

            我就是下载插件,放在博客插件文件夹里,改文件名字,去博客后台看,没有这个插件显示

            1. Xcnte
              @小天教主

              仔细检查一下,或者重新下载一下插件,放到插件文件夹

          2. 小天教主
            @Xcnte

            对啊

  16. 凉心

    博主,https://www.14bk.cn/3.html,为啥复制不弹出提示?
    在自定义javascrit也弄了

    1. Xcnte
      @凉心

      请问你是在哪下载的插件?尽量去github上或者码云下载,因为是最新的

  17. DengXh

    博主,https://www.isdxh.com/58.html ,需要一次刷新才能载入。而且复制等功能无法使用。

    1. Xcnte
      @DengXh

      添加一下PJAX回调函数

      1. DengXh
        @Xcnte

        我的主题中没有PJAX回调函数添加的地方。应该添加在哪个模板页面?

        1. DengXh
          @DengXh

          把PJAX关闭后, 复制也不好用哎、

          1. Xcnte
            @DengXh

            你是默认主题是么?现在的版本问题有点多 或者考虑一下等下个版本吧

  18. 橙子秋

    在哪里设置“用法”步骤?

    1. Xcnte
      @橙子秋

      具体的步骤,在使用方法里有一个点击开合即看
      PJAX是在主题设置里配置

    2. 橙子秋
      @橙子秋

      @Xcnte

  19. peter

    Handsome复制失效

    1. Xcnte
      @peter

      PJAX函数添加了吗

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

            非常谢谢你!

          2. peter
            @Xcnte
            该评论仅登录用户及评论双方可见
      2. peter
        @Xcnte

        加了,还是有点问题

        1. Xcnte
          @peter

          如果完全按照文章里走,是不会有问题了,我刚才看了下你貌似没替换handsome.min.css文件,或者等下一个版本吧,快更新了

        2. Xcnte
          @peter

          请下载文章里的handsome.min.css文件,然后替换一下

          1. peter
            @Xcnte

            尝试了,但是还是有问题

  20. 刘大喵

    控制台报错 不知道什么回事→_→

    1. Xcnte
      @刘大喵

      这些问题都不用管了,下个版本全部修复

  21. 贝塔云抢房

    下一版貌似会增加

  22. Xcnte

    应该会在handsome主题5.1发布后更新,因为高亮行号是主题的,下个版本貌似会大改,所以。。

    1. 心语难诉
      @Xcnte

      对头,等5.1,也在等你~٩(ˊᗜˋ*)و

  23. 日月明

    博主,你好,我复制是能复制的,但chrome后台报错说 layer 找不到
    `Uncaught ReferenceError: layer is not defined`
    以及更新求艾特

    1. Xcnte
      @日月明

      如果不影响使用可以先用着,下个版本这些问题都会修复

      1. 日月明
        @Xcnte

        那就更新求艾特了

        1. Xcnte
          @日月明

          已更新~|´・ω・)ノ

  24. 左岸

    代码字体较细了,建议修改font-weight为800,会美观很多

    1. Xcnte
      @左岸

      你说的是目前文章显示的效果吗?

      1. 左岸
        @Xcnte

        大概是这样https://www.zrahh.com/usr/uploads/2019/03/2789192166.png

        1. Xcnte
          @左岸

          好的 会修改一下|´・ω・)ノ

  25. 刘大喵

    现显示正常了,窗口化啥时候恢复呀⌇●﹏●⌇

    1. Xcnte
      @刘大喵

      窗口化还在想应该实现什么样的效果

      1. 刘大喵
        @Xcnte

        →_→坐等更新,更新了艾特一下 蟹蟹

  26. 刘大喵

    白色看起来舒服点~个人感觉(ฅ´ω`ฅ)

    1. Xcnte
      @刘大喵

      好的OωO

      1. 刘大喵
        @Xcnte

        报告,再次发现bug; 移动端看有问题

        1. Xcnte
          @刘大喵

          现在看看还会吗

  27. 刘大喵

    报告,您的代码块貌似不能窗口化了,点了没反应(/ω\)

    1. Xcnte
      @刘大喵

      在改

  28. 一南酱

    代码框很大,我也不知道什么原因。233,麻烦大佬看一下

    1. Xcnte
      @一南酱

      我这边看了下, 是你把lines.css给修改了,麻烦你访问一下项目地址,重新替换lines.css文件

      1. 一南酱
        @Xcnte

        秒评论哇

        1. Xcnte
          @一南酱

          Server酱 是个好东西

          1. 一南酱
            @Xcnte

            还是会诶OωO,应该是主题css什么东西冲突了吗?emm ̄﹃ ̄

            1. Xcnte
              @一南酱

              把lines.css文件中的min-height属性删除

              1. 一南酱
                @Xcnte

                貌似还是不行要回学校了先用引用标签代替一阵子,回来再来改改

                1. Xcnte
                  @一南酱

                  好吧

  29. 刘大喵

    代码窗口最大显示的行数有点少,这个能不能调整,求告知

    1. Xcnte
      @刘大喵

      在customemin.css 文件里调整

      1. 刘大喵
        @Xcnte

        另外,鼠标划过代码块会显示 高亮的语言名称 像PHP那样,这个怎么做的?

        1. Xcnte
          @刘大喵

          一个简单的hover,现在文章显示的是最新版,明后天会加上

  30. Chaney丶

    控制台报错:
    Uncaught ReferenceError: ClipboardJS is not defined
    at guess.js:11

    点击无法代码全屏

    麻烦能帮忙解决一下吗

    1. Xcnte
      @Chaney丶

      进你的网站看了下,可以实现代码全屏

      1. 十三
        @Xcnte

        大佬,我这出现了和他一样的问题,怎么解决的?

        1. Xcnte
          @十三

          看看pjax函数有没有添加,我现在进你博客看了一下 已经没问题了

          1. 十三
            @Xcnte

            嗷,pjax添加了,貌似是代码太长的话下拉拉不到最底部,要标题打开窗口才行

            1. Xcnte
              @十三

              下个版本会全部修复这些问题

      2. Chaney丶
        @Xcnte

        已经解决了,谢谢!
        希望后期能够更新添加点击除代码框以外退出全屏。

        1. Xcnte
          @Chaney丶

          好的,已经在改了|´・ω・)ノ

  31. Hoe

    看代码舒服多了

    1. Xcnte
      @Hoe

      就是用起来有点麻烦了

  32. Arlan126

    我换主题后又变了,是不是要把上次的css替换?

    1. Xcnte
      @Arlan126

      你现在的主题,按文章的流程走就好了

  33. yamadie

    这样式真好看,谢谢分享

  34. E语云博客

    感谢分享~~如果窗口化时,窗口上显示关闭图标就方便了,刚开始还不知道怎么关闭窗口化~~哈哈哈

    1. Xcnte
      @E语云博客

      哈哈,没考虑到这个,过几天会重新改改

  35. Carlson

    支持一下,感谢分享

  36. BigCoke

    代码块的滚动貌似有问题,不放大的情况下往下拉,最后一行不会显示

    1. Xcnte
      @BigCoke

      已修复,请重新下载customemin.css,并覆盖上传

  37. Arlan126

    我这存在问题,是mac之外的超过20行就不显示多余的代码,默认的风格可以显示多余20行代码,不过上面的红绿灯与第一行重叠。

    1. Xcnte
      @Arlan126

      我这边帮你修改好了,你方便的话提供一下邮箱,我发给你

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

          已发送

    2. Xcnte
      @Arlan126

      检查一下你主题下的style_page-post.css文件,存在样式冲突

      1. Arlan
        @Xcnte

        谢谢你,你给的我替换了,不过只显示20行了。

        1. Arlan
          @Arlan

          替换不行,覆盖了就好了。谢谢!

          1. Xcnte
            @Arlan

            好的,那应该是我不小心多删除了

  38. 贝塔云抢房

    确实有用,支持了!

  39. DengXh

    谢谢博主的这个插件。

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

        添加了你的代码也没用。。。
        控制台报错:
        Uncaught ReferenceError: ClipboardJS is not defined
        at guess.js:11

        1. Xcnte
          @SSpirits

          我这边看了下,没什么问题,但没有提示效果

  41. degage

    qwq

  42. 阿蒙

    复制不了啊

    1. Xcnte
      @阿蒙

      可以复制的,只是没有提示效果,你们可能没加入文章中我说的那行代码
      我刚刚更新了一下js文件,你重新替换一下吧

      1. 阿蒙
        @Xcnte

        嗯,好的

  43. 阿蒙

    来学习学习

  44. Acode

    我也来看看

  45. SimonKing

    我来打卡

  46. Mark

    试了一下,放大后应该缩小必须点按钮过于麻烦,建议点击边缘外的元素触发操作,用户体验会更好。

    1. Xcnte
      @Mark

      多谢提议,会改善下

  47. 刘大喵

    很喜欢这个风格,拿走了
    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Thu Feb 21 2019 19:44:41 GMT+0800 (中国标准时间)

  48. 小闪'Blog

    来给大佬洒洒水,拿走了好多好玩的东西..!!!

    1. Xcnte
      @小闪'Blog

      我这里居然还有好玩的!!!

  49. 日月明

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Thu Feb 21 2019 19:00:36 GMT+0800 (CST)

  50. 鹤别空林

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Thu Feb 21 2019 18:44:21 GMT+0800 (CST)

  51. kali博客

    你好,我已经安装教程安装,但是初次打开页面,不显示代码高亮的颜色,必须刷新下代码高亮的效果才会出来。能帮我解决下吗?地址:blog.bbskali.cn

    1. Xcnte
      @kali博客

      已联系你QQ,同意下

  52. CY

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Thu Feb 21 2019 15:22:46 GMT+0800 (中国标准时间)

  53. UG3800

    千辛万苦终于找到|´・ω・)ノ

    1. Xcnte
      @UG3800

      ୧(๑•̀⌄•́๑)૭

  54. 木南

    超级喜欢mac风格的代码块,感谢博主(☆ω☆)

  55. 心语难诉

    很不错!坐等Handsome5.1更新,然后就用你这版了!

    1. Xcnte
  56. Xcnte

    ColorHighlight插件算是正式发布了吧,希望大家喜欢

  57. kali论坛

    你好,代码风格更新了没!

    1. Xcnte
      @kali论坛

      还在更新一些东西,明天会发出来了

  58. 阿蒙

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Mon Feb 18 2019 19:37:24 GMT+0800 (中国标准时间)

  59. Vi蓝鲸

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Mon Feb 18 2019 19:01:13 GMT+0800 (CST)

  60. 涛涛

    棒!我能转到我的博客里吗?

    1. Xcnte
      @涛涛

      今天或者明天会更新一下,可以晚点再转载

    2. Xcnte
      @涛涛

      没问题,最好是保留一下原文链接哈

      1. 涛涛
        @Xcnte

        1. Xcnte
  61. 左岸

    mark

  62. 七越

    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Mon Feb 18 2019 12:17:52 GMT+0800 (中国标准时间)

  63. Mark

    看看 不错的样子

    1. Xcnte
  64. EIP

    可以的 ! 感谢分享

  65. kali论坛

    找了好久,终于找到了!感谢分享!
    滴!访客卡!请上车的乘客系好安全带~φ( ̄∇ ̄o),现在是:Thu Feb 14 2019 20:41:22 GMT+0800 (CST)

    1. Xcnte
      @kali论坛

      过几天会更新一下,会加上代码复制

      1. kali论坛
        @Xcnte

        好的,感谢分享!已收藏!

        1. Xcnte
  66. 很甜

    学习一下

  67. BigCoke

    来学习一下OωO

  68. 与梦城

    不错

  69. 拾光

    需要往下拉,只能显示到25行么?这个窗口最大显示长度可调不?

    1. Xcnte
      @拾光

      可以调整,至于往下拉你鼠标移动到代码块里滑动鼠标滚轮就够了,也不算麻烦୧(๑•̀⌄•́๑)૭

      1. 拾光
        @Xcnte
        该评论仅登录用户及评论双方可见
        1. Xcnte
          @拾光
          该评论仅登录用户及评论双方可见
  70. 心语难诉

    相当舒服~

    1. Xcnte
      @心语难诉

      ( ๑´•ω•) "(ㆆᴗㆆ)