如何在我的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进行处理。

有各种库可供使用。