Het standaard [Code] blok van WordPress is niet bruikbaar om code voorbeelden te tonen op je website.
Om programma code wel goed weer te geven zou het tenminste het volgende moeten ondersteunen:
- Syntax kleuren voor: C#, HTML, CSS, javascript, typescript, powershell PHP
- Een kopieerfunctie zodat bezoekers de code kunnen overnemen
- De plugin mag geen fouten of waarschuwingen veroorzaken in de w3 validator
De crayon-syntax-highlighter is afgevallen omdat deze al 5 jaar niet is bijgewerkt.
syntaxhighlighter is afgevallen omdat de functie voor het kopiëren van code ontbreekt.
Ik heb gekozen voor de enlighter plugin. Wat slordig van deze plugin is dat de code blokken niet mooi worden weergegeven in de WordPress block editor. Ondanks dit schoonheidsfoutje is deze wel goed te gebruiken en ziet het resultaat voor de bezoekers van je website er gelikt uit.
Een mooi extraatje is dat je blokken kunt groeperen. Op je pagina krijg je dan 1 blok te zien met tabbladen.
static void Main(string[] args)
{
Console.WriteLine("Hello, world!");
Console.ReadLine();
}
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
<script> alert( 'Hello, world!' ); </script>
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Write-Host 'Hello, World!'
Leave a Reply