How can I make a block list of source code in HTML?

Question

This site contains a list of source code.

Looking into the source code, I get this HTML code.

<pre class="brush: cpp; wrap-lines: false;"> #ifndef PROGRESSSTATE_H_ #define PROGRESSSTATE_H_ class ProgressState { ... #endif /* PROGRESSSTATE_H_ */ </pre> 

It seems to me that css does magic. If so, what should css be for a list of source code? If not, then how to have the source code in HTML?

Answer 1

Perhaps a javascript highlighting library is used, such as syntaxhighlighter .

javascript will get the CSS class name and use the brush value to highlight the contents of the <pre> tag as you see it.

This is done with a lot of changes in the DOM - additional divs and spaces with specific styles.