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.
Include de javascript:
En als laatste stap heb je de html nodig welke er als volgt uit ziet.
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 <?php
Voor de volledige lijst met html karakters/codes kun je terecht op onze html karakters pagina.