Da ich hier über Webentwicklung schreiben möchte, muss ich auch immer wieder Codeschnipsel einfügen und um auch bei längeren Codestücken nicht den Überblick zu verlieren, werden diese in der Regel eingefärbt. Das erhöht die Lesbarkeit der Codezeilen und setzt sich besser vom übrigen Text ab, hilft also auch zur Textstrukturierung.
<!-- html Grundgerüst -->
<html>
<head>
<title>Titel der Website</title>
</head>
<body>
<h1>die erste Überschrift</h1>
<p>Lorem ipsum dolor sit amet..</p>
</body>
</html>Es gibt dafür das ein oder andere Plugin, da ich mir aber für diese eigentlich recht simple Sache nicht unnötig Ballast anschnallen möchte, habe ich mir eine individuelle Lösung zusammen gesucht. Mit Hilfe des Javascriptes Highlight.js werden meine Codezeilen innerhalb von <pre><code> ... </code></pre> um ein paar <span>-Elemente bereichert, die ich dann über CSS-Klassen einen eigenen Style zuweisen kann. Unterstützt werden die gängigen Sprachen, schön ist, ich kann mir diejenigen raussuchen, die ich auch tatsächlich benötige und nicht mehr.
Auch von Highligh.js wird direkt ein WordPress Plugin angeboten, es geht aber auch anders, da mir ja die Einbindung der Javascript- und CSS-Datei völlig ausreicht. Meine functions.php sieht dementsprechend derzeit so aus:
<?php
$templatepath = get_bloginfo( 'template_directory' );
wp_enqueue_style(
'code-style', $templatepath.'/css/default.css'
);
wp_enqueue_script(
'my-script',
$templatepath . '/js/highlight.pack.js',
array(),
'',
true
);
function init_highlighting_on_load() {
echo "<script type=\"text/javascript\">hljs.tabReplace = ' ';hljs.initHighlightingOnLoad();</script>";
}
add_action( 'wp_footer', 'init_highlighting_on_load' );
?>weiterführende Ressourcen:
16 Javascript Syntax Highlighting Scripts
Code Converter von Frank Bültge