为了将代码与文章其他内容区分开来，并且提高代码的可读性，一般会将代码设置高亮。在WordPress后台插件选项卡处，以highlight为关键字能搜索出很多相关的插件，但好用的很少。其中Crayon Syntax Highlighter这款插件用户很多，用了一段时间后我觉得并不好用，主要是后台样式自定义选项很混乱，所以就选择了Prism。

Prism.js ？

易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！

传承：语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。

轻巧：代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。

快速：如果可能，支持通过 Web Workers 实现并行。

扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。

丰富：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

谁在使用？

很多网站都在使用 Prism，如果你是前端开发者，那你一定十分熟悉这些网站：

 

就连 JavaScript 之父 Brendan Eich 也在个人博客上使用

Prism.js 效果 ？

我网站上所使用的的就是Prism.js，你可以滚页面随意看看效果。

 

如何使用 Prism.js ？

WordPress搭建用户：

首先你需要从?Prism?官网下载所需的?prism.css 和 prism.js 文件，进入相应的主题目录下上传所下载的JS和CSS文件。

链入css及js文件方法①：将下面的代码复制到 funcations.php 中。

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism.css' //你所存放的prism.css文件路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism.js'   //你所存放的prism.js文件路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

外链css及js文件方法②：编辑header.php文件，在<head>和</head>之间加入代码：

<link href="/wp-content/themes/your_theme/prism.css" rel="stylesheet" />

编辑footer.php，在</body>之前加入代码：

<script src="/wp-content/themes/your_theme/prism.js"></script>

（将 "your_theme" 修改为你的主题文件夹名称。）

<pre><code class="language-*">  code_here </code></pre>

（language-*中，红色字体可修改任意编码语言，但必须保留?language-?，如 language-php ）

 

静态页面及普通用户：

?可以在 官网 下载 JS 和 CSS 文件后上传至服务器，然后在网页引用这两个文件即可：

<!DOCTYPE html>
<html>
<head>
     <link href="css/prism.css" rel="stylesheet" />
</head>
<body>
     ...内容...
     <script src="js/prism.js"></script>
</body>
</html>

遵循 HTML5 标准，使用语义化的 <pre> 元素和 <code> 元素来标记代码区块：

<pre><code class="language-css">p { color: red }</code></pre>

 

如果你感兴趣，可以 查看更多官方示例 或者 在线试用。

 

Prism使用自定义按钮

①. 插入标签按钮

编写文章时手打<pre class=" language-*"><code class=" language-*">太麻烦，而且容易出错，可以在WordPress默认编辑器上添加按钮，按钮的插入可以更具自身需求来添加，WP的官方API文档中将的很详细：Quicktags_API，下面是我自己添加的几个：

// 自定义代码高亮按钮
function appthemes_add_quicktags() {
 if (wp_script_is('quicktags')){
?>
 <script type="text/javascript">
     QTags.addButton( 'eg_hlAll', '*ALL', '<pre class="language-"><code class="language-">', '</code></pre>', 'h', 'defual highlight');
     QTags.addButton( 'eg_hlPHP', '*PHP', '<pre class="language-php"><code class="language-php">', '</code></pre>', 'z', 'php highlight');
     QTags.addButton( 'eg_hlHTML', '*HTML', '<pre class="language-markup"><code class="language-markup">', '</code></pre>', 'z', 'HTML highlight');
     QTags.addButton( 'eg_hlCSS', '*CSS', '<pre class="language-css"><code class="language-css">', '</code></pre>', 'c', 'css highlight');
     QTags.addButton( 'eg_hlJava', '*Java', '<pre class="language-Java"><code class="language-Java">', '</code></pre>', 'h', 'Java highlight');
 </script>
<?php
 }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

效果如下：

 

②. 代码插入框

上面的插入方案有个问题，就是只能在文本模式下编辑，对于<，>，&不能自动转义，然而切换到可视化模式粘贴代码又会丢失缩进格式，这里推荐文章?WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法?里的方案，针对prims可以适量修改一下载入框架：

<html>
<head>
    <!-- Disable browser caching of dialog window -->
	<meta http-equiv="Content-Type" content="text/html, charset=UTF-8" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <style type='text/css'>
    body {
        font-family: sans-serif;
        font-size: 1.1em;
        background-color: #F1F1F1;
        color: #222;
    }
    .codeArea {
        margin: 10px auto;
        text-align: center;
    }
    textarea {
        margin-top: 10px;
        width: 100%;
        height: 300px;
    }
    </style>
    <script>
    function htmlEntities(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
 
    function InsertValue() {
        codeNode = document.getElementById('code')
        code = codeNode.value;
        if(code == '') {codeNode.focus(); return;}
        lang = document.getElementById('lang').value;
        code = "<pre class='language-" + lang + "'><code class='language-" + lang + "'>" + htmlEntities(code) + "</code></pre>";
        window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器
        window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框
    }
    </script>
</head>
<body>
    <form onsubmit="InsertValue();return false;">
        <div class="codeArea">
            <label for="lang">代码语言</label>
            <select id="lang">
                <option value="java">Java</option>
                <option value="html">html</option>
                <option value="css">css</option>
				<option value="php">php</option>
                <option value="js">js</option>
                <option value="markup">markup</option>
            </select>
            <textarea id="code" autofocus></textarea>
            <p><input type="submit" value="Insert" /></p>
        </div>
        
    </form>
</body>
</html>