如何在HTML中创建源代码列表块？

Question

This site有漂亮的源代码列表。

查看源代码，我得到了这个HTML代码。

<pre class="brush: cpp; wrap-lines: false;">

#ifndef PROGRESSSTATE_H_
#define PROGRESSSTATE_H_

class ProgressState {

  ...

#endif /* PROGRESSSTATE_H_ */
</pre>

在我看来，css是神奇的。如果是这样，那么拥有源代码列表的css应该是什么样子？ 如果没有，那么在HTML中使用源代码的方法是什么？

Answer 1

可能正在使用javascript突出显示库，例如syntaxhighlighter。

javascript将获取CSS类名称，并使用brush值以您看到的方式突出显示<pre>标记的内容。

对DOM进行了大量更改 - 包含特定样式的其他div和span。