Syntaxhighlighter

Op deze site worden veelvuldig scripts getoond. Nu is er één ding dat erg lastig is in Html en dat is het weergeven van scripts. Zo moeten alle punthaken vervangen worden en ook het inspringen is iets waar html niet op berekend is. Gelukkig zijn er een paar manieren waarop het al een stuk beter gaat. De eerste is het gebruik van pre-tags: <pre> en </pre> dus. Dat maakt het al een heel stuk leefbaarder. Maar het kan nog mooier: Er bestaat een JavaScript-toepassing de zogenaamde Syntaxhighlighter. Het heeft wel wat voeten in de aarde maar als je alle stappen netjes volgt dan heb ook wat. Ten eerste moet je een JavaScript hoofdbestand includen, dan een bijbehorend css bestand en dan nog een aantal die je kunt kiezen. Ten eerste voor ieder taal een aparte brush (ik heb ze hier voor Html(Xml), JavaScript, CSS en PHP. Ook moet je voor een bepaalde stijl kiezen d.w.z. het gebruik van kleuren voor de verschillende tekstelementen. Hier heb ik het defaultbestand gekozen; ik heb geen speciale wensen maar ik vind het wel erg plezierig als het niet allemaal zwart is. Nu moet je het hele script plaatsen tussen "<script type="syntaxhighlighter" class="brush: js"><![CDATA[" en "]]></script>" Het enige wat nog nodig is, is één regeltje javascript om de boel te starten: <script type="text/javascript">SyntaxHighlighter.all();</script> . Als je vooraf je script mooi laat formatten door bijv. Netbeans (alt-shift-f) dan ziet het er prachtig uit. O ja, de highlighter moet weten wat voor type script het is. Dat geef je aan bij class="brush: js" hier moet je i.p.v. 'js' dus 'html', 'css' of 'php' invullen. Wees secuur, als er ook maar iets verkeerd staat gaat het niet goed. Het blijkt dat als je php-code opneemt dat je dan wel de <?php en de ?> moet weghalen anders wordt dit als uitvoerbare php-code geïnterpreteerd en op dezelfde manier mag je in html-code geen <script>-tag opnemen.

Een voorbeeld


Is het geen plaatje? Je kunt het zo copiën en pasten.