Mocht jij op je site ooit eens code-blocks nodig hebben zoals hieronder:
<?php
echo 'Test code-block';
?>
Dan kun je die op verschillende manieren maken. Met <pre>
en <code>
. Maar met een <table>
en wat CSS kom je ook heel ver, en je kunt zelfs regelnummers toevoegen.
Schrijf je code-blokken zo:
<table class="code-block">
<tr><th colspan=2>Code:</th></tr>
<tr><td>1</td><td><?php</td></tr>
<tr><td>2</td><td>echo 'Test';</td></tr>
<tr><td>3</td><td>?></td></tr>
</table>
En met CSS, voeg dit toe. Hierdoor selecteer je de regelnummers niet als je de code selecteert om het te kopieren.
.code-block td:first-child {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
Eventueel kun je het nog mooier maken door elke andere regel iets donkerder te maken
.code-block tr:nth-child(2n) td {
background: #f1f1f1;
}