Как сделать блок листинга исходного кода в HTML?

Question

Этот сайт имеет красивый список исходного кода.

Глядя в исходный код, я получаю этот код 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 с определенными стилями.