小z博客

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

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

<link rel="stylesheet" href="https://libs.bsdev.cn/highlight.js/9.8.0/styles/github.css" rel="external nofollow" target = "_blank" >
<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">代码语言请根据实际情况修改。

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;
    }
}

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

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

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