javascript - 如何在 HTML 中制作源代码列表 block ？

Question

This site有漂亮的源代码 list 。

查看源代码，我得到了这段 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。