WordPress非插件使用Prism.js實(shí)現(xiàn)代碼高亮

對(duì)于技術(shù)控的朋友來(lái)說(shuō)，平日總要寫(xiě)幾段代碼來(lái)裝裝逼。
市面上也比較多代碼高亮插件，各種各樣。前端時(shí)間蘇醒網(wǎng)站改版也沒(méi)集成代碼高亮的功能。今天有點(diǎn)時(shí)間就研究了下，發(fā)現(xiàn)Prism.js這個(gè)輕量級(jí)的JavaScript代碼高亮很好耍！Prism.JS也大部分流行的編程語(yǔ)言，并且支持多種主題樣式，只需要引用CSS文件和JS文件即可完成。
好東西要分享，果斷分享給大家。

第一步：將下面的代碼復(fù)制到funcations.php中。

 function add_prism() {
        wp_register_style(
            'prismCSS',
            get_stylesheet_directory_uri() . '/prism.css' //自定義路徑
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism.js'   //自定義路徑
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

以上工作結(jié)束后，就可以實(shí)現(xiàn)代碼高亮了。
對(duì)，就這么簡(jiǎn)單。

第二步：編輯文章時(shí)，使用文本模式，輸入下面的代碼。

<pre class="language-c"><code class="language-c"> ?code_here </code></pre>

（language-c中，紅色字體可修改任意語(yǔ)言，但必須保留language-，如language-php）

使用技巧

如果你想每行代碼前帶序號(hào)，只需要在<pre>標(biāo)簽中加class="pure-highlightjs" 即可。

Prism.js文件下載

[download-button ]官網(wǎng)[/download-button][download-button ]蘇醒特供款[/download-button]