SEO普拉丝WordPress博客网站如何免插件实现代码高亮效果
好多朋友问我博客用的啥代码高亮插件，我一直用《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" 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">代码语言要按实际情况改。比如这段 nginx 代码：插入后的效果就是这样。
代码高亮的按钮
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;
}
}
