Toon code op website – Peppink ICt

Doel

Eenvoudig goed leesbare code met syntax herkenning voor verschillende talen op de website kunnen tonen.

Aanleiding/overwegingen

Code weergeven in een blok met vormgeving en regelnummering lukte aardig met gebruik van CSS. Ik wilde het inspringen van code in stand houden. Dat is nog weer een stukje complexer. Ook oogt het met syntax highlighting net even overzichtelijker en fraaier.
Als het even kan werk ik liever zonder plug-ins, die vaak weer allerlei afhankelijkheden of ongewenste zaken toe kunnen voegen. Onderstaande oplossing was voor mij een fraaie tussenweg.

Voorbereiding

We maken gebruik van prism.js en een prism.css.
Bedenk welke talen en functies je wilt ondersteunen.
Ga naar prismjs.com en selecteer daar de gewenste talen en functies.
Met volgende link zie je de selectie die ik gemaakt heb.
Download vervolgens de daarmee aangemaakte prism.js en prism.css.

Uitvoering

Voor de overzichtelijkheid plaats ik deze bestanden in een gemaakte subdirectory ‘prism’ van mijn child thema.
Pas de rechten voor deze bestanden aan. Ik zet ze op 640 (Eigenaar mag lezen en schrijven. Groep mag lezen).
Voeg onderstaande functie toe aan de functions.php van het child thema.

// Function to add prism.css and prism.js to the site
// from https://startblogging101.com/how-to-add-prism-js-syntax-highlighting-wordpress/
function add_prism() {

   if ( is_single() && has_tag( 'code' ) ) { 
        
        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style 
            get_stylesheet_directory_uri() . '/prism/prism.css' // location of the prism.css file
        );

        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script 
            get_stylesheet_directory_uri() . '/prism/prism.js' // location of the prism.js file
        );

        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');

   }
}
add_action('wp_enqueue_scripts', 'add_prism');

Toelichting bij de regels

5: Zorgt ervoor dat de prism bestanden alleen worden geladen als er een bericht is met ‘code’ als tag. Bij berichten zonder deze tag, of gewone pagina’s zal de code niet worden geladen.
1-2: Uitleg en bron van de functie, waarin ik slechts het pad naar de bestanden heb aangepast.
3: Start de functie, die in regel 24 wordt afgesloten.
8-11: Registreert de css stylesheet die zich in de subdirectory prism bevindt
14-17: Registreert het prism.js bestand.
20-21: Voegen deze registraties toe.
25: Voert de actie uit, waarna de toegevoegde onderdelen zijn aan te spreken.

Optioneel

Pas indien gewenst of noodzakelijk het prism.css bestand aan.
Het is niet mijn grootste liefhebberij om in een eindeloos geneuzel met de instellingen te belanden, maar je ontkomt er niet altijd aan om een aantal zaken aan te passen aan thema en smaak.
Ik heb in het onderstaande blokje gezorgd voor een kleinere letter door de uit gecommentarieerde regel 6 te vervangen voor de regel eronder. Regel 9 is uit gecommentarieerd, omdat ik het nut de schaduw niet begreep, terwijl deze met gewijzigde grijze achtergrond wel problemen van verminderde scherpte gaf. De achtergrond kleur had ik gewijzigd, omdat anders de links niet leesbaar waren en zo kom je van het een in het ander.
Een kleinere regelafstand is gerealiseerd door de uit gecommentarieerde regel 14 te vervangen voor de regel eronder. Daarna heb ik regel 16 en 17 toegevoegd met ‘resize: both;’, zodat het venster aan de rechteronderhoek ook in de breedte te vergroten is.
Tot slot zijn regel 18-22 aangepast, omdat de regelnummers niet meer zichtbaar waren in combinatie CSS instellingen van mijn thema Twenty Twenty One.

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	/*font-size: 1em; changed by Jan Peppink*/
	font-size: 16px;
	text-align: left;
/*	text-shadow: 0 -.1em .2em black;*/
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	/*line-height: 1.5; changed by Jan Peppink*/
	line-height: 1.3;
	/* resize added by Jan Peppink*/
	resize: both;
	/* Added for WordPress ICTDEV where line numbers are disapeared
	 *  because of wp code block in WordPress CSS settings */
	padding: 0;
	overflow-x: visible;
	border: none;

	-moz-tab-size: 3;
	-o-tab-size: 3;
	tab-size: 3;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

En een stukje verder naar onder is de kleur aangepast voor de knoppen die rechtsboven in het venster verschijnen als je er met de muis overheen gaat. De uit gecommentarieerde regels 4 is de kleur vervangen voor de achtergrondkleur van de website. Regel 7, 8 en 9 zijn uit gecommentarieerd, zodat de melding van de taal niet meer op een knop lijkt.
Zo maar even een paar voorbeeldjes van aanpassingen van het uiterlijk. Daarnaast heb ik kleuren van de diverse tekst elementen aangepast om de leesbaarheid te verbeteren in combinatie met de eigenschappen die al automatisch vanuit de thema instellingen worden overgenomen.

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
	color: #f5efe0; /* Lichte kleur Peppink ICt */
	font-size: .8em;
	padding: 0 .5em;
	/*background: #cd2653; /* Accent Peppink ICt kleur */ 
	/*box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);*/
	/*border-radius: .5em;*/
}

Test

Maak een nieuw bericht.
Voeg een ‘<> code’ paragraaf toe
Plak de code die je wilt tonen in het gemaakte blok.
Voeg bij de eigenschappen van het blok, rechts onder bij Geavanceerd -‘Extra CSS-classes’ zonder aanhalingstekens ‘language-xxxx’ en voor de regelnummers ‘line-numbers’ toe. Daarbij staat xxxx voor de (afkorting van) de programmeertaal die wordt gebruikt. b.v. language-batch line-numbers, of language-php line-numbers, of language-css line-numbers
Aan het bericht wordt vervolgens de tag ‘code’ zonder aanhalingstekens toegevoegd.