如何让源码列表在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

它可能正在使用诸如syntaxhighlighter之类的javascript加亮库。

javascript将选取CSS类名称，并使用brush值突出显示<pre>标记的内容。

它是通过对DOM的大量更改来完成的-附加的div和span具有特定的样式。