语义、标准和使用“lang”标记中源代码的属性

Question

我无法找到以下内容的权威解释、微格式或指南，所以我将其开放。如果我错过了什么，请说出来！

假设您有一个 HTML 页面，其中在

 元素中包含一些编程源代码的示例：（

<pre>
    # code...
</pre>

更新：正如 Pekka 下面指出的， 可能比

 更好，但以下示例/讨论可以适用于两者。正如 Brian Campbell 指出的那样，这两个元素当然都应该使用。对于预格式化代码）

现在：如何以语义正确且符合规范的方式声明

 块内容的编程语言？

这将是有用的信息，可以以语义一致的方式包含在标记中。

从语义的角度来看，显而易见的选择是使用 lang 属性：

<pre lang="ruby">

But 根据 HTML 4 规范，第 8.1.1 节：

lang 属性的值是一个语言代码，用于标识自然语言[...]计算机语言被明确排除在语言代码之外。

（强调我的）

此外，“ruby”无论如何都不是标准语言代码。

该规范确实允许使用 x 主标记添加“实验”或“私人使用”代码。规范中的示例是 lang="x-klingon"。

理论上，您可以使用 x-ruby、x-java 等来声明

 块中包含的编程语言– 除了规范似乎不赞成在一般编程语言中使用 lang 属性。

有关该主题的 HTML 5 规范 没有让事情变得更清楚。规范本身没有明确提及“自然”语言与“编程”语言。相反，它让读者参考 BCP 47，其中（再次）指出：

语言标签用于帮助识别语言[...]，但不包括主要用于人类交流的语言，例如编程语言。

然而，它继续提到（第 56 页，第 4.1 节）zxx 主要语言子标签，其中：

标识语言分类不合适或不适用的内容。一些示例可能包括器乐或电子音乐 [...] 或编程源代码。

（强调我的）

同样，规范似乎自相矛盾，但它开启了使用 zxx-x-ruby（或类似）作为完全符合规范的方式来声明某些内容的可能性用一种语言（只是不是人类语言）编写并声明所涉及的特定（非人类）语言。

那么，关于该做什么，是否有任何类似的标准/微格式/微语法/君子协议/任何事情？

就我个人而言，我喜欢 zxx-x-ruby 因为它是最完整的。当然，x-ruby 本身更短、更整洁，但除非我弄错了，否则

 块仍然会继承其父级的主要语言（例如en 或 fr 或类似的）。

---

附录：

正如 Pekka 在下面提到的， 标签可能更合适，并且从语义上来说，简单地说 非常简洁lang="...">。然而， 标签也是一个内联元素，我最初只考虑更长的源代码运行，即声明所有 的语言> 元素包含在块级

 元素中。

幸运的是，lang 属性是全局的，可以应用于任一元素，因此任一元素都可以工作。

第二：我不小心在各处输入了“zzx”，而不是正确的“zxx”！这是一个“z”，两个“x”。对于造成的混乱表示歉意。

Answer 1

要回答这个问题，我们应该看两件事：任何潜在的相关规范，以及现实世界中实际做了什么。您已经提到了相关规范对 lang 属性的规定；它通常用于指示所引用内容的人类语言，而不是编程语言。虽然 BCP 47 提到了非语言内容的 zxx 标签，但我认为使用 lang 属性和 zxx 并不真正合适> 用于指定编程语言的子标签。原因是大多数源代码实际上具有一些语言内容，这些内容是自然语言的；注释、变量名、字符串等。可能应该使用 lang 属性来指示这些，特别是在使用 CJK 字符（其中字体选择可能基于 lang 属性）的情况下。代码示例中包含的编程语言实际上与其中包含的人类语言正交；将两者混为一谈可能会导致混乱，而不是清晰。

因此，让我们检查一下 lang 属性替代方案的规范。正如 Pekka 在另一个答案中指出的那样， 元素在标记源代码方面比

 元素在语义上更有意义，所以让我们检查一下。根据 HTML5 规范：

code 元素表示计算机代码的片段。这可以是 XML 元素名称、文件名、计算机程序或计算机可以识别的任何其他字符串。

尽管没有正式的方法来指示所标记的计算机代码的语言，但希望使用所使用的语言标记 code 元素的作者，例如，以便语法突出显示脚本可以使用正确的规则，可以通过向元素添加一个前缀为“language-”的类来实现。

...

<块引用>

以下示例展示了如何使用 pre 和 code 元素来标记代码块。

var i: 整数；
开始
   我：= 1；
结束。
该示例中使用类来指示所使用的语言。
  

现在，这不是正式的规范，只是关于如何使用类来指示所表示的语言的非正式建议。该示例还演示了如何使用

 标记和  标记来标记代码块。

我们可以在其他地方寻找任何类型的标准，但我还没有找到；没有用于代码格式化的微格式，并且我没有找到任何其他规范提到它。因此，我们继续讨论人们实际做的事情。发现这一点的最好方法是查看 HTML 语法突出显示库的作用，因为它们是嵌入到网页中的代码的主要生产者和消费者，而网页中的语言实际上很重要。

HTML 语法荧光笔主要有两种类型：那些在服务器上或离线运行、使用 Ruby、Python 或 PHP 运行并生成要由浏览器显示的静态 HTML 和 CSS 的程序，以及那些用 JavaScript 编写的程序，它们查找并突出显示

或客户端的  元素。第二类更有趣，因为他们需要从提供给他们的 HTML 中检测语言；在第一类中，您通常通过 API 或通过特定于您的 wiki、博客或 CMS 语法的某种机制手动指定语言，因此没有实际使用者使用可能嵌入 HTML 中的任何语言信息。为了完整起见，我们将看看这两个类别。

对于 JavaScript 语法荧光笔，我找到了以下内容，以及用于指定代码块及其语言的语法示例：

• SyntaxHighligher< /a>:

  ...

  。似乎完全忽略了如何使用 class ，通过引入自己的基于 CSS 语法的 class 属性语法，并使用 brush 关键字来指示语言。还可以选择使用

• Highlight.js：

  ...

  或 class="language-html" 或

   上的相同内容。这为您提供了多种选择，其中一种对应于 HTML5 规范中的建议，另一种则简单地使用裸语言名称作为类名称。

• SHJS：

  ...

  < /代码>。在类中使用自己的语言名称前缀，并且仅适用于

  ，不适用于其他元素。

• beautyOfCode：< ;pre class="code">...。基于 SyntaxHighlighter，但语法不太奇怪。需要带有 code 类的

   标记和带有指示语言的类的 code 标记。

• 辣椒：。 ..。仅使用 标记，并使用裸语言作为类名。
• Lighter.js：

  ...< /代码>。使用裸语言作为类名。您可以使用 API 选择要应用的元素，但示例在 
   标记上演示了它。
  

• DlHighlight：

  ...

  。使用裸语言作为类名。您可以通过 API 选择要突出显示的元素类型（示例使用 pre）以及要查找的 name 属性值，以指示您想要语法突出显示。我认为这是对 name 属性的滥用。

• google-code-prettify：

  .使用以 lang- 为前缀的类名来指定语言，并使用类 prettyprint 来指示您想要语法突出显示。语言课是可选的；如果未指定，它将尝试自动检测语言。

• JUSH：... 或 ...。使用 code 标记，类中的语言以 jush- 或 language- 为前缀。
• 彩虹：

  .. .

  使用自定义属性 data-language，应用于 元素或 < code>

   元素，以支持像 Tumblr 这样删除  元素的网站。

• Prism：

  ...< /code>

  遵循嵌套

   和  的 HTML5 规范以及类名的建议。

对于基于服务器和离线语法荧光笔，大多数（CodeRay、紫外线、Pygments、Highlight) 根本不会在其输出的 HTML 中嵌入任何语言信息。 GeSHi 是我发现的唯一嵌入该语言的语言，如

...

，一个

 标记，以裸语言名称作为类。

在这份清单中，似乎没有达成真正的共识。最流行的选择是仅使用裸语言名称作为类。下一个最流行的方法是使用某种形式的前缀语言名称，即以库名称、lang- 或 language- 为前缀。有一些有自己奇怪的约定，或者根本不在 HTML 中指定语言。

虽然唯一足以成为事实标准的共同点是使用裸语言名称作为类，但我建议使用 HTML5 规范建议的内容，类名称为 language- 后跟语言的名称。一些语法荧光笔支持这一点，其余的可能可以轻松修改以支持它。与仅将语言名称作为类相比，它更不那么含糊，也不太可能与其他类发生冲突。而且，即使没有正式指定，也至少在规范中提到。

我还会使用 标记来指示源代码，可以是裸露的，也可以嵌入

 标记中；  标记和 language- 前缀类的组合可用于指示您拥有特定语言的源代码，并且可用于指示您希望它被突出显示，并且比语法突出显示库使用的其他一些指示符更清晰且更好地匹配元素的语义。对于无法使用  标记的情况，例如嵌入仅接受有限 HTML 子集（如 Tumblr）的网站，只需使用 
 标记可能是最好的。

 编辑添加：CommonMark 规范，它试图标准化 Markdown，以便实现可以互操作，在给定相同输入的情况下生成相同的 HTML，也采用了这个建议的约定。它将 围栏代码块 添加到 Markdown，并用 ``` 包围 或 ~~~，这比基于缩进的代码块更容易使用。紧随开放栅栏之后的是 信息字符串，其定义为：

可以在开放代码围栏后提供信息字符串。开头和结尾的空格将被去除，并且以 language- 为前缀的第一个单词将用作 code 的 class 属性的值> 元素位于封闭的 pre 元素内。

检查实际实现的作用也很有启发性。 在 Babelmark 上尝试隔离代码块显示了支持隔离代码块的实现（并非所有实现都支持，因为它是原始 Markdown 的扩展），我们看到以下细分：

 showdown、blakfriday、haskell markdown: 
...

标记为：< code>
...

 commonmark、parsedown、cebe/markdown: 
 ...

小气，最小值：
...< ;/pre>

 pandoc: 

...< /code>

 （相当矫枉过正）
 Maruku: 
... 


查看其他转换为 HTML 的文档标记语言并对代码块有一些了解：

 AsciiDoc: 
...
< /代码>;只是使用 Pygments 来突出显示，并且不在 HTML 中包含语言信息。
 rst2html 给了我 
...
，用 Pygments 突出显示。
 Sphinx：


...


< /code>，也用 Pygments 突出显示。

因此，总的来说，不同项目的选择有相当大的多样性，但似乎确实有一些朝着标准化 

... 方向发展的运动;
。

Answer 2

似乎没有比滥用 lang 属性和您提到的 zzx 前缀更好的方法了（顺便说一句，有趣的发现！）。 type 属性可能稍微合适一点，但它在 pre 元素中当然无效。

顺便说一句， (W3C参考此处）可能比更合适<前>：

HTML 代码元素 () 表示计算机代码的片段。默认情况下，它以浏览器的默认等宽字体显示。