# syntax highlighting

[dev](../master) ⟩ [tools]() ⟩ syntax highlighting&#x20;

{% hint style="info" %}
在 [HTML](../html) 中，要實現程式碼的<mark style="color:yellow;">語法高亮</mark> (_<mark style="color:purple;">syntax highlighting</mark>_)，通常可以使用程式碼高亮的 JavaScript 函式庫，例如 [Prism.js](https://prismjs.com/) 或 [Highlight.js](https://highlightjs.org/)。
{% endhint %}

{% tabs %}
{% tab title="📗 參考" %}
* ChatGPT ⟩ 語法高亮實現方法&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) ⟩ [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ⟩ [\<pre>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre), [\<code>](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: <a href="#extra-blank" id="extra-blank"></a>

使用下方介紹的 JavaScript 函式庫時，如果 <mark style="color:blue;">`<pre><code>`</mark> 的寫法如下：

```html
<pre><code class="language-javascript">
function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");
</code></pre>
```

呈現出來的樣子像這樣：

<figure><img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FCZ0tjSSThXU0F4kcffTX%2Fcode%20block.png?alt=media&#x26;token=896133f6-d5de-4f44-b900-53697e79815a" alt=""><figcaption></figcaption></figure>

網頁上方會出現一個<mark style="color:yellow;">多餘的空白區</mark>，這是因為 <mark style="color:blue;">`<pre>`</mark> 會「<mark style="color:yellow;">保留所有的換行和空白</mark>」，包含 <mark style="color:blue;">`<pre><code>`</mark> <mark style="color:yellow;">後面的換行</mark>，因此在網頁上會呈現一行空白。

***

#### :pill: 解決方法 <a href="#solution" id="solution"></a>

{% tabs %}
{% tab title="方法一" %}
手動調整：在 <mark style="color:blue;">`<pre><code>`</mark> <mark style="color:yellow;">後面接著打，別直接換行。</mark>

```html
<pre><code class="language-javascript">function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");
</code></pre>
```
{% 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 %}

## 實現方法 <a href="#implement" id="implement"></a>

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

```html
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.js"></script>
</head>

<body>
<pre><code class="language-javascript">function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");
</code></pre>
</body>
```
{% endtab %}

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

```html
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>

<pre><code class="javascript">function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");
</code></pre>
```
{% endtab %}
{% endtabs %}

