[Blogger] Syntax-Highlighter ✤✤✤

Halli Hallo :D
Heute möchte ich über Syntax-Highlighting sprechen
Für all diejenigen unter euch, die von Zeit zu Zeit mal Code anzeigen wollen, auf jeden Fall empfehlenswert. Ich hab auf Wordpress-Blogs immer diese tollen Dinger gesehen und wollt unbedingt einen haben.
Vor kurzem habe ich einen gefunden, der relativ einfach auf Blogger funzt, allerdings müsst ihr den Code dafür irgendwo hochladen. Ihr alle mit Google-Konto verfügt über Drive. Das brauchen wir hierfür.
Wer von euch Dabblet kennt, kennt vielleicht auch die Frau dahinter, die den Highlighter gecodet hat. Das ganze nennt sich prism und runterladen könnt ihr das ganze hier.

Wenn ihr auf der Seite seid, klickt auf "Download", ist relativ schwer zu finden, aber ich hab euch Hinweise dagelassen ;P

Hello There :D

Today I wanna talk about Syntax Highlighing.
I've seen them before on wordpress blogs and loved them because they make code a lot easier to read.
A while ago I found one working for blogger. We just have to upload some css and javascript to host it. Since everyone with a blogger has google drive that's what I'm gonna be using for that.
You maybe know Dabblet. The woman behind it is responsible for this highlighter called Prism. You can download it here.

Wenn ihr dort draufklickt, könnt ihr euren Download anpassen. Sucht euch ein Theme aus (ihr könnt durch das klicken auf den jeweiligen Kreis im Seitenkopf Beispiele angucken.
Die Sprachen könnt ihr auch aussuchen, die ihr verwenden wollt. "Markup" ist dabei einfach HTML

Click on download. You can choose a theme and the languages you want to include.

Habt ihr das, ladet ihr JavaScript und CSS auf euren Computer runter.

Download it to your computer

Dann ladet ihr's auf Drive. Entweder über den Knopf oder einfach über den Hochlad-Knopf.

Upload it into Drive.

Damit ihr das nachher einbinden könnt, müssen die Dateien öffentlich gestellt sein. Ich hab das schon gemacht. Aber es geht ganz einfach. Klickt mit der rechten Maustaste (Ctl+Klick für MacUser) auf eure Dateien und geht dann auf Freigeben. Ein PopUp öffnet sich.

In Order to be able to use it, we have to make both of these public

Klickt auf Ändern und dann könnt ihr auf öffentlich stellen.

Im Bild oberhalb von diesem seht ihr, dass ihr einen Link für die Freigabe habt, wenn ihr den öffnet, schaut das in eurem Browser so aus:

You are given a link then, which you can use to share. Open it up.

Damit wir das allerdings nachher verlinken können, brauchen wir nicht diesen Link, sondern den WebViewLink. Ausschaun tut der so.

Ihr nehmt euren Link für die Freigabe, der dann ungefähr so ausschaut:

To be able to use it later we do not need this link but the webviewlink.

Start of with the link you get. It will look something like this.

https://docs.google.com/file/d/0Bz6HRVCs7oBaV2lLcS1WSXJJSDA/edit

Den Teil, den ihr davon braucht, ist das Zahlen und Buchstaben-Gemisch. Das ist die ID des Dokuments. Und den host-Link kann man dann relativ schnell zusammensetzen:

The part you need of that is the composition of letters and numbers. That's the ID of the document. The hostlink now looks like this:

http://googledrive.com/host/ID/

Ausschaun tut's dann so:

Then it'll look like this:

So, macht das für die beiden Dateien und speichert die WebViewLinks.
Dann wechselt ihr in euer Dashboard, unter Vorlage und bearbeitet das HTML

Repeat that for both the CSS and the JS and save the webviewlinks.
Then open up your blogger code.

Sucht nach </head> und fügt darüber folgendes ein:

Search for </head> and paste the following above it

<link href="WEBVIEWLINK_prism.css" rel="stylesheet"></link>

Anschliessend sucht ihr nach </body> und fügt ebenfalls darüber folgendes ein:

Then search for </body> and paste this above it

<script src="WEBVIEWLINK_prism.js"></script>

Dann speichert ihr's und ihr könnt den Highlighter verwenden. Die Verwendung schaut folgendermassen aus:

Ihr encodiert als erstes euren Code.
Für die Anzeige von folgendem schaut das dann so aus:

Save and you can use it.
Now to how to use it.

Fist you have to encode your code
That's what this will look like.

<pre><code class="language-markup">
Encodierter Code
</code></pre>

Und dann packt ihr das ganze zwischen <code>-Tags, denen ihr die Klasse language-NAME gebt.
Für HTML: language-markup
CSS: language-css
etc.

Dann wird euer Code angezeigt. :)

Then wrap it betwen pre and code tags to which you're adding the class "language-NAME"
For HTML: language-markup
CSS: language-css
and so on.

<pre><code class="language-markup">
Encodierter Code
</code></pre>

Ich hoffe das Tutorial war hilfreich. :)

Wie man Code encodiert habe ich bereits einmal in den QTs erklärt... hier

Hope that was helpful. :)