如何在我的HTML和CSS檔案中為程式碼片段應用語法高亮？

Question

我最近開始學習HTML和CSS。

當我使用<code></code>時，它只會顯示為普通的黑白文本，雖然我希望它能自動適當地突出顯示語法。

它目前的樣子是這樣的：

text = "Hello World!"
print(text)

我希望它看起來像這樣：

text = "Hello World!"
print(text)

只用HTML和CSS能實現嗎？

Answer 1

編號

---

需要更詳細的標記和CSS。

例如：

var {
  color: blue;
}

code.operator {
  color: red;
}

code.literal {
  color: purple;
}

code.function-call {
  color: green;
}

<pre><code class="python"><var>text</var> <code class="operator">=</code> <code class="literal">"Hello World!"</code>
<code class="function-call">print(<var>text</var>)</code>

---

要以自動的方式完成，需要涉及程式語言。您可以在將程式碼傳遞給瀏覽器之前使用它進行預處理，或者在頁面載入後使用客戶端JavaScript進行處理。

有各種函式庫可供使用。