code voorbeeld aan CSS toevoegen

Zo, tijd geleden dat ik zelf een vraag gesteld heb. :o

Ik maak gebruik van een template van Joomshaper maar vind de opmaak van de code-voorbeeld niet mooi. Dat is volgens mij de standaard Bootstrap versie. Ik zie wel eens opmaak waarbij ook verschillende kleuren worden gebruikt in de code. Ik zoek een oplossing die alleen CSS nodig heeft, het liefst zou ik geen oplossing hebben waarbij nog een javascript-bestand extra ingeladen moet worden.

Een voorbeeld hoe ik het graag zou willen zien is dit:

Je wilt een andere "code syntax highlighting" dan in jouw template gebruikt wordt.
Je gebruikt een template van Joomshaper. Je vind de standaard weergave van hoe in dat template framework "code blokken" worden getoond, niet mooi. Je wil een oplossing waarbij je via CSS (zonder gebruik van JavaScript) de code in codeblokken anders kunt layouten.

Volgens mij ontkom je niet aan JS. Of je moet handmatig de code die je wilt tonen voorzien van span tags die je een class meegeeft en die je individueel stijlt.

Het HTML presentatie framework RevealJS gebruikt voor code highlighting (zie bijv revealjs.com/#/13 ) een JavaScript library:
highlight.js highlightjs.org/usage/

Syntax highlighting, daar zocht ik inderdaad naar. Mijn vermoeden was dat javascript daardoor al nodig zou moeten zijn maar je kan altijd hopen.

Binnenkort maar even daar wat over lezen, bedankt Pe7er!