10 mins read ‧ 2022/07/15 難

如何讓你的文章支援程式碼高亮 – Prism.js

---

前言

因為最近寫 Blog 經常用使用到程式碼

用預設 <pre> 跟 <code> 標籤

無法滿足需求

1. 程式碼沒有依照不同語言進行高亮

2. 沒有複製功能(我之前自己寫過這功能，但少了上面這個，是個問題)

後來上網搜尋相關資訊，就找到了 Prism.js 這個 Library

 

什麼是 Prism.js

官方網站：https://prismjs.com/

Prism 是一款輕量級、可擴展的語法高亮工具，在構建時考慮了現代 Web 標準。它被用於數百萬個網站，包括您每天訪問的一些網站。

綜上所述

1. Prism.js 可以判斷不同程式語言高亮
2. 提供多種風格以及語法，WordPress 常用的 HTML, CSS, php, Javascript 當然也都有支援
   所有支援語言可以看這裡
3. 可以實現一鍵複製

 

依照需求下載 Prism.js

 

 

如何安裝到 WordPress

將 prism.js 跟 prism.css 放到 WordPress 中

我的案例目錄是 wp-content\themes\主題名稱\assets\prismjs

 

使用 WordPress 的 Hook 機制添加

將下列程式碼添加到你主題/子主題底下的 functions.php

function yc_equene()
{
    //只在文章時載入
    if ( get_post_type() == 'post' ){
        //PrismJS 程式碼高亮，prism.js需要在footer載入
        wp_enqueue_script('prismjs', get_stylesheet_directory_uri() . '/assets/prismjs/prism.js#asyncload', array(), '1.0', true);
        wp_enqueue_style( 'prismjs', get_stylesheet_directory_uri() . '/assets/prismjs/prism.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'yc_equene');

並且我們加入了一個條件，只在 post_type 是 post 時載入(即，只有文章會有這個需求，這樣可以避免在其他頁面時也載入，就可以減輕網頁的體積)

對於其他函式不熟的朋友們，可以使用 WordPress Codex 查詢

做到這一步，你已經成功將 prism.js 添加到你的網頁上了

可以通過 F12 或 右鍵的檢查元素 來查看是否有載入

 

如何在文章中使用

只要將你的代碼，用下方這種 html 結構包住就好

<pre>
  <code class="language-xxx">
    //你的程式碼
  </code>
</pre>

裡面的 class="language-xxx" 其中 xxx 代表程式語言

例如 class="language-php"代表裡面可以識別 php 代碼

每個語言對應 xxx 的方式請參考官方網站，即下圖黑色框框類的文字

範例

<pre>
  <code class="language-php">
    //我的 php 代碼
  </code>
</pre>