Wie kann ich Quellcode Listing Block in HTML machen?

Question

This site hat die hübsche Quellcode-Liste.

Blick in den Quellcode bekomme ich diesen HTML-Code.

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

#ifndef PROGRESSSTATE_H_ 
#define PROGRESSSTATE_H_ 

class ProgressState { 

    ... 

#endif /* PROGRESSSTATE_H_ */ 
</pre> 

Es scheint mir, dass das CSS die Magie tut. Wenn ja, wie sollte das CSS aussehen, um die Quellcode-Liste zu haben? Wenn nicht, wie ist der Quellcode in HTML?

Answer 1

Es ist wahrscheinlich mit einer Javascript-Hervorhebung Bibliothek wie syntaxhighlighter.

Das Javascript wird den CSS-Klassennamen übernehmen und den brush Wert verwenden, um den Inhalt des <pre> Tags so zu markieren, wie Sie es sehen.

Es ist mit vielen Änderungen am DOM - zusätzliche Divs und Spannen mit bestimmten Stilen getan.