使用 PrismJS 幫程式碼區塊上色教學

Prism.js 是一個輕量的程式碼區塊上色工具 (Syntax Highlighting),使用方法相當簡單,接下來我們會一步步的帶你將它引入到你的專案內。

1. 到 prismjs.com 下載 JS 和 CSS

第一步你要先到 prismjs.com 的下載頁面下載 JS 和 CSS 檔案,這個頁面可以讓你客製化勾選樣式主題、想要支援哪一些程式語言以及你想要的額外外掛。

我這邊避免麻煩會直接選擇所有語言,至於外掛的部分則看你的需求勾選。

勾選完成後可以在最下方點選 Download JS 和 Download CSS 得到 prism.js 和 prism.css 檔案

2. 將 prism.js 和 prism.css 引入到你的專案內

因為每一種專案開發方式都不一樣,不過 JS 和 CSS 引入的方法不外乎就是使用 HTML script 和 link 標籤。當你把檔案放到你的專案內後,你可以類似像這樣引入他們

<script src="prism.js"/>
<link rel="prism.css" />

3. 接下來只要在程式碼中使用

<pre><code class="language-json">{
    "datatable_code": "TWN/APRCD",
    "table_code": "TWN/APRCD",
    "format": "json",
    "opts": {
        "columns": [
            "coid",
            "mdate",
            "open_d",
            "high_d",
            "low_d",
            "close_d",
            "volume",
            "amount",
            "adjustment_factor"
        ]
    },
    "filters": {
        "mdate": {
            "$gte": "2019-01-01",
            "$lte": "2019-01-31"
        },
        "coid": {
            "$in": [
                "Y9999"
            ]
        }
    }
}</code></pre>