Code snippets met colorcoding op je website

Home » Tutorials » Code snippets met colorcoding op je website

Wil je graag op je website codes die je gemaakt hebt laten zien? Dan kun je met prism eenvoudig snippets toevoegen aan je pagina. Prism JS kun je gratis en voor niets downloaden op de website: prims js.

Een stukje code toevoegen met prism js ziet er als volgt uit:

p { color: red }

Wat heb je nodig om dit voor elkaar te krijgen

Include de stylesheet:

<link rel='stylesheet' href='/js/prism.css' media='all' />

Include de javascript:

<script type="text/javascript" src="/js/prism.js"></script>

En als laatste stap heb je de html nodig welke er als volgt uit ziet.

<pre><code class="language-markup">
alert('Welkom op mijn website!');
</code></pre>

In de code tag geef je "language-taal" mee waarbij taal vanalles kan zijn zoals:
none
markup
php
phpdoc
javascript
html
svg
css
json
python
go
perl
jaml
De complete lijst kun je vinden op de prism website.

Mogelijke problemen

Soms kan het nodig zijn om haakjes om te zetten met html codes, omdat php bijvoorbeeld word omzet of omdat je gebruik maakt van een template engine zoals smarty of twig.

Dit doe je door bijvoorbeeld <?php om te zetten in &lt;?php Voor de volledige lijst met html karakters/codes kun je terecht op onze html karakters pagina.