Blogger και κώδικας

...και πάνω που λες "Ωραία, το φτιάξαμε το blog, πάμε να ποστάρουμε κάναν κώδικα", έρχεται ο μπλόγκερ και σε ξενερώνει.

Πώς να ποστάρεις κώδικα χωρίς να πάει να τον κάνει parse και να διατηρήσεις και το indention όταν δεν σου δίνει ένα code tag;

Ψάχνοντας βρίσκεις, οπότε έψαξα και βρήκα:

Θα το βάλω λέει τον κώδικα μου μέσα σε textarea tags και θα ορίσω λέει και γραμμές και στήλες.

Προσπαθώ το δοκιμάζω και όπως ήταν φυσικό σιγά μην ήταν έτσι εύκολα τα πράγματα.
Το μεν compose του blogger τα εμφάνιζε ωραία, το edit html τα ξέσκιζε, και το preview ήταν 50 φορές χειρότερο.

Καθ' ότι περασμένη η ώρα, βαριέμαι να ψάξω, οπότε λέω θα καταφύγω στην βαθιά σοφία μου και θα τα βάλω σε pre tags:

<?php
   echo "Hello world";
?>

Αυτό δούλεψε σχετικά, αλλά πρέπει να πειράξεις την html και να βάλεις πχ αντί για <, το "& lt;" αντί για > το "& gt;" κ.ο.κ.

FAIL εν ολίγοις και κάπου εκεί το κλείνεις τσατισμένος και αποφασισμένος να το ξαναπιάσεις την επόμενη μέρα.

Την επόμενη μέρα, βλέποντας από δω κι από 'κει τι λένε, συνειδητοποίησα ότι θα πρέπει να πειράξω το template για να χρησιμοποιήσω το syntaxHighlighter.

και ιδού το αποτέλεσμα:

<?php

 echo "Hello world";
?>

Πώς γίνεται λοιπόν όλο αυτό;
Θέλουμε να συνδέσουμε στο site μας τα αρχεία shCore.js και shCore.css που έχουν τον βασικό κώδικα και το stylesheet που θα χρησιμοποιείται.
Τα αρχεία αυτά, είτε τα κατεβάζουμε από το παραπάνω site και τα ανεβάζουμε σε κάποιον file hoster, ή χρησιμοποιούμε τα εξής link:

τα οποία τα βάζουμε πριν κλείσει το head tag.

Το syntaxHighlighter υποστηρίζει διάφορες γλώσσες, μια λίστα των οποίων μπορείτε να δείτε εδώ.

Βάσει λοιπόν της γλώσσας που θέλετε να γράψετε θα συνδέσετε και το αντίστοιχο αρχείο κάτω από το σχόλιο "add brushes here".

Πχ για php το αρχείο που χρειάστηκα είναι:

Τέλος, για να χρωματιστεί ο κώδικας πρέπει να βάλουμε στο τέλος, πριν κλείσει το body tag το εξής:

Υπάρχουν 2 τρόποι χρήσης, είτε με pre tags, είτε με script tags.Και τα 2 είναι ιδιαίτερα εύκολα και υπάρχουν οδηγίες εδώ