Run je een blog over web development en wil je graag code in je blogberichten delen? Vanwege veiligheidsredenen filtert WordPress standaard ‘raw code’ uit blogberichten, widgets en reacties. Gelukkig is er een uitstekende oplossing waarmee je code wél zichtbaar kunt maken in je blogberichten, namelijk de SyntaxHighlighter Evolved plugin.
De SyntaxHighlighter Evolved plugin installeren
Download en installeer de plugin en ga naar Settings > SyntaxHighlighter om de instellingen te configureren. De standaard instellingen werken prima voor de meeste websites, maar het is raadzaam om toch even alle instellingen na te lopen. Elke optie is voorzien van een gedetailleerde beschrijving om uit te leggen wat het doet. Zodra je klaar bent klik je op de ‘Save changes’ knop.
Werking van de SyntaxHighlighter Evolved plugin
De SyntaxHighlighter Evolved plugin maakt gebruik van simpele shortcodes om de code weer te geven. Voor elke programmeertaal of scripttaal moet je je code in de shortcode voor die taal ‘wrappen.’
Voor PHP ziet dat er zo uit:
[php]
<?php
echo “Hello World”;
?>
[/php]
Dit komt er dan als volgt uit te zien in je blogbericht:
<?php
echo “Hello World”;
?>
Voor CSS wrap je je code als volgt:
[css]
.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}
[/css]
Dit komt er dan als volgt uit te zien in je blogbericht:
.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}
De SyntaxHighlighter Evolved plugin zal de code voor de betreffende programmeertaal highlighten. Ook regelnummers en tab inspringing worden netjes afgehandeld. Zo kunnen je gebruikers heel gemakkelijk stukjes code van je WordPress site kopiëren en plakken.
Thijs Verhoeven (1985) is een WordPress specialist en online marketeer. In 2012 richtte hij WP handleiding op en schreef hij onder andere de WordPress Handleidingen. WP Handleiding ontstond omdat Thijs ervan overtuigd is dat iedereen tegenwoordig zelf een website moet kunnen bouwen. De handleidingen, waar je ook 6 maanden lang gratis de laatste versie van ontvangt, helpen hierbij.
Ik ben nog steeds niet helemaal vertrouwd met code op zich, maar als ik dit zo lees hoeft het eigenlijk helemaal niet moeilijk te zijn. Bedankt voor deze blog!