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

Question

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

Изучая исходный код, я получаю этот HTML-код.

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

#ifndef PROGRESSSTATE_H_
#define PROGRESSSTATE_H_

class ProgressState {

  ...

#endif /* PROGRESSSTATE_H_ */

Мне кажется, что CSS делает магию.Если да, то как должна выглядеть CSS, чтобы получить список исходного кода?Если нет, как можно получить исходный код в HTML?

Answer 1

Вероятно, он использует библиотеку подсветки JavaScript, такую ​​как syntaxhighlighter .

. JavaScript подберет имя класса CSS и использует значение brush, чтобы выделить содержимое <pre> пометить так, как вы это видите.

Это сделано с большим количеством изменений в DOM - дополнительные div и span с определенными стилями.