Der Editor von Blogger.com ist für mich für die meisten Dinge völlig ausreichend, allerdings möchte ich die Codeblöcke in meinem Blog gut lesbar formatieren.
Ich habe mehrere Möglichkeiten gefunden dies zu tun, leider ist so etwas ganz einfaches nicht dabei. Quasi als meinen Notizzettel, habe ich die Möglichkeiten, die ich so gefunden habe mal aufgeschrieben.
Generell unschön finde ich, dass man für alle Varianten vom "Verfassen" Modus in den "HTML" Modus wechseln muss, aber nur so kann man den für die Formatierung notwendigen HTML Code direkt eingeben. Eine andere Möglichkeit habe ich nicht gefunden.
Copy & Paste
Zunächst mal gibt es ein paar Seiten, die bieten einen "Code Formatierer" an.
Man kopiert seine Code Zeilen in die Zwischenablage, wechsel auf die Seite mit dem Formatierer und fügt sie in ein spezielles Fenster wieder ein. Man kann hier meist ein paar Optionen einstellen und beim Drücken eine Knopfes wird in einem weiteren Fenster die Formatierung gezeigt und in einem Dritten kann man den HTML Code kopieren und die Formatierten Codezeilen so einfach in seine Blog an die gewünschte Stelle einfügen.
Das geht eigentlich alles sehr simpel und benötigt überhaupt keine Vorbereitung.
Eine relative schlichte Optik kann man auf dieser Seite erzeugen:
http://codeformatter.blogspot.de/2009/06/how-to-format-my-source-code-for.html
Codezeile eins
Codezeile zwei
Sehr auffällig und bunt geht es auf dieser Seite:
http://hilite.me/
Template oder Vorlage editieren
Etwas aufwendiger ist es die Stylesheets zu editieren. Dabei wird ein Stück HTML Code in der Vorlage zum Blog (die austauschbar ist und die Optik des Blogs wesentlich bestimmt) eingebaut und an entsprechender Stelle wird dann lediglich noch ein
HTML-Tag eingefügt. Der Code zur Formatierung wird zentral abgelegt und der Code Block bloß mit einem Kurzen Tag gekennzeichnet. Das hat noch den Vorteil, man kann das Aussehen der Formatierung an einer Stelle für den gesamten Blog ändern. Dazu ein einfaches Beispiel, welches auf
diesen Artikel basiert.
Mit Hilfe von dem Tag
textarea kann man eine kleine Box einfügen:
Einfach folgenden Code in der HTML Ansicht einfügen
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE GOES HERE
</textarea>
Das Ergebnis sieht so aus:
Der Vorteil dieses kleinen Textrahmens ist, das man ihn in der normalen Editor Ansicht sieht. Er hat in der Editor Ansicht auch "editierende" Eigenschaften:
Man kann an der kleinen Ecke unten rechts ziehen und den Rahmen optisch anpassen. Es wird dabei automatisch dieser HTML Code zwiswchen rows= und wrap eingefügt:
style="height: 64px; margin: 0px; width: 301px;"
Man kann hier eine definierte Höhe und Breite eintragen, oder anstatt mit Pixeln(px) auch mit auto oder 100% arbeiten.
Um eine Codebox als CSS in den Blog einzufügen, muss man folgendes tun:
- Am Dashboard anmelden und links auf Vorlage navigieren.
- Unter der Vorlage auf Anpassen klicken
- Links oben auf Erweitert und daneben nach unten scrollen und auf Add CSS klicken
- In dem Fenster Benutzerspezifisches CSS hinzufügen gibt man den unten stehenden Code Block ein
- Anschließend oben rechts auf "Auf Blog anwenden" drücken.
Jetzt kann man Seinen Code Block in der HTML Ansicht einfach mit diesen Tags "einrahmen":
Großer Nachteil: Den Erfolg sieht man erst in der Vorschau, in der normalen Editor Ansicht sieht man leider nichts und man muss verdammt aufpassen wenn man mal was korrigiert. Zwei Parameter sorgen für wichtige Eigenschaften:
- overflow: auto - bewirkt, dass Scrollbalken angezeigt werden, sobald die max-height überschritten wurde.
- white-space: nowrap - sorgt dafür, dass kein automatischer Textumbruch stattfindet.
Code Block
Java Script einbetten
Eine relativ elegante Methode ist die Formatierung mit dem Javascript Prettify, der Quellcode und Beschreibung findet man hier:
https://github.com/google/code-prettify
Als erstes muss man den Script Code im Blog verfügbar machen. Dazu muss man nicht die Vorlage editieren, man kann es einfach im Layout einbetten. Dazu fügt man im Layout (Dashboard/Layout) einfach an unauffälliger Stelle ein Gadget hinzu. Man wählt das Gadget "HTML/JavaScript konfigurieren" aus der Liste aus, gibt den Titel PrettyPrint ein und im Content wird folgender Code eingefügt:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
Die Code Blöcke werden in der HTML Ansicht einfach in
eingepackt. Jetzt wird abhängig von der Programmiersprache auch entsprechend hervorgehoben.
Feintuning
Kombination aus Prettify und Codeformatter
Damit der Text gut lesbar bleibt, sollten Code Passagen nicht allzu lang sein, bzw. sollte man sie im Text in Scrollboxen optisch einkürzen. Dazu verwende ich einfach noch die style Eigenschaft aus dem Codeformatter. Das style Attribute height:auto passt das Fenster der Anzahl Zeilen automatisch an, das Attribute max-height:300px; begrenzt die Box und fügt Scrollbalken ein.
<pre class="prettyprint" style="height: auto; max-height: 300px; overflow: auto; width: auto;">
Code Block
</pre>
Der style Teil kann mit in das beschriebene Gadget eingefügt werden:
<style>
pre {
height: auto;
max-height: 300px;
overflow: auto;
width: auto;
}
</style>
Damit der Code einfach markiert werden kann wird noch ein spezieller Code tag eingefügt:
<pre class="prettyprint"><code contenteditable="true">Code Block
</code></pre>
Quelle
Hier ein Beispiel, dies ist kein funktionierender Code!:
#!/bin/bash
# Laufzeit des Scripts messen
# Zeitmessung Start.
REAL_STARTTIME=$(date +%s) #(($STARTTIME - $PRE_NETWORK_DURATION))
echo ""
echo "Installation started at $(date --date="@$REAL_STARTTIME" --utc)."
#Grundlage für FHEM installieren
apt-get update && apt-get -y install libdevice-serialport-perl libwww-perl libio-socket-ssl-perl
#Meine Pakete installieren
apt-get -y install bluez libcrypt-rijndael-perl libdigest-sha-perl libgd-graph-perl libgd-text-perl libimage-info-perl libimage-librsvg-perl libjson-perl libjson-xs-perl libmime-base64-perl libnet-ssleay-perl libnet-telnet-perl libnet-telnet-perl libnet-upnp-perl libsoap-lite-perl libsoap-lite-perl libxml-parser-lite-perl mplayer msttcorefonts samba samba-common-bin sendEmail telnet
# Manuelle Installation
# wget https://debian.fhem.de/fhem.deb
# dpkg -i fhem.deb
# von debian.fhem.de installieren
# Erstmal https für apt nachinstallieren
# https Transport installieren und Sourcellisten sichern
apt-get -y install apt-transport-https
wget -qO - https://debian.fhem.de/archive.key | apt-key add -
cp /etc/apt/sources.list /etc/apt/sources.list.bak
# Manuelle Installation
# wget https://debian.fhem.de/fhem.deb
# dpkg -i fhem.deb
# von debian.fhem.de installieren
# Erstmal https für apt nachinstallieren
# https Transport installieren und Sourcellisten sichern
apt-get -y install apt-transport-https
wget -qO - https://debian.fhem.de/archive.key | apt-key add -
cp /etc/apt/sources.list /etc/apt/sources.list.bak
# Manuelle Installation
# wget https://debian.fhem.de/fhem.deb
# dpkg -i fhem.deb
# von debian.fhem.de installieren
# Erstmal https für apt nachinstallieren
# https Transport installieren und Sourcellisten sichern
apt-get -y install apt-transport-https
wget -qO - https://debian.fhem.de/archive.key | apt-key add -
cp /etc/apt/sources.list /etc/apt/sources.list.bak
# reboot
Oder mit Zeilenummer:
<pre class="prettyprint linenums" style="height: auto; max-height: 300px; overflow: auto; width: auto;">
Code Block
</pre>
Formatierung über Gist und GitHub
Für Powershell funktioniert prettyprint leider nicht sehr gut. Ich habe eine einfache Möglichkeit hier gefunden
https://gist.github.com/ Die ist
hier kurz beschrieben.
Leider ist die Hervorhebung von Powershell auch nicht optimal. Größter Nachteil ist: Beim Erstellen des Blogbeitrages sieht man vom Code gar nichts.
Um die Höhe der Scriptfenster etwas zu begrenzen kann man im css Bereich noch etwas konfigurieren (
Blogbeitrag):
.gist .blob-wrapper.data {
max-height:300px;
overflow:auto;
}
Ob man das Alles noch eleganter machen kann, weiß ich derzeit noch nicht.
Zeilenumbruch
Manchmal ist es nützlich in HTML Ansicht Zeilenumbrüche einzufügen um an einer definierten Stellen Leerräume in der Normalen Ansicht zu haben. Einfach diesen Tag einfügen
<br />
