Um Abschnitte, in denen Code angezeigt werden soll, sofort als solche erkennbar zu machen, setze ich einen Rahmen drumrum und markiere den Rahmen mit der Angabe der Code-Art, die sich darin befindet (z.B. HTML oder CSS). Wie ich das mache, erkläre ich folgend und da ich dazu auch Code anzeige, sieht man auch gleich das Ergebnis.
Erst trage ich folgende div-Container im HTML-Modus des Posts ein:
<div class="markierung">
HTML oder CSS
</div>
Hier Einfügen des kopierten Codes
</div>
Anschließend ersetze ich das "Hier Einfügen des kopierten Codes" im Verfassen-Modus durch den Code, den ich anzeigen lassen will.
Damit HTML-Code angezeigt und nicht befolgt werden wird, habe ich zuvor unter "Optionen" > "HTML-Text anzeigen" gewählt. Wenn man das einmal eingestellt hat, gilt das auch für jeden nächsten Post, den man schreibt, solange man die Einstellung nicht mehr ändert. Der Code, den man nun im Verfassen-Modus einfügt, wird automatisch so eingetragen, wie das nötig ist, damit er nicht ausgeführt wird. Statt des Symbols der spitzen Klammer wird vom Verfassen-Modus aus in den HTML-Modus z.B. automatisch eine bestimmte Zeichenfolge eingetragen. Das müsste man im HTML-Modus selbst machen, wenn man nicht "HTML-Text anzeigen" eingestellt hätte.
Man sollte den Code aber keinesfalls reintippen, sondern immer reinkopieren; denn, wenn man innerhalb des div-Bereichs einen Zeilenumbruch mittels Enter macht, wird an der Stelle der div-Code geschlossen und ein neuer geöffnet. Jedes Enter startet also einen neuen Rahmen. Das sieht man erst in der Vorschau oder (schlimmer) nach dem Veröffentlichen.
Die folgenden CSS-Kommandos habe ich unter "Design > Erweitert > CSS hinzufügen" für die Klassen "code" und "markierung" eingetragen:
.code {
margin: 10px 0;
box-shadow: inset 0px 0px 5px #001550;
border: 1px solid #001550;
border-radius: 15px;
padding: 0px 5px 20px 5px;
}
/* Markierung, um oben rechts innerhalb des Rahmens die Art des Codes zu nennen - z.B. HTML oder CSS */
.markierung {
text-align: right;
font-weight: bold;
}
/* Schriftfarbe für die Markierung unter .code */
.code .markierung {
color: #001550;
}
Ich nutze die Markierung auch in mindestens einem anderen Rahmen. In dem ist eine andere Textfarbe nötig. Deshalb habe ich hier die Textfarbe auf die Klasse "markierung" unterhalb der Klasse "code" beschränkt.
Erst trage ich folgende div-Container im HTML-Modus des Posts ein:
HTML
<div class="code"><div class="markierung">
HTML oder CSS
</div>
Hier Einfügen des kopierten Codes
</div>
Damit HTML-Code angezeigt und nicht befolgt werden wird, habe ich zuvor unter "Optionen" > "HTML-Text anzeigen" gewählt. Wenn man das einmal eingestellt hat, gilt das auch für jeden nächsten Post, den man schreibt, solange man die Einstellung nicht mehr ändert. Der Code, den man nun im Verfassen-Modus einfügt, wird automatisch so eingetragen, wie das nötig ist, damit er nicht ausgeführt wird. Statt des Symbols der spitzen Klammer wird vom Verfassen-Modus aus in den HTML-Modus z.B. automatisch eine bestimmte Zeichenfolge eingetragen. Das müsste man im HTML-Modus selbst machen, wenn man nicht "HTML-Text anzeigen" eingestellt hätte.
Man sollte den Code aber keinesfalls reintippen, sondern immer reinkopieren; denn, wenn man innerhalb des div-Bereichs einen Zeilenumbruch mittels Enter macht, wird an der Stelle der div-Code geschlossen und ein neuer geöffnet. Jedes Enter startet also einen neuen Rahmen. Das sieht man erst in der Vorschau oder (schlimmer) nach dem Veröffentlichen.
Die folgenden CSS-Kommandos habe ich unter "Design > Erweitert > CSS hinzufügen" für die Klassen "code" und "markierung" eingetragen:
CSS
/* Rahmen für das Anzeigen von Code */.code {
margin: 10px 0;
box-shadow: inset 0px 0px 5px #001550;
border: 1px solid #001550;
border-radius: 15px;
padding: 0px 5px 20px 5px;
}
/* Markierung, um oben rechts innerhalb des Rahmens die Art des Codes zu nennen - z.B. HTML oder CSS */
.markierung {
text-align: right;
font-weight: bold;
}
/* Schriftfarbe für die Markierung unter .code */
.code .markierung {
color: #001550;
}
Ute Ziemes, 13021961.blogspot.de
,
Kommentare
Kommentar veröffentlichen