如何仅用HTML和CSS实现代码片段的语法高亮？

仅用HTML和CSS可以实现代码语法高亮，但没办法自动完成——你必须手动给代码中需要高亮的部分（比如字符串、关键字、变量）添加HTML标签，再用CSS定义对应样式。

具体实现步骤：

• 给<pre>标签添加语言类（比如你期望的lang-py），方便针对不同编程语言编写专属样式
• 把代码里需要区分高亮的片段用<span>包裹，给不同类型的代码段加专属类名（比如字符串用string、关键字用keyword、函数名用function）
• 通过CSS类选择器，给不同类名的代码设置颜色、字体样式等

举个针对你提供的Python代码的实现示例：

改造后的HTML结构 #

<pre class="lang-py"><code><span class="variable">text</span> = <span class="string">"Hello World!"</span>
<span class="function">print</span>(<span class="variable">text</span>)
</code></pre>

对应的CSS样式 #

/* 代码块基础样式 */
pre.lang-py {
  background-color: #f6f8fa;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
}

/* 字符串高亮 */
.lang-py .string {
  color: #006633;
}

/* 变量高亮 */
.lang-py .variable {
  color: #005cc5;
}

/* 函数名高亮 */
.lang-py .function {
  color: #6f42c1;
}

这种方式的局限性很明显：需要手动标记每一段需要高亮的代码，对于大段代码来说效率极低。如果想要自动识别语法并高亮，必须借助JavaScript库，但这已经超出纯HTML+CSS的范畴了。

内容的提问来源于stack exchange，提问作者Brodie