首页 » WordPress » 建站 » WordPress免插件实现代码高亮

WordPress免插件实现代码高亮

作者: 小z 分类: 建站 发布时间: 2016-11-17 19:56 ė浏览 355 次 63条评论
本站为您推荐(香港平价主机):老薛主机 | 恒创主机  

经常有朋友问我小z博客使用的哪个代码高亮插件,我一直用的《WP-Syntax》,不过这款插件样式一般,不是特别推荐。分享一个面插件实现代码高亮的方法,这里的免插件指的不需要安装WordPress插件,但是依然会用到一个js插件highlight.js

引入highlight.js

一般是在您主题文件的header.php文件,在头部引入highlight.js和css样式,复制下面的代码添加。


<link rel="stylesheet" href="https://libs.bsdev.cn/highlight.js/9.8.0/styles/github.css">
<script src = "https://libs.bsdev.cn/highlight.js/9.8.0/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

添加快捷按钮

只需要第一步其实就已经完成了,正常情况下在发布WordPress文章的时候切换到文本模式,插入下面的代码即可实现高亮。


<pre><code class="html">
这里插入代码...
</code></pre>

但是每次都去打pre标签显得很麻烦,我们可以参考:《用代码增强WordPress编辑器》这篇文章来快速键入指定的标签,因此您可以将下面的代码添加到主题目录的functions.php文件中。


//HTML文本增强
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'gl', '代码高亮', "\n<pre><code class=\"html\">\n\n", "</code></pre>" );
 
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
//HTML文本增强结束

效果演示

发布文章的时候切换到文本模式,你会发现多了一个代码高亮的按钮,双击两次键入pre标签,然后插入代码即可。默认为HTML代码,<code class="html">代码语言请根据实际情况修改。

gaoliang-11-17_193733


server {
listen 80;
server_name tool.xiaoz.me;
access_log /data/wwwlogs/tool.xiaoz.me_nginx.log combined;
index index.html index.htm index.php;
include /usr/local/nginx/conf/rewrite/none.conf;
root /data/wwwroot/xiaoz.me/tool;


location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
    }
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
    expires 30d;
    access_log off;
    }
location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
    }
}

插入nginx代码效果

其它说明

highlight.js支持多种代码风格样式,上面使用的是github.css风格,如果您觉得不好看,请访问:小z博客前端库替换自己喜欢的样式风格。

已知问题

  • 每次插入代码的时候行首会多出一个空行(不影响使用)
  • highlightjs无法处理尖括号,如果你的代码含有尖括号建议本地使用文本编辑器批量替换为转义字符

highlight.js官网地址:https://highlightjs.org/

本文出自 小z博客,转载时请注明出处及相应链接。

本文永久链接: https://www.xiaoz.me/archives/7634



博主QQ:337003006    500人技术交流群:147687134(期待您的加入)

老薛主机

发表评论

(必填)

(必填)

3条评论

  1. 企业管理培训 2016年11月18日 14:15 3楼 回复

    这个分享好

  2. 烧酒博客 2016年11月18日 08:43 1楼 回复

    然而并不适合半透明已落伍风格的我的博客,一直找不到相符合的样式。= =

    1. 小z 2016年11月18日 08:50 2楼 回复

      贵站的博客充满了二次元风,哈哈。highlightjs支持多种代码风格,你可以多试几个看有没有满意的。

Ɣ回顶部
小z个人微信:xiupingzou