syntax highlighting

Previoustooltip NextHTML

Last updated 6 months ago

Was this helpful?

syntax highlighting

⟩ ⟩ syntax highlighting

在中，要實現程式碼的語法高亮 (syntax highlighting)，通常可以使用程式碼高亮的 JavaScript 函式庫，例如或。

ChatGPT ⟩ 語法高亮實現方法

多餘的空白

使用下方介紹的 JavaScript 函式庫時，如果 <pre><code> 的寫法如下：

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

呈現出來的樣子像這樣：

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

手動調整：在 <pre><code> 後面接著打，別直接換行。

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

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

實現方法

📁 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>

📁 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>

Previoustooltip NextHTML

Last updated 6 months ago

Was this helpful?

syntax highlighting

syntax highlighting

多餘的空白

實現方法

多餘的空白

解決方法

實現方法

解決方法