Aυτό το post γράφτηκε αρχικά το 2015. Τότε ακόμη έψαχνα ένα όμορφο τρόπο για να γίνεται πιο εύκολη η προσθήκη κώδικα μέσα στο WordPress. Οπότε σήμερα επανέρχομαι με μια νεότερη έκδοσή του.
Αν ξέρεις ήδη πως να γράφεις σωστά ένα άρθρο στο WordPress τότε είσαι έτοιμος γι’ αυτό 🙂
Είναι συχνό πρόβλημα όταν κάποιος θέλει να συντηρίσει μια τεχνική αρθρογραφία μέσω του WordPress και χρειάζεται να εισάγει κώδικα. Πολλές φορές το αποτέλεσμα δεν είναι όμορφο ενώ άλλες φορές τα σύμβολα του κώδικα κωδικοποιούνται απο τη σελίδα. Αυτό έχει σαν αποτέλεσμα κάποιος χρήστης που θέλουμε να διαβάσει τον κώδικά μας να δυσκολεύεται.
To Prism
Το Prism είναι ένα πρόσθετο του WordPress. Διατίθεται δωρεάν μέσα απο τον κατάλογο προσθέτων του WordPress. Όσο γράφεται αυτό το άρθρο η τρέχουσα έκδοση WordPress είναι η 4.9.4 και παρ’ όλο που το πρόσθετο εμφανίζει μήνυμα ότι δεν έχει δοκιμαστεί με την παρούσα έκδοση σας διαβεβαιώ πως λειτουργεί άψογα.
Εγκατάσταση του Prism
Η εγκατάσταση του Prism είναι εύκολη και απλή όπως σε κάθε άλλο πρόσθετο. Το ιδιαίτερο χαρακτηριστικό εδώ είναι οτι μετά την εγκατάσταση και την ενεργοποίηση του Prism δεν απαιτούνται περεταίρω ρυθμίσεις για το πρόσθετο.
Βήματα εγκατάστασης
- Πηγαίνουμε στο μενού Πρόσθετα –> Προσθήκη Νέου
- Κάνουμε αναζήτηση για τον όρο Prism
- Βρίσκουμε το plugin με τον τίτλο Prism Syntax Highlighter for WordPress
- Το εγκαθιστούμε
- Ολοκληρώνουμε την διαδικασία εγκατάστασης ενεργοποιώντας το plugin Prism.
Το plugin Prism ενεργοποιημένο
Χρήση του plugin
Τώρα αφού έχουμε εγκαταστήσει το plugin μέσα στον TinyMCE σε κάθε άρθρο και σελίδα δίπλα απο το κουμπί Add Media βλέπουμε οτι υπάρχει το Prism. Πατώντας το μας εισάγει όπου έχουμε επιλέξει εμείς τον κέρσορα ένα shortcode της μορφής prism field=”” language=”” τώρα τα πάντα είναι έτοιμα για να εισάγουμε τον κώδικά μας.
Εισαγωγή του Κώδικα απο το GitHub
Προσωπικά, χρησιμοποιώ το GitHub τους τελευταίους μήνες πολύ ενεργά σε διάφορα project. Μια απο τις πολλές δυνατότητες που μας δίνει είναι να ανεβάσουμε ένα αρχείο μέσα σε ένα repository και να το εξάγουμε σαν καθαρή πληροφορία (raw μορφή). Έτσι λοιπόν η διαδικασία έχει ως εξής: Για να εμφανίσετε ένα κομμάτι κώδικα στην σελίδα σας, ανεβάζετε το αρχείο στο GitHub, παίρνετε το λινκ απο την raw μορφή του και τροποιείτε ώς εξής το shortcode για να δουλέψει.
prism fieldurl="το λινκ απο την raw μορφή του αρχείου" language="η γλώσσα στην οποία είναι γραμμένος ο κώδικας σας"
Παράδειγμα
prism url="https://raw.githubusercontent.com/ifrountas/tutorials/master/prism-style.css" language="css"
Προσοχή! Εγώ για να μπορέσω να σας δείξω το παράδειγμα έχω παραλείψει τα [] που χρησιμοποιούμε για το άνοιγμα και το κλείσιμο των shortcodes μέσα στον text editor. Εσείς να τα βάλετε κανονικά. 🙂
Τελικό αποτέλεσμα του κώδικα
Prism Shortcode Error: could not get remote content. HTTP response code 404
