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

设置字体大小:

博客一直用的是 Pure-Highlightjs 插件来实现代码的高亮,就是因为它可以在编辑器中可视化地插入代码,不用手动添加标签,特别方便。但是呢,不能显示行号。为了能够实现显示行号,对着 JS 熬了一天一夜总算是弄出一个比较满意的成果算是吐血之作吧 :(喷) 。效果如下(这玩意还有点击动画呢,当鼠标滑过某一行时会高亮当前行,当鼠标点击某一个行号时,当前行会被标记,此时按住 shift 键,再点击某一个行号,则两个行号区间内的代码都会被标记):

.code-with-line-number > ul {
  list-style: decimal;
  margin: 0;
  margin-left: 40px;
  padding: 0;
}
.code-with-line-number li {
  list-style: decimal-leading-zero;
  border-left: 1px solid #ddd;
  padding-left: 2px;
  position: relative;
}

插件更新项目地址:https://github.com/sunriseydy/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 文件中,当前行高亮和标记行高亮的颜色是和我目前用的代码高亮主题适配的,如果你用的代码高亮主题和我的不一样,那最终的行高亮效果和标记行高亮效果可能会亮瞎眼。目前的解决办法是手动根据自己的代码高亮主题来设置当前行高亮和被标记行高亮颜色。修改的方法我会在后面源代码部分说明。

源码和修改后的插件地址

见下一页

分享到:

赞 (0)   -->微信赞赏<--

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



版权说明:
文章内容如未说明均为原创,欢迎转载,但请注明原作者和出处。部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢
Email:i@mail.sunriseydy.top


知识共享许可协议
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

评论一下呗亲

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

添加表情