Wordpress Problem mit code und pre Tags

Viele Wordpress-Benutzer haben massive Probleme mit dem code bzw pre tag, da beide oftmals nur sehr umständlich und je nach Theme sogar gar nicht das tun was man gerne hätte.

Das Problem: in code und pre Tags wird html ausgeführt und nicht einfach nur dargestellt. Es gibt da die umständliche Lösung bei der man alle relevanten Zeichen von Hand umwandelt, das ist aber anstrengend und kostet viel Zeit.

Ich ziele darauf ab den pre (oder code) Tag zu verwenden und das ohne Einschränkungen von Wordpress.

Zuerst wird der Pre/Code Tag (wenn er es nicht schon sein sollte), per CSS gestyled damit er im Text auch hervorgehoben wird, hier lasse ich jedem freie Hand biete aber ein simples Beispiel welches per Customizer im Bereich Zusätzliches CSS eingetragen werden kann.

/*Pre-Box-Design*/
pre {
	font-family: "Lato", sans-serif;
	padding: 10px 20px;
	border: 1px solid #e6e6e6;
	border-left: 3px solid #2e6d9e;
	border-radius: 8px;
	background: #fff;
	font-size: 1em;
	margin: 15px;
}
/*Code-Box-Design*/
code {
	padding: 10px 20px;
	background: #e6e6e6;
	font-size: 1em;
	margin: 15px;
	display: inline-block;
}

Nun wird in die functions.php eures Themes (ebenfalls über Design – Editor zu erreichen) folgendes ganz unten reinkopiert (alternativ kann der Link zum passenden Plugin verwendet werden, den findet ihr ganz am Ende vom Artikel!)
/*pre tag erziehen damit es html anzeigt und nicht ausführt*/
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}
function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

Jetzt werden alle HTML-Codes ebenfalls korrekt angezeigt.

PS ein Problem das ich eben beim Schreiben des Artikels hatte: wenn man innerhalb eines pre Tags versucht etwas darzustellen was ebenfalls einen pre tag enthält zerschießt sich alles, daher ist bei mir um diesen Part der code Tag im Einsatz, den ich zugegebenermaßen ungerne verwende da er aus Leerzeilen gerne mal einen neuen Code-Tag macht und es dann alles gestückelt anzeigt. Das macht Pre nicht.

Genau die selbe Bearbeitung erfolgt nun nocheinmal (bestenfalls direkt darunter) für das code Tag, welches ebenfalls HTML einfach ausführt anstatt es anzuzeigen.

/*code tag erziehen damit es html anzeigt und nicht ausführt*/
add_filter( 'the_content', 'code_content_filter', 0 );

function code_content_filter( $content ) {
	return preg_replace_callback( '|<code.*>(.*)</code|isU' , 'convert_pre_entities', $content );
}

function convert_code_entities( $matches ) {
	return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

Anschließend sollten alle code und pre Tags HTML-Code anzeigen anstatt ihn auszuführen.

ACHTUNG: nach einem Update des Themes muss auch der Code neu eingebunden werden, da dieser unter Umständen wieder entfernt wurde! Falls euch das zu nervig ist, installiert doch einfach das Plugin hier.