Jörg Marzinzick

Im Entenpfuhl 3
34630 Gilserberg
Handy: 0152 2752 4177
E-Mail: j.marzinzick@googlemail.com
joerg-marzinzick.de
html5 und css3 spielereien
Im Entenpfuhl 3 34630 Gilserberg
<< Prev 1. 1 2 3 4 5 6 7 ... ... 7. Next

Tutorial

Prism is ein mächtiges Werkzeug zu Darstellung von Quelltext aller Art im Browser, dabei kommt es mit wenig eigenem Quellcode, geschrieben in Javascript und css, aus. Die erzielten Ergebnisse sind unglaublich gut, auf dieser Seite werde ich versuchen, einige grundlegende Konzepte für die Anwendung von prism zu beschreiben. Die Seite gliedert sich wie folgt:

Eigenschaften

Prism bietet die Möglichkeit Quelltext so darzustellen, dass man ihn sofort als solchen erkennt und sich in der vertrauten Entwickelungsumgebung wähnt. Schriftart, Farbe des Hintergrundes und optionale Zeilennummern machen das möglich. Zusätzlich werden Schlüsselwörter, Variablen, Konstanten etc. farbig hervorgehoben, was ebenso mit ganzen Textpassagen (background highlighting) möglich ist.

Download

Die Autorin, Lea Verou, bietet prism auf ihrer Webseite zum Download an. Man kann hier zunächst auswählen, welches Paket man für sich verwenden möchte. Zur Auswahl stehen die "development" sowie die "minified" Version. Dann entscheidet man sich für eine Farbpalette (ich habe die "default" Version gewählt), danach kann man die unterstützten Scriptsprachen auswählen (in meinem Fall html, css, js, sql und php). Schließlich wählt man die optionalen Plugins, wie Zeilennummerierung, das Einbinden ganzer Dateien via data-Attribut oder das Zeilen highlighting. Der prisim.js core wird als Basis automatisch generiert, die gewählten Optionen werden hinzugefügt. Im Anschluß werden die entsprechenden Dateien zum Download bereitgestellt.

Code direkt

Das Einbinden von prism erfolgt wie gewohnt, im <link href="prism.css"/> Tag wird die css-Datei notiert und die Javasript Datei im <script src="prism.js"><script> Tag. Der darzustellende Text wird in einen Block <pre><code></code></pre> eingebunden. Der Codeblock wird nun noch um die fehlenden Klassen ergänzt, ich habe mich zunächst auf die Auswahl der darzustellenden Scriptsprache, das Hervorheben von einzelnen Zeilen und die Zeilennumerierung beschränkt. Die Zeilennummern werden im <pre> Tag aktiviert, die Implementerung der Scriptsprache erfolgt im <code> Tag. Alle zusätzlichen Angaben erfolgen ebenfalls im <pre> Element.

				

Externe Files

Das Einbinden externer Files ist bei längeren Codeabschnitten die bessere Alternative, das Notieren der Scriptsprache mit dem class="language-xxx" Attribut entfällt in diesem Fall, ebenso der <code> Block selbst.

				

Zeilen

"Highlighting" von Code funktioniert nur in <pre><code></code></pre> Blöcken und wird mit dem data-line="" Attribut im <pre> Tag gesetzt. Es können einzelne Zeilen "3,5,7" oder mehrere Zeilen "3-7" markiert werden. Ebenso sind beliebige Kombinationen möglich "2,4,6-8". Whitespaces sind erlaubt und werden entfernt. Beim Einbinden externer Dateien entfällt das <code></code>Segment.

In manchen Fällen ist es notwendig Code zu kürzen, dann ist es möglich, die Numerierung für das Highligthing mit einer anderen Zeile zu beginnen. dieses Offset wird mit dem data-line-offset Attribut definiert.

				

Zeilennummern

Die Zeilennumerierung kann nur in <pre><code></code></pre> Blöcken erfolgen und wird initiiert, indem die Klasse class="line-numbers" dem <pre> Element hinzugefügt wird. Ausserdem kann der Beginn der Numerierung mit einer anderen Ziffer als "1" erfolgen data-start="-5".

				

Aktive Links

URLs und emails werden automatisch via Javascript in aktive Links umgewandelt, dazu muß nur das zugehörige Plugin als js-Datei eingebunden werden. Links in Kommentaren werden ebenfalls in aktive Links umgewandelt.

				

Scriptsprache

Die Scriptsprache kann durch das Einbinden eines zusätzlichen Javascript Plugins eingeblendet werden. dazu wird beim Einbinden externer Dateien die Dateiendung herangezogen, bei Inline - Code die Klasse des <code class="language-xxx"> Elements.

				

Einige Beispiele

Und er schaffte es bis zum Hohlweg, war kaum klein und breit im Hohlweg verschwunden, da kletterten auch schon lang und dünn <pre> die beiden anderen, die inzwischen die Ziegelei besucht haben mochten, über den Horizont, stiefelten sich so lang und dünn, dabei nich einmal mager über den Lehm, daß meine Großmutter wiederum nicht die Kartoffel spießen konnte; denn so etwas sah man nicht alle Tage, daß da drei Ausgewachsene, wenn auch verschieden gewachsene, um Telegrafenstangen hüpften, der Ziegelei fast den Schornstein abbrachen und dann in Abständen, erst klein und breit dann dünn und lang, aber alle drei gleich mühsam, zäh und immer mehr Lehm unter den Sohlen mitschleppend, frischgeputzt durch den vor zwei Tagen vom Vinzent gepflügten Acker sprangen und im Hohlweg verschwanden.

<pre><code class="language-css">p { color: red }</code></pre>

Und er schaffte es bis zum Hohlweg, war kaum klein und breit im Hohlweg verschwunden, da kletterten auch schon lang und dünn <pre> die language-xxxx beiden anderen, die inzwischen die Ziegelei besucht haben mochten, über den Horizont, stiefelten sich so lang und dünn, dabei nich einmal mager über den Lehm, daß meine Großmutter wiederum nicht die Kartoffel <pre></pre> spießen konnte; denn so etwas sah man nicht alle Tage, daß da drei Ausgewachsene, wenn auch verschieden gewachsene, um Telegrafenstangen hüpften, der Ziegelei fast google-analytics Schornstein abbrachen und dann in Abständen, erst klein und breit dann dünn und lang, aber alle drei gleich mühsam, zäh und immer mehr Lehm unter den Sohlen mitschleppend, frischgeputzt durch den vor zwei Tagen vom Vinzent gepflügten Acker sprangen und im Hohlweg verschwanden.

<< Prev 1. 1 2 3 4 5 6 7 ... ... 7. Next