Χρωματίστε τους κώδικές σας με το Prettify

TetsiTech

Όσοι blogger θέλετε να δείξετε ένα τμήμα κώδικα μέσα σε κάποιο άρθρο σας, μπορείτε να το κάνετε με το Google Code Prettify. Μπορεί να αναγνωρίσει από μόνο του πολλούς κώδικες όπως HTML, CSS, JavaScript, Python κλπ. και να τους χρωματίζει με πολύ ωραίο τρόπο. Είναι εύκολο στη χρήση και δεν καθυστερεί το blog σας.

Δείτε demo
Για να το εγκαταστήσουμε, από το αριστερό μενού του Blogger επιλέγουμε το [Θέμα] και από το αναπτυσσόμενο μενού [Προσαρμογή], επιλέγουμε [επεξεργασία HTML]

Με Ctrl + F αναζητούμε το </body> και ακριβώς από πάνω του επικολλούμε το:


<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

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


<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=ONOMA_SKIN'/>

όπου ONOMA_SKIN βάλτε (μόνο με μικρά γράμματα) ένα από τα παρακάτω:

desert
sunburst
sons-of-obsidian
doxy

Μέσα στο άρθρο

Πάμε τώρα στο άρθρο μας και στο σημείο που θέλουμε να τονίσουμε τον κώδικά μας.
Μεταβαίνουμε σε HTML προβολή και βάζουμε το class = "prettyprint" μέσα σε ένα pre tag όπως το παράδειγμα:


<pre class="prettyprint">
ΚΩΔΙΚΑΣ
</pre>

Προσοχή τώρα και σε κάτι τελευταίο.

Εάν όπου ΚΩΔΙΚΑΣ, επικολλήσετε τον κώδικά σας μέσα στην HTML προβολή του blogger, τότε θα γίνουν όλα μπάχαλο γιατί ο blogger θα τροποποιήσει αυτόν τον κώδικα σύμφωνα με τα δικά του δεδομένα (λόγω XHTML). Οπότε πριν την επικόλληση του θα πρέπει να τον μετατρέψετε στην μορφή που θέλει ο blogger, χρησιμοποιώντας το εργαλείο που σας παρέχουμε Μετατροπέας χαρακτήρων HTML σε XHTML.