spring naar de tekst

Hoe laat je code zien in HTML?

Hoelaat je een stukje code (bijvoorbeeld Javascript) zien op een website? Hoe stop je dit in de HTML? Daar heb je twee TAG's voor <pre> en <code>. Je start met de <pre>-tag en daar stop ik dan de <code>-tag in. Alle 'rare' code (in dit voorbeeld Javascript) gaat tussen de <code>-tag. De <pre>-tag is voor het gebruik van 'preformatted' tekst en zorgt evoor dat de code precies zo wordt getoont zoals gerschreven in de HTML. Alle tabs en spaties worden exact overgenomen. Kijk bij MDN <pre>-tag voor meer informatie over de <pre>-tag. De <code>-tag geeft aan dat er een stukje computercode wordt getoont. Standaard wordt er door de browser het lettertype monospace gebruikt. Kijk bij MDN <code>-tag voor meer informatie over de <code>-tag.

Het enige nadeel is dat een sceenreader deze code gelijk gaat oplezen. Voor de bezoeker is het wel handig om te weten waar de code voor dient en in welke taal deze is. Ik heb geen handig manier gevonden om dit te doen. Uiteindelijk heb ik er voor gekozen om een span-tag met daarin de tekst: "Voorbeeld Javascript code" toe te voegen. Vervolgens heb ik deze met CSS uit beeld geplaatst, aangezien de code ter decoratie dient. Geef de span geen display: "none" anders is deze alsnog onzichtbaar voor de screenreader. Ik heb ook een H2 geprobeerd, je mag echter geen H2 in een <code> of <pre>-tag plaatsen. Een ARIA-LABEL lukt ook niet goed. Dus is het een span geworden.

Daarnaast wilde ik het er ook nog mooi en geformatteerd uit laten zien, dus ingesprongen en met kleuren zoals in een IDE (stukje software speciaal om in te programmeren, zoals VS-code) met een syntaxhighlighter (vaak een plugin die bepaalde woorden kleuren geeft zodat het overzichtelijk wordt). Ik had gezien dat dit op een site werd gebruikt. Dus ik met de DEV-tools in de code gedoken en geprobeerd dit na te maken. Kostte me behoorlijk veel tijd en echt goed lukte het ook niet.

Tot ik ging Googelen en op ene site kwam die het over een NPM-package had om dit voor elkaar te krijgen. Aangezien ik PUG (HTML templating engine)en Webpack (bundler) (jazeker zelf geschreven) gebruik kon ik dat makkelijk invoegen. Als je ook nog Babel (compiler) gebruikt dan kun je zelfs alleen de functies opnemen die je ook daadwerkelijk gebruikt.

Voorbeeld Javascript codeconst moveOut = () => {
  let overlay = 1;
  return overlay;
}

In de PUG code ziet het er dan zo uit: pre.language-javascriptcode.language-javascriptspan Voorbeeld Javascript codeconst moveOut = () => { let overlay = 1; return overlay;}

Er zijn waarschijnlijk veel meer packages om dit te doen maar ik heb Prism.js gebruikt. Er zijn meerdere manieren om het te gebruiken. Je kunt een CDN gebruiken maar ook de commandline.

Met npm install prismjs kun je het pakket installeren. Daarna heb ik een nieuw Javscript bestand gemaakt en daar met import Prism from 'prismjs'; het pakket geïmporteerd. Daaronder zet je: Prism.highlightAll(); In principe werkt het nu al.

Als je echter maar een enkele functionaliteiten wilt gebruiken dan raad ik je aan om nog een NMP-package te installeren babel-plugin-prismjs. Je kunt nu in je Babel.config.js (moet je wel ook Babel hebben geïnstalleerd) de boel configureren.

Op mijn Github pagina kun je zien hoe Babel.config.js er uit ziet. Bij languages kun je instellen welke talen de plugin moet stijlen. Er is ook een waslijst aan plugins en je kunt ook nog diverse thema's(zie rechtsboven) gebruiken. css moet op true staan als je theme wilt laten werken.

Ik geeft toe het kost even tijd maar dit scheelt wel weer een afbeelding, een HTTP-request en de laadtijd van de pagina is weer ietsje sneller geworden.Gepubliceerd op 21 februari 2020 door Renee de Kruijf