Beispiel-Code in WordPress richtig formatiert anzeigen

/ Autor: Albrecht, 04 Jul 2008

WordPress bietet zwar im Editor mit der <code>...</code>-Syntax scheinbar eine Möglichkeit, Code in einen Beitrag einzubauen. Doch leider werden hier die Formatierungen, insbesondere Leerzeichen und Tabs, nicht korrekt übernommen. Dieses Problem kann mit der Verwendung von <pre>...</pre> umgangen werden.

Bei der Verwendung von <pre>...</pre> wird vom Browser die Formatierung exakt so wiedergegeben, wie Sie im Quelltext steht. Also Vorsicht bei langen Zeilen, diese werden auch als eine einzige Zeile dargestellt und können evtl. das Layout zerstören.

Mit dieser Anpassungen in den Styles wird der Quelltext dann auch noch optisch vom restlichen Beitrag abgerenzt:

pre {
	border: 1px solid #DADADA;
	background-color: #F5F5F5;
	color: #888888;
	padding: 8px;
}

Weitere Informationen, wie man Code passend in seine Beiträge integrieren kann, sind direkt bei WordPress zu finden.

This entry was posted on Freitag, Juli 4th, 2008 at 8:46 and is filed under HTML / CSS, WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.