# syntax highlighting [dev](https://lochiwei.gitbook.io/web/master) ⟩ [tools](https://lochiwei.gitbook.io/web/tools) ⟩ syntax highlighting {% hint style="info" %} 在 [HTML](https://lochiwei.gitbook.io/web/html) 中，要實現程式碼的語法高亮 (*syntax highlighting*)，通常可以使用程式碼高亮的 JavaScript 函式庫，例如 [Prism.js](https://prismjs.com/) 或 [Highlight.js](https://highlightjs.org/)。 {% endhint %} {% tabs %} {% tab title="📗 參考" %} * ChatGPT ⟩ 語法高亮實現方法 {% endtab %} {% tab title="📘 手冊" %} * [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) ⟩ [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ⟩ [\

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre), [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
* [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ⟩ [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
  {% endtab %}

{% tab title="🐞 除蟲" %}

#### 多餘的空白:exclamation: 

使用下方介紹的 JavaScript 函式庫時，如果 `` 的寫法如下：

```html

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");

```

呈現出來的樣子像這樣：



網頁上方會出現一個多餘的空白區，這是因為 `` 會「保留所有的換行和空白」，包含 `` 後面的換行，因此在網頁上會呈現一行空白。

***

#### :pill: 解決方法 

{% tabs %}
{% tab title="方法一" %}
手動調整：在 `` 後面接著打，別直接換行。

```html
function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");

```

{% endtab %}

{% tab title="方法二" %}
使用 CSS ⟩ [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) 自動調整樣式

```css
pre {
    /* 保留換行，但去除多餘空白 */
    white-space: pre-wrap; 
}
```

{% endtab %}
{% endtabs %}
{% endtab %}
{% endtabs %}

## 實現方法 

{% tabs %}
{% tab title="🔸 Prism.js" %}
📁 html

```html






function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");


```

{% endtab %}

{% tab title="🔸 Highlight.js" %}
📁 html

```html






function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");

```

{% endtab %}
{% endtabs %}