Αν στο blog σας συχνά μοιράζεστε πηγαίο κώδικα με τους αναγνώστες σας, η καλύτερη λύση για να εμφανίζεται όμορφα και τακτοποιημένα είναι με την χρήση του Syntax Highlighter από τον Alex Gorbatchev.  Με τον Syntax Highlighter ο κώδικας εμφανίζεται τακτοποιημένος και χρωματιστός (ανάλογα με την γλώσσα προγραμματισμού που ανήκει) στο δικό του πλαίσιο, και δίνεται εύκολα η δυνατότητα στους αναγνώστες σας να τον αντιγράψουν στην δική τους σελίδα. 

Ένα παράδειγμα χρήσης του μπορείτε να δείτε σε αυτό το άρθρο.

Η διαδικασία ίσως φανεί λίγο δύσκολη στην αρχή. Διαβάστε μέχρι το τέλος ολόκληρο το άρθρο προς αποφυγή οποιουδήποτε λάθους.

Πως λειτουργεί 


Μετά την εγκατάσταση του στο blog σας, κάθε φορά που θέλετε να μοιραστείτε κώδικα θα πρέπει απλά να τον περιλαμβάνετε μέσα σε κάποια tags τα οποία καλούν κάποια συγκεκριμένα scripts ανάλογα με την γλώσσα προγραμματισμού που μοιράζεστε, και έτσι θα εμφανίζεται ο κώδικας στο δικό του πλαίσιο και με τα ανάλογα χρώματα. 

Την λίστα από τις γλώσσες προγραμματισμού που υποστιρίζονται, μπορείτε να την δείτε εδώ.

►Παράδειγμα:

Αρχικός κώδικας

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document……
</body>
</html>

Ο ίδιος κώδικας μέσω του Syntax Highlighter:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Title of the document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
The content of the document......
&lt;/body&gt;
&lt;/html&gt;

Εγγατάσταση


►Για αρχή κρατήστε ένα αντίγραφο ασφαλείας του template σας

►Στην συνέχεια πηγαίνετε στο  Blogger » Πρότυπο » Επεξεργασία HTML

►Κάντε αναζήτηση (CTRL + F) για </head> και ακριβώς πριν κάντε επικόλληση τον παρακάτω κώδικα:

&lt;link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/&gt;
&lt;link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'&gt;&lt;/script&gt;
&lt;script language='javascript'&gt;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
&lt;/script&gt;

Χρήση

►Οι κώδικες που θα δείτε παρακάτω ΠΑΝΤΑ πρέπει να γίνουν επικόλληση στο HTML μέρος του άρθρου σας και όχι στο “Σύνθεση”.

Η χρήση του Syntax Highlighter μπορεί να γίνει με 2 τρόπους. Δεν υπάρχει κάποιος καλύτερος από τον άλλον, δείτε την σύγκριση και επιλέξτε όποιον δουλεύει καλύτερα σε εσάς ανάλογα με την περίπτωση.

►Πρώτος τρόπος: 


&lt;script type="syntaxhighlighter" class="brush: html"&gt;&lt;![CDATA[
#######YOUR CODE############
]]&gt;&lt;/script&gt;

►Δεύτερος τρόπος:


&lt;pre class="brush: html"&gt;
#########YOUR CODE########
&lt;/pre&gt;

Παραμετροποιήσεις

Ανάλογα με τον κώδικα που μοιραζόμαστε αλλάζουμε και τον τύπο της κλάσης και στις 2 περιπτώσεις. Οι διαφορετικές κλάσεις που μπορείτε να χρησιμοποιήσετε είναι οι παρακάτω (Δείτε αναλυτικότερα εδώ).
Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

Διαφορές και προβλήματα που μπορεί να αντιμετωπίσετε

►Στον πρώτο τρόπο μπορείτε να κάνετε επικόλληση τον κώδικα ακριβώς όπως είναι, σε αντίθεση με τον δεύτερο που πρέπει πρώτα να τον κάνετε decode. Αν δεν κάνετε decode τον κώδικα τότε θα τρέξει μέσα στο άρθρο σας και δεν θα εμφανιστεί σαν απλό κείμενο.
Και για αυτό υπάρχει εύκολη λύση μέσω αυτής της σελίδας.

►Ο πρώτος τρόπος δεν εμφανίζει τίποτα στην προβολή σύνθεσης. Μετά την επικόλληση του στο HTML μέρος επιστρέψετε πάλι στο “Σύνθεση” δεν θα δείτε πουθενά τον κώδικα σας. Αυτό συμβαίνει διότι εμφανίζεται μέσω ενός script το οποίο δεν μπορεί να τρέξει στον editor του Blogger.

►Δεν θα δείτε σωστό αποτέλεσμα αν δεν δημοσιεύσετε το άρθρο σας.
Πιθανότατα και οι 2 κώδικες δεν θα τρέξουν στην “Προεπισκόπηση” του άρθρου σας. Συγκεκριμένα αν πατήσετε προεπισκόπηση για να δείτε πως θα φαίνεται δημοσιευμένο το άρθρο κατά πάσα πιθανότητα δεν θα δείτε κάποιο αποτέλεσμα, αντίθετα μπορεί να δείτε την σελίδα σας να μην φορτώνει σωστά. Αυτό συμβαίνει πάλι λόγο του ότι τα scripts που καλούνται δεν μπορούν να τρέξουν σωστά στην προσωρινή σελίδα που δημιουργεί ο blogger για την προεπισκόπηση.

►Διαφορές στην εμφάνιση δεν υπάρχουν. Και οι 2 τρόποι βγάζουν το ίδιο αποτέλεσμα. Συγκεκριμένα σε αυτό το άρθρο το παράδειγμα (στην αρχή του άρθρου) έγινε με τον πρώτο κώδικα, ενώ οι υπόλοιποι κώδικες του άρθρου με τον δεύτερο.

Επιπλέον παραμετροποιήσεις:

Προκαθορισμένα το πλαίσιο του Syntax Highlighter θα είναι τόσο μεγάλο στο ύψος, όσο ο κώδικας που περιέχει. Αυτό ίσως να μην είναι εύχρηστο σε περίπτοση που θέλετε να μοιραστείτε μεγάλα κομμάτια κώδικα. Για να ορίσετε ένα μέγιστο όριο στο πλαίσιο, μπορείτε προσθέσετε αυτό το κομμάτι CSS.

► Blogger » Πρότυπο » Επεξεργασία HTML


► Κάνουμε αναζήτηση μέσα στο template μας για </b:skin> , και ακριβώς πριν κάνουμε επικόλληση τον παρακάτω κώδικα:


.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
border: 1px solid #808080 !important;
max-height: 200px;
}

Μπορείτε να αλλάξετε την τιμή του max-height: σε όσα pixel επιθυμείτε.

 

Επίλογος 

Φαίνεται αρκετά περίπλοκο στην αρχή, αλλά αξίζει τον κόπο. Ο κώδικας στα άρθρα σας πλέον θα φαίνεται αρκετά ποιο επαγγελματικός και ευανάγνωστος. 

Αν τα Scripts που φορτώνουν σας φαίνονται πάρα πολλά και κάνουν το blog σας να φορτώνει ποιο αργά, μπορείτε να διαγράψετε ή να βάλετε σε comments όσα αφορούν γλώσσες προγραμματισμού που δεν θα μοιραστείτε ποτέ. Με λίγο ψάξιμο είναι εύκολο να καταλάβετε ποιο script φορτώνει την κάθε γλώσσα.

Αν ακολουθήσετε βήμα προς βήμα τα παραπάνω δεν θα έχετε κανένα πρόβλημα. Είναι ακριβώς τα βήματα που ακολουθήσαμε και εμείς για το blog μας, και όπως φαίνεται λειτουργεί μια χαρά.

Ευχαριστούμε τους Alex Gorbatchev για την δημιουργία του Highlighter, και το blog geektalkin.blogspot.gr για τις οδηγίες και κομμάτι του αρχικού κώδικα.

ΠΑΡΟΜΟΙΑ ΑΡΘΡΑΠΕΡΙΣΣΟΤΕΡΑ ΑΠΟ ΤΟΝ ΔΗΜΙΟΥΡΓΟ

1 ΣΧΟΛΙΟ

Comments are closed.