Hogyan lehet helyesen megjeleníteni egy kódblokkot egy HTML weboldalon?

Szeretnék HTML, CSS és JavaScript kódblokkokat megjeleníteni a weboldalamon.

Eredetileg úgy oldottam meg ezt, hogy egy egyszerű p elembe írtam a megjelenítendő kódot, <br> elemmel csináltam sortöréseket és &emsp-vel csináltam "indentálásokat", viszont ez nem annyira praktikus megoldás, és ráadásul a kódblokkot másolva az &emsp-k nem sima space-ként, hanem különleges karakterként másolódnak.

Aztán próbálkoztam a pre elembe ágyazott code elemmel: [link]

Viszont a pre elem a sor eleji whitespace-eket is megtartja: [link]

Ha a pre elemhez hozzáadok egy white-space: pre-line; CSS szabályt, akkor majdnem jó, viszont így a szükséges space-eket is eltünteti a sor elejéről, ez jelenik meg: [link]

Viszont azt szeretném, ha valahogy meg tudnám oldani, hogy a második sorban megmaradjon az "indentálás", vagyis a 2 space:

[link]

Ezt hogy lehetne megoldani? Elsősorban HTML-CSS megoldások érdekelnek, de az se gond, ha egy kis JavaScript is kell hozzá.