使用 Highlight.js 套件為程式碼區塊上色

Others
,

建立專案

建立專案。

1
2
npm create vite@latest highlight-js-example -- --template vanilla
cd highlight-js-example

安裝套件。

1
npm install highlight.js

修改 index.html 檔，引入主題樣式。

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.css">

修改 main.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import './style.css'
// 載入模組
import hljs from 'highlight.js/lib/core';
// 按需載入語言包
import javascript from 'highlight.js/lib/languages/javascript';

// 註冊語言
hljs.registerLanguage('javascript', javascript);

const code = `function greet() {
  console.log("Hello, World!");
}`;

document.querySelector('#app').innerHTML = `<pre style="text-align: left;">
<code>${code}</code>
</pre>`;

// 渲染
hljs.highlightAll();

啟動本地伺服器。

1
npm run dev

前往 http://localhost:5173/ 瀏覽。

程式碼

參考資料