Categorie├źn
Wordpress-Website

Toon code op website

Toon code met syntax highlighting en regelnummers.

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 het prism.css bestand naar wens aan.
    Ik heb in het onderstaande blokje gezorgd voor een kleinere letter door de uit gecommentarieerde regel 6 te vervangen voor de regel eronder. Een kleinere regelafstand door de uit gecommentarieerde regel 14 te vervangen voor de regel eronder. Daarna heb ik regel 16 toegevoegd met ‘resize: both;’, zodat het venster aan de rechteronderhoek ook in de breedte te vergroten is.
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: both; /* added by Jan Peppink*/

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-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, 8, 10 en 22 zijn de kleuren vervangen voor de kleuren van de website, zodat het daar meer eenheid heeft en met wat meer contrast beter leesbaar is.
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
	/*color: #bbb; changed by Jan Peppink */
	color: #f5efe0;
	font-size: .8em;
	padding: 0 .5em;
	/*background: #f5f2f0; changed by Jan Peppink */
	background: #cd2653;
	/*background: rgba(224, 224, 224, 0.2); changed by Jan Peppink */
	background: rgba(205, 38, 83, 1.0);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
	/*color: inherit; changed by Jan Peppink */
	color: #FFFFFF;
	text-decoration: none;
}

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.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *