因?yàn)楸菊疽窒砗芏啻a，所以在頁面上實(shí)現(xiàn)代碼高亮是必須的，在WordPress官方找了很多插件，都是要加載額外的css和js到網(wǎng)頁頭部，對(duì)我這種優(yōu)化控來說，這是不能接受的，搜索了很多地方，最后找到了我愛水煮魚介紹的Prism：輕量級(jí)的 Javascript 代碼高亮庫，當(dāng)時(shí)Prism支持的語言還比較少，文件壓縮后只有1.5k，發(fā)展到了現(xiàn)在，Prism支持的語言包括html、js、css、php、python等十幾種語言。

集成Prism到網(wǎng)站

使用的時(shí)候，在官網(wǎng)選擇需要的語言和代碼高亮的主題，然后下載到本地，然后解壓，把解壓出來的js和css文件引入到網(wǎng)頁的head中。為了減少兩個(gè)http請(qǐng)求，我當(dāng)然是直接把js和css和網(wǎng)站其他的合并在一起。然后，需要代碼高亮的時(shí)候，直接用類似于下面的代碼把需要高亮的代碼包裹起來就可以了。

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

等等，使用起來好像有點(diǎn)麻煩，還有輸入那么多東西，就不能再簡單一點(diǎn)嗎？答案是當(dāng)然可以。我們可以用WordPress的Qtag API為文本編輯器添加一個(gè)快捷輸入按鈕，具體是這樣的。

function mxthemes_add_quicktags() { ?>
    <script type="text/javascript">
        QTags.addButton( 'Prism', 'Prism', '\n<pre><code class="language-php">',     '</code></pre>\n' ); //快捷輸入[Prism]標(biāo)簽
    </script>
<?php }
add_action('admin_print_footer_scripts', 'mxthemes_add_quicktags' );

我平時(shí)需要高亮的php語言比較多，所以只添加了一個(gè)php，按鈕名稱為Prism（為了感謝開發(fā)者），如果你還需要高亮其他語言，請(qǐng)自行添加快捷輸入按鈕。

使用小技巧

需要注意的是：Qtags快捷輸入按鈕需要在文本編輯模式下使用，直接粘貼代碼到這里可能會(huì)被WordPress自動(dòng)過濾掉。直接在可視化編輯模式下粘貼代碼，WordPress會(huì)自動(dòng)把代碼里面的符號(hào)轉(zhuǎn)義，這時(shí)候再切換到文本編輯模式下，選中剛才粘貼的代碼，然后狠狠的點(diǎn)一下Prism按鈕就可以了。