Betriebssysteme, Programme & Web

Anzeigen von Code in Wordpress

Wenn man ein Wordpress Blog zum Thema Computer hat – so wie wir – kommt es mal vor, dass man bestimmten HTML-Code in einem Artikel anzeigen möchte, ohne dass er ausgeführt wird.

Meistens hinterlegt man diesen einfach mit einer bestimmten Formatierung um ihn von dem restlichen Text abzuheben. Dies geschieht mit dem Tag „code“.

<code></code>

Dabei steht man nur vor dem Problem, dass der Inhalt in diesem Code-Tag weiterhin ausgeführt wird. Ein eingefügtes Bild würde also weiterhin angezeigt werden.

Um dies zu verhindern, gibt es einen sehr einfachen Trick. Ihr müsst die Sonderzeichen der HTML-Tags einfach auch als Sonderzeichen behandeln. Soll heißen, ihr gebt die Sonderzeichen in ISO 8859-1 Codierung ein.

Um jetzt beispielsweise den Quelltext eines Bildlinks zu posten, müsst ihr also in dem Quelltext eures Artikels folgendes stehen haben:
<code>&lt;a href="https://basic-tutorials.de"&gt;&lt;img title="Basic Tutorials" alt="Basic Tutorials – Hardware, Software & Gaming" src="https://basic-tutorials.de/wp-content/uploads/2012/12/BT_hor.jpg" width="468" height="60" /&gt;</code>

Ich habe in dem Fall nur die Zeichen „<“ und „>“ durch den ISO 8859-1 Code ersetzt. Dies sollte ausreichen um zu verhindern, dass der Code ausgeführt wird.

Wenn man die Sonderzeichen nicht angibt, würde folgendes herauskommen:
Basic Tutorials – Hardware, Software & Gaming

Hier zum Abschluss jedoch noch mal die wichtigsten Codes zum Anzeigen des Quelltextes in eurem Artikel:

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
“ = &#34;
‚ = &#39;

Weitere Codes findet ihr im Selfhtml-Verzeichnis.

 

Ich hoffe dies hilft euch beim Posten von Tutorials zum Thema HTML, CSS etc. Solltet ihr Fragen haben, scheut euch nicht sie zu stellen!

Simon Lüthje

Ich bin der Gründer dieses Blogs und interessiere mich für alles was mit Technik zu tun hat, bin jedoch auch dem Zocken nicht abgeneigt. Geboren wurde ich in Hamburg, wohne nun jedoch in Bad Segeberg.

Ähnliche Artikel

Schreibe einen Kommentar

Schaltfläche "Zurück zum Anfang"