Highlight.js 为每个 <code> 标签使用特定的 css 文件答案

【问题标题】：Highlight.js using a specific css file for each <code> tagHighlight.js 为每个 <code> 标签使用特定的 css 文件
【发布时间】：2012-08-27 17:31:04
【问题描述】：

我正在使用 highlight.js 语法高亮我的代码。目前，所有代码都根据 css 文件“xcode.css”突出显示。但是，我想知道如何通过设置<pre><code> 标记的lang 属性，使用特定的css 文件来突出显示代码？目前，代码只通过在标题中导入一个css文件来突出显示。

<link rel="stylesheet" href="js/highlight/styles/xcode.css">
<script src="js/highlight/highlight.pack.js" type="text/javascript"></script>

例如，以下代码将使用 css 文件 'js/highlight/styles/xcode.css'：

<pre><code lang="xcode">#import "Testing.h"</code></pre>

【问题讨论】：

标签： javascript jquery html css syntax-highlighting

【解决方案1】：

您可以使用这样的属性选择器包装您想要的任何特定样式：

pre code[lang="xcode"] {
    /* xcode specific styles */
}

然后，您可以将这些样式保存在相同的 xcode.css 或新的 css 文件中并将其链接到标题中。

这是一个小提琴演示：http://jsfiddle.net/stevenschobert/vpMEJ/

【讨论】：

谢谢，有没有一种方法可以测试多种语言，例如 lang="xcode" || lang="php" || lang="mysql"?
是的，你可以用逗号分隔你的目标：pre code[lang="xcode"], pre code[lang="php"], pre code[lang="mysql"] {} 。
嗯，我正在尝试以下方法，但如果我使用 lang="php"，我会在页面上附加一个随机样式：jsfiddle.net/Y6FEM
您需要在两个值中包含完整的选择器路径。例如你有pre[lang='php'], pre[lang='css'] .tex .formula {}，你需要pre[lang='php'] .tex .formula, pre[lang='css'] .tex .formula {}。否则，您可以使用 LESS 或 SASS 之类的预处理器来避免重复。