分类 Wordpress | 最后更新于last modified time 2019-01-10 11:24 | 发布于post date 发布于 | Author 日出1.1

更新 pure-highlightjs 插件，实现显示代码行号、鼠标悬浮行和被标记行高亮

博客一直用的是 Pure-Highlightjs 插件来实现代码的高亮，就是因为它可以在编辑器中可视化地插入代码，不用手动添加标签，特别方便。但是呢，不能显示行号。为了能够实现显示行号，对着 JS 熬了一天一夜总算是弄出一个比较满意的成果算是吐血之作吧 :(喷) 。

这个脚本有一个 Bug ，会导致“//” 注释下面的代码高亮消失，改为“/* */” 注释没问题。如果介意这个 Bug的，不要用下面的脚本来实现显示行号。博主已经改为 Prism 来实现代码高亮和显示行号，并且再次修改了插件代码，以实现适配 Prism。目前修改后的插件正在测试中，测试完毕我会更新这篇文章和 GitHub 上的插件。敬请期待！

2018-7-8 更新：v3 Prism 版已经测试完毕（使用 Prism 实现代码高亮和行号显示），该版本修复了 v2 highlightjs 版的两个 Bug。GitHub 地址：https://github.com/sunriseydy/Pure-Highlightjs/tree/Prism

v3 Prism 版下载地址：https://github.com/sunriseydy/Pure-Highlightjs/raw/Prism/Pure-Highlightjs-3.0.1.zip


插件更新项目地址：https://github.com/sunriseydy/Pure-Highlightjs

插件更新下载地址（v2 Pure-Highlightjs 版）：https://github.com/sunriseydy/Pure-Highlightjs/releases

由于我已经把下面的内容都整合到更新后的插件中了，因此下载更新后的插件，安装，停用之前原版的插件，启用更新后的插件即可拥有所有功能。

一、添加 JS 代码

JS 代码直接下载我的，地址为：line-number.js (如果链接失效后面我会给出源码)

将上述 JS 代码保存为 line-number.js，当然，也可以是别的名字，这里我用 line-number.js 做演示，如果你不是这个名字的话后面部分要做相应的更改。

将这个 JS 脚本文件放到 pure-highlightjs 插件目录下的 assets 目录下（怎么放？用 FTP 呀）。

然后编辑插件目录下的 pure-highlightjs.php 文件，在 pure_highlightjs_assets() 函数中添加一行：

wp_enqueue_script( 'line-number-js', PURE_HIGHLIGHTJS_PLUGIN_URL . 'assets/line-number.js', array(), '0.1.8', true );

说明一下，上面代码中 “line-number-js” 是可以自定义的，而后面的 “assets/line-number.js” 则要根据自己设置的 JS 文件名来改正。

二、添加 CSS 代码

添加完 JS 代码后还要添加 CSS 样式表，要为行号设置样式。源码会在后面给出，这里直接给出我在用的 CSS 样式表文件：line-number.css。同样的，这里文件名我以 “line-number.css” 为例，也放到 pure-highlightjs 插件目录下的 assets 文件夹下。同样的在插件目录下编辑 pure-highlightjs.php 文件，在 pure_highlightjs_assets() 函数中再添加一行：

wp_enqueue_style( 'line-number-css', PURE_HIGHLIGHTJS_PLUGIN_URL . 'assets/line-number.css', array(), '0.1.0' );

和上部分一样，根据需要做更改，最终的 pure_highlightjs_assets() 函数内容是这样的：

function pure_highlightjs_assets() {
    wp_enqueue_style( 'pure-highlightjs-style', PURE_HIGHLIGHTJS_PLUGIN_URL . 'highlight/styles/' . pure_highlightjs_option('pure-highlightjs-theme', PURE_HIGHLIGHTJS_DEFAULT_THEME) . '.css', array(), '0.9.2' );
    wp_enqueue_style( 'pure-highlightjs-css', PURE_HIGHLIGHTJS_PLUGIN_URL . 'assets/pure-highlight.css', array(), '0.1.0' );
    wp_enqueue_script( 'pure-highlightjs-pack', PURE_HIGHLIGHTJS_PLUGIN_URL . 'highlight/highlight.pack.js', array(), '0.9.3', true );
//添加行号
    wp_enqueue_script( 'line-number-js', PURE_HIGHLIGHTJS_PLUGIN_URL . 'assets/line-number.js', array(), '0.1.8', true );
    wp_enqueue_style( 'line-number-css', PURE_HIGHLIGHTJS_PLUGIN_URL . 'assets/line-number.css', array(), '0.1.0' );

}

需要注意的

1. 如果代码最后和 “</code></pre>” 之间没有换行的话，最后一行代码是不显示的 :(惊哭) 希望有前端大神能帮忙解决这个问题。用 pure-highlightjs 插件插入代码的时候代码最后没有回车，因此在用了这个显示行号的 JS 后导致之前文章中代码最后一行全部不显示。目前暂时性的解决办法就是：

用 SQL 语句批量将所有文章中的 “</code></pre>” 前加一个回车。SQL 语句如下：

UPDATE wp_posts
SET post_content = replace( post_content, '</code></pre>', '\n</code></pre>' ) WHERE post_status = 'publish' AND post_type IN ('post','page');
UPDATE wp_posts
SET post_content = replace( post_content, '\n\n</code></pre>', '\n</code></pre>' ) WHERE post_status = 'publish' AND post_type IN ('post','page');
UPDATE wp_posts
SET post_content = replace( post_content, '\r\n\r\n</code></pre>', '\r\n</code></pre>' ) WHERE post_status = 'publish' AND post_type IN ('post','page');

代码说明：将文章中的 “</code></pre>” 替换为 “\n</code></pre>”，即多了一个回车，如果之前已经有一个回车就将修改后的两个回车替换为一个回车。在更新后的插件中我已经将该 SQL 语句集成到插件启用函数中，因此只要启用了插件，就可以自动执行该 SQL 操作，因此不用再手动执行了。

上面是针对之前的文章，那么我们在用这个插件插入代码时如何直接就添加一个回车呢？编辑插件的 JS 代码即可。

在插件目录下的 “tinymce” 文件夹下有一个 “tinymce.js” ，编辑该 JS 文件，将最后的：

editor.insertContent(sp + '<pre class="pure-highlightjs"><code class="' + e.data.lang + '">' + code + '</code></pre>' + sp + '<p></p>');

改为

editor.insertContent(sp + '<pre class="pure-highlightjs"><code class="' + e.data.lang + '">' + code + '\n</code></pre>' + sp + '<p></p>');

即将 “</code></pre>” 改为 “\n</code></pre>”，添加了一个换行符。这样再用插件添加代码时就会自动在代码和 “</code></pre>” 之间换行了。

2. 在我的 CSS 文件中，当前行高亮和标记行高亮的颜色是和我目前用的代码高亮主题适配的，如果你用的代码高亮主题和我的不一样，那最终的行高亮效果和标记行高亮效果可能会亮瞎眼。目前的解决办法是手动根据自己的代码高亮主题来设置当前行高亮和被标记行高亮颜色。修改的方法我会在后面源代码部分说明。

源码和修改后的插件地址

见下一页


版权说明：
本作品由 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创，欢迎转载，但请注明原作者(sunriseydy)和原文链接(https://blog.sunriseydy.top/technology/wordpress/pure-highlightjs-with-line-number/)
部分来自互联网的文章，如有侵权，请联系我，24小时内删除，谢谢

手机打开扫一扫即可访问本页面

感谢您的支持，SunriseYDY 会继续努力的!

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

日出一点一 | 在探索的路上永不止步

分享到微博 分享到QQ 微信赞赏 在手机上阅读 点赞 1

页面： 1 2

微信扫描下方左侧二维码或搜索“sunriseydy”关注我的公众号，便捷地阅读博客内容，订阅博客更新

也可以扫描下方右侧的小程序码，进入我的微信小程序：“sunriseydy”，在手机上阅读文章

      

“更新 pure-highlightjs 插件，实现显示代码行号、鼠标悬浮行和被标记行高亮”的15个回复

    • 日出1.1
      怼TA

      @望星湖畔 可以选择添加一个经典编辑器的区块，然后就和老版的一样会有一个插入代码的按钮

  2. 风君子
    怼TA

    你好，为啥我再github下载的最新版安装后还是不显示行号，wp4.9.8版本
    能麻烦给看一下吗？https://www.fengjunzi.com/blog-1385.html
    感觉这个插件比较方便

    • 日出1.1
      怼TA

      @风君子 将 line-number.css 文件中 “.code-with-line-number li” 的样式: “list-style” 后面加一个 ” !important” 就行了，即: “list-style: decimal-leading-zero !important;”。原因嘛，就是你的其他CSS样式将它变成了”disc”。

  3. iBoy
    怼TA

    line-number.js文件丢失了

    • 日出1.1
      怼TA

      @iBoy 已将链接改为 GitHub 下载链接，谢谢提醒。

      • iBoy
        怼TA

        @日出1.1 主题可以把原版插件的集成进去吗？和我的博客（https://iboy.ooo）风格不匹配

        • 日出1.1
          怼TA

          @iBoy 你可以在设置里更改主题呀，v2版用的就是原版的主题，只不过行号和当前行高亮颜色要在line-number.css文件中手动修改以适配当前使用的主题，我记得在文章中有写到。v3版插件用的是Prism的主题，同样可以在后台设置里更改，如果主题不适合可以去Prism的官网下载其他主题。

  4. Mactor
    怼TA

    博主你好 我发现cpp的高亮无法正常显示

    • 日出1.1
      怼TA

      @Mactor 无法正常显示是什么样子？没有高亮还是高亮显示不正确？如果是前者，可能是highlight JS 的问题，如果是后者，那么是文中我提到的注释后代码也显示为注释的问题吗？如果是，请使用第三版修改的插件，如果不是，请给出具体的问题详情。

  5. Mill Wan
    怼TA

    非常好，我一直在寻找，今天终于启用了该插件，这么好的文章，为什么没有人评论？我已经把本文引用到我站了，虽然是新站，但是尽一份努力让更多的人看到！

    • 日出1.1
      怼TA

      @Mill Wan 感谢这位博主的的认同，其实这篇文章到目前为止已经有至少一千人看到了。我看了你网站引用的文章，不知道关于注释的bug你有没有解决，至于滚动条的问题，我测试的时候在单个HTML网页中也能显示滚动条，而你网站上的代码显示是软换行的样式，猜测可能是你的CSS样式里做了更改。

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注