How to style ? Pre-Code

Hallo meine Lieben, heute wage ich mich an mein erstes Tutorial, das euch helfen soll Tutorials zu erstellen. Häufig ist es ja so, dass man mal den quellcode angeben will, mit dem man zeigt was man einsetzten/verändern kann/muss. Nur klappt das nicht wirklich so, wie man das will. Direkt klar ist, wir müssen die Codes 'Postable' machen. Es dürfen also keine eckigen Klammern mehr drinne sein oder andere html-Tags, da sie sonst wie solche interpretiert werden. Natürlich könntet ihr auch immer screenshots machen aber eigentlich ist das ziemlich umständlich und auch für die Leser schwierig, da man nicht einfach per copypaste- den entsprechenden Teil benutzen kann. Also zeige ich heute eine Möglichkeit das zu umgehen. Dafür nutzen wir den <pre>-tag. Dieser tag ist ideal, da er die Formatierung nicht ändert, das heißt Einrückungen wie ihr sie im quellcode eures Blogs findet, bleiben haargenauso. Also ideal wenn eure Leser etwas per copypaste verwenden können.

Als erstes machen wir uns dann jetzt an die Formatierung dieses tags und danach an die Benutzung. Für die Verwendung ist es wahrscheinlich besser wenn ihr grundlegend Ahnung von html habt. Für Anfänger ist es etwas schwieriger aber schaffbar.

1. Formatierung Teil 1

pre {
background-color: #eeeeee;   
color: #333333;
border: 2px dotted #cdcdcd;
font-family:Courier,monospace;
font-size: 13px;
padding: 5px 0px;
}

(so sieht der fertige pre-tag später aus)

background-color: Farbe, den der Hintergrund des gesamten pre-tags haben soll

color: Schriftfarbe

border: Soll es einen Rahmen geben ? dotted = gepunktet

font-family: Soll eine bestimmte Schritart genutzt werden ?

font-size: Wie groß soll die Schrift im pre-tag sein ?

padding: Soll es innerhalb des tags einen Abstand geben ? Die erste Zahl gibt den Abstand nach oben/unten an, die zweite nach rechts/links

Dieses Teil kopiert ihr nun in euren Css Teil  mit Vorlage > Html bearbeiten > mit Strg F nach

]]></b:skin>

suchen und direkt davor einsetzen.

2. Formatierung Teil 2

Nun haben wir noch keinen automatischen Zeilenumbruch dabei, der natürlich sinnvoll ist. Wir erweitern den ersten Teil also mit:

 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;

Hier brauchen wir für alle Browser einen extra code, da alle es etwas anders verwenden darum: Hier nichts verändern !

3. Verwendung

Nun ist die Formatierung fertig und wir können den code verwenden.

Wir gehen also in den Post und auf html. Nun setzt ihr folgendes ein:

 <pre><code> Euer html/css code </code></pre>

Euer html/css code ersetzt ihr natürlich. Bei den HTML-Codes ist es nur wichtig, dass er 'postable' ist. Einfach so wie er ist, könnt ihr ihn nämlich nich verwenden. Da es per Hand sehr umständlich sein kann, empfehle ich euch Postable von Elliot Swan. Wichtig ist dann nurnoch, dass ihr die angepassten html codes auch wirklich im html-modus eingebt. Bei den css-codes könnt ihr sie im Verfassen- oder im HTML-Modus einfügen.

Ich hoffe ich konnte das halbwegs verständlich erklären, wenn ihr noch Fragen habt, wie immer einfach per Kommentar melden. Habt ihr vielleicht sonst noch Wünsche, was ich im Bereich Webdesign erklären kann ? Immer her damit.