Wie wende ich Syntaxhervorhebung auf Codefragmente in meinen HTML- und CSS-Dateien an?

Question

Ich habe vor kurzem angefangen, HTML und CSS zu lernen.

Wenn ich <code></code> verwende, wird es nur als einfacher Schwarzweißtext angezeigt, obwohl ich mir wünschte, dass die Syntax automatisch entsprechend hervorgehoben würde.

So sieht es derzeit aus:

text = "Hello World!"
print(text)

Ich möchte, dass es so aussieht:

text = "Hello World!"
print(text)

Kann dies nur mit HTML und CSS erreicht werden?

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进行处理。

有各种库可供使用。