WordPress 代码高亮方案：Prism

WordPress 代码高亮方案：Prism

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

1. Prism.js

Prism所支持内容广泛，包括C, Java, PHP, CSS和HTML等所有流行语言，对我个人比较遗憾的是不支持VBA。

加载Prism代码高亮方案很简单，包括Prism.js和对应的CSS样式。在（Prism.js和CSS）下载页面中，依次选择Themes（主题颜色方案）和Languages（目标语言），然后点击下载JS和CSS就好了。

将下载来的Prism.js加载如WordPress主题文件js文件夹中，然后在footer.php中加载：

<script src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>

对应的CSS文件可以直接复制粘贴到style.css文件中，或者单独加载也可以。

2. 使用Prism.js实现高亮

Prism使用起来计较简单，编辑文章时通过形如<pre class=" language-*"><code class=" language-*">代码内容</code></pre>这种形式来实现，具体可以参见官方的示例页面：examples。

3. 自定义按钮

a. 插入标签按钮

编写文章时手打<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_hlHTML', '*HTML', '<pre class="language-markup"><code class="language-markup">', '</code></pre>', 'z', 'HTML 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' );

效果如下：

botton

b. 代码插入框

上面的插入方案有个问题，就是只能在文本模式下编辑，对于<，>，&不能自动转义，然而切换到可视化模式粘贴代码又会丢失缩进格式，这里推荐文章 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>