Πώς να χρησιμοποιήσετε το Markdown στην ανάπτυξη ιστοσελίδων

Sep 16, 2025

πως να

Ως προγραμματιστές ιστού και δημιουργοί περιεχομένου, γενικά ξοδεύουμε πολύ χρόνο γραπτώς κείμενο που είναι τυλιγμένο μέσα Html κώδικας. Τι γίνεται αν σας είπαμε ότι υπάρχει ένας καλύτερος τρόπος να το κάνετε με το Markdown; Ένας τρόπος με τον οποίο μπορείτε να εστιάσετε στη γραφή και όχι τον κώδικα;

Το MarkDown είναι ένα απλό κείμενο, η ελαφριά γλώσσα σήμανσης που αναπτύχθηκε το 2004 από τον John Gruber και Aaron Swartz. Αρχικά δημιουργήθηκε για να γίνει η γραφή XHTML / HTML ευκολότερη μετατρέποντας τα αρχεία απλού κειμένου σε δομικά έγκυρα HTML ή XHTML, η Markdown μπορεί να χρησιμοποιηθεί για σχεδόν οποιοδήποτε είδος γραφής: χειρόγραφα, σεμινάρια, σημειώσεις, περιεχόμενο ιστού και πολλά άλλα.

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

01. Επιλέξτε έναν επεξεργαστή Markdown

Όταν εργάζεστε με το Markdown για τον ιστό, είναι σημαντικό να κατανοήσετε τη βασική σύνταξη και τους περιορισμούς που μπορεί να αντιμετωπίσετε. Πριν ξεκινήσετε, χρειάζεστε κάποιο τύπο επεξεργαστή και διερμηνέα για τον ιστότοπό σας. Εναλλακτικά, μπορείτε να μετατρέψετε το Markdown πριν από τη δημοσίευση.

You'll need some kind of editor to get started — Θα χρειαστείτε κάποιο πρόγραμμα επεξεργασίας για να ξεκινήσετε

Υπάρχουν διάφοροι συντάκτες από τους οποίους μπορείτε να επιλέξετε. Παρατσούκλι Είναι φοβερό επειδή προσφέρει ένα ευρύ φάσμα επιλογών εξαγωγής, συμπεριλαμβανομένων HTML και PDF. Μια άλλη μεγάλη εναλλακτική λύση είναι Στοιβάζω - Ένας ελεύθερος, ηλεκτρονικός επεξεργαστής Markdown. Φυσικά, ο συντάκτης απλού κειμένου θα λειτουργήσει.

Jetpack is handy for use with WordPress — Το Jetpack είναι εύχρηστο για χρήση με το WordPress

Εάν δεν σκοπεύετε να μετατρέψετε το MarkDown σε HTML, μπορείτε να πάρετε ένα plugin (ή να διαρρίχω) για τον ιστότοπό σας. Για το WordPress, Τίναγμα Έχει εξαιρετική υποστήριξη για το Markdown, το οποίο σας επιτρέπει να χρησιμοποιήσετε το Markdown απευθείας μέσα στα μηνύματα και σχόλια - αρκεί να ενεργοποιήσετε αυτήν την επιλογή.

Όπως οποιαδήποτε γλώσσα σήμανσης, η Markdown έχει τη δική του σύνταξη. Σημείωση: Υπάρχουν διάφορες διαφορετικές γεύσεις ή ποικιλίες σήμανσης. Σε αυτό το άρθρο, θα καλύψουμε μόνο την κοινώς κοινή σύνταξη.

02. Ρυθμίστε τις επικεφαλίδες

Σε HTML, υπάρχουν έξι στυλ κεφάλια: h1 , h2 , h3 , h4 , h5 και h6 . Για να αναδημιουργήσετε αυτά στο Markdown, χρησιμοποιήστε μια σειρά συμβόλων Hashtag ( # ) - Αντιστοιχεί στον αριθμό τίτλου - ακολουθούμενη από το κείμενο της επικεφαλίδας. Για παράδειγμα, για να δημιουργήσετε ένα & lt; h1 & gt; Ετικέτα, χρησιμοποιήστε ένα hashtag # ? για ένα & lt; h2 & gt; Ετικέτα, χρησιμοποιήστε δύο hashtags ## ? Και ούτω καθεξής και ούτω καθεξής.

Είσοδος Markdown:

 # κλάση 1
## κλάση 2
### κλάση 3
#### Κεφαλίδα 4
##### Κεφαλίδα 5
###### Κεφαλίδα 6

Έξοδος HTML:

 & lt; h1 & gt; κλάση 1 & lt; / h1 & gt;
& lt; h2 & gt; κλάση 2 & lt; / h2 & gt;
& lt; h3 & gt; κλάση 3 & lt; / h3 & gt;
& lt; h4 & gt; κλάση 4 & lt; / h4 & gt;
& lt; h5 & gt; κλάση 5 & lt; / h5 & gt;
& LT; H6 & GT; κλάση 6 & LT; / H6 & GT;

03. Σημειώστε τις παραγράφους

Οι παράγραφοι αντιπροσωπεύονται από το & lt; p & gt; Ετικέτα σε HTML. Στο Markdown, διαχωρίζονται από μία ή περισσότερες κενές γραμμές. Όπως το HTML, αγνοείται το Whitespace. Έτσι, αν προσθέσετε 20 κενές γραμμές, εξακολουθείτε να έχετε μόνο μία παράγραφο.

Είσοδος Markdown:

 Η γρήγορη καφέ αλεπού άλματα πάνω από το τεμπέλης σκυλί.
Το τεμπέλης σκυλί δεν νοιάζεται, επειδή είναι ένα τεμπέλης σκυλί.

Έξοδος HTML:

 & lt; p & gt; η γρήγορη καφέ αλεπού άλματα πάνω από το τεμπέλης σκυλί. & Lt; / p & gt;
& lt; p & gt; το τεμπέλης σκυλί δεν νοιάζεται, επειδή είναι ένα τεμπέλης σκυλί. & lt; / p & gt;

04. Στυλ Η γραμμή διαλείμματα

Διαλείμματα γραμμής, τα οποία αντιπροσωπεύονται σε HTML με το & lt; br & gt; Ετικέτα, προστίθενται χρησιμοποιώντας ένα διάλειμμα μιας γραμμής, με δύο κενά στο τέλος της προηγούμενης γραμμής.

Είσοδος Markdown:

 Η γρήγορη καστανή αλεπού
Πηγαίνει πάνω από το τεμπέλης σκυλί.

Έξοδος HTML:

 & lt; p & gt; το γρήγορο καφέ Fox & lt; br & gt, άλματα πάνω από το τεμπέλης σκυλί. & Lt; / p & gt;

05. Σημειώστε την έμφαση

Υπάρχουν δύο τρόποι για να προσθέσετε έμφαση στο κείμενό σας: Italic ( & lt; em & gt; σε html) ή τολμηρό ( & lt; strong & gt; σε HTML).

Στο Markdown, ολοκληρώνετε αυτό χρησιμοποιώντας ένα ή δύο αστερίσκους ( * ). Μπορείτε επίσης να χρησιμοποιήσετε υπογράμμιση (_), αλλά να κολλήσω με αστερίσκους, επειδή υπάρχουν και άλλες γεύσεις του Markdown που χρησιμοποιούν υπογραμμίσεις για άλλα πράγματα.

Είσοδος Markdown:

 * Italic Text *
** BOLD κείμενο **

Έξοδος HTML:

 & lt; em & gt; iTalic text & lt; / EM & GT;
& lt; ισχυρή & gt; bold text & lt; / strong & gt;

Σημείωση: Μπορείτε επίσης να δημιουργήσετε έντονο-πλάγιο κείμενο χρησιμοποιώντας τρεις αστερίσκους: *** BOLD και Italic Text *** .

06. Δημιουργία οριζόντιων κανόνων

Για να δημιουργήσετε έναν οριζόντιο κανόνα (ή & lt; hr & gt; σε HTML), χρησιμοποιήστε μια σειρά τριών ή περισσότερων παύλων ( ---- ), αστερίσκοι ( *** ) ή ίσα σημάδια ( === ). Είναι η επιλογή σας που προτιμάτε, αλλά βεβαιωθείτε ότι έχετε συμπεριλάβει μια κενή γραμμή πάνω και κάτω.

Είσοδος Markdown:

 Μάθηση κάτι νέο είναι πάντα πολλή διασκέδαση.

----

Σίγουρα είναι!

Έξοδος HTML:

 & LT; P & GT; Μάθηση κάτι νέο είναι πάντα πολύ διασκεδαστικό. & LT; / P & GT;
& lt; hr & gt;
& lt; p & gt; είναι σίγουρο! & lt; / p & gt;

07. Προσθήκη εικόνων και συνδέσμων

Στο HTML, προστίθεται μια εικόνα χρησιμοποιώντας το & lt; img & gt; Προστίθενται ετικέτες και σύνδεσμοι χρησιμοποιώντας το & lt; a & gt; ετικέτα.

Στο Markdown, οι εικόνες ξεκινούν με ένα θαυμαστικό ( ! ), ακολουθούμενη από αγκύλες ( [] ) για το κείμενο "κείμενο" και παρενθέσεις ( () ) για τη διαδρομή προς την εικόνα. Μπορείτε επίσης να συμπεριλάβετε έναν προαιρετικό τίτλο μέσα σε διπλά εισαγωγικά ( "" ).

Με συνδέσμους, είναι σχεδόν το ίδιο, εκτός από το να μην υπάρχει ένα θαυμαστικό.

Είσοδος Markdown:

! [Alt text] (/ διαδρομή / προς / image.jpg "προαιρετικός τίτλος")
[Σύνδεσμος κειμένου] (http://example.com "Προαιρετικός τίτλος")

Σημείωση: Μπορείτε επίσης να χρησιμοποιήσετε συνδέσμους αναφοράς και εικόνες, αλλά αυτό δεν καλύπτεται εδώ.

Έξοδος HTML:

 & lt; img src = "/ διαδρομή / image.jpg" alt = "alt text" title = "προαιρετικός τίτλος" / & gt;
& lt; a href = "http://example.com" τίτλος = "προαιρετικός τίτλος" & gt; link text & lt; / a & gt;

08. Κάντε λίστες

Υπάρχουν δύο τύποι καταλόγων σε HTML: παραγγέλθηκε ( & lt; ol & gt; ) και μη συνδεδεμένες ( & lt; ul & gt; ). Με Markdown, χρησιμοποιήστε αριθμούς για παραγγελίες λίστες και αστερίσκοι ( * ) ή παύλες ( - ) για μη συνδεδεμένες λίστες.

Είσοδος Markdown:

 1. Στοιχείο 1
2. Στοιχείο 2
* Πρώτο στοιχείο
* Δεύτερο στοιχείο
- Πρώτο στοιχείο
- δεύτερο στοιχείο

Έξοδος HTML:

 & lt; ol & gt;
& lt; li & gt; στοιχείο 1 & lt; / li & gt;
& lt; li & gt; item 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; πρώτο στοιχείο & lt; / li & gt;
& lt; li & gt; δεύτερο στοιχείο & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; πρώτο στοιχείο & lt; / li & gt;
& lt; li & gt; δεύτερο στοιχείο & lt; / li & gt;
& lt; / ul & gt;

09. Προσθέστε inline κώδικα και μπλοκ κώδικα

Όταν εργάζεστε με τον κώδικα στο HTML, μπορείτε είτε να το συμπεριλάβετε ως ένα στοιχείο inline χρησιμοποιώντας το & lt; code & gt; Ετικέτες; ή ως ένα προ-μορφοποιημένο μπλοκ κειμένου χρησιμοποιώντας το & lt; pre & gt; & lt; code & gt; συνδυασμός.

Στο Markdown, αυτά τα στοιχεία οριοθέτησαν χρησιμοποιώντας είτε ένα μόνο backtick σε κάθε πλευρά ( ` ) ή χρησιμοποιώντας ένα περιφραγμένο στυλ, το οποίο περιλαμβάνει τρία backicks πάνω και κάτω από το μπλοκ κώδικα ( `` ` ).

Είσοδος Markdown:

 Η μεταβλητή `Numberofpoints κατέχει το σκορ του παίκτη.
αν player.wins {
numberofpoints + = 1
}

Έξοδος HTML:

 ο κωδικός & gt; numberofpoints & lt; / code & gt; Η μεταβλητή κρατά τη βαθμολογία του παίκτη.
& lt; pre & gt; & lt; code & gt;
αν player.wins {
numberofpoints + = 1
}
& lt; / pre & gt; / lt; / code & gt;

10. Στυλ επάνω blockquotes

Προστίθενται blockquotes σε HTML χρησιμοποιώντας το & lt; blockquote & gt; ετικέτα. Στο Markdown, χρησιμοποιήστε το σύμβολο μεγαλύτερο από το σύμβολο ( & gt; ) πριν από τη γραμμή.

Είσοδος Markdown:

 & GT; Αυτό είναι το blockquote μου.
& gt;
& gt; Αυτό είναι μέρος του ίδιου αποκλεισμού.
& gt; Αυτό είναι ένα νέο blockquote.

Έξοδος HTML:

 & lt; blockquote & gt;
& lt; p & gt; αυτό είναι το blockquote μου. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; αυτό είναι μέρος του ίδιου blockquote. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; αυτό είναι ένα νέο blockquote. & lt; / p & gt;
& lt; / blockquote & gt;

11. Ενσωματώστε inline html

Υπάρχουν στιγμές που χρειάζεστε για να δημιουργήσετε ένα στοιχείο HTML που δεν υποστηρίζεται.Για παράδειγμα, μπορεί να χρειαστείτε ένα & lt; πίνακας & gt; ή & lt; div & gt; ετικέτα.

Εάν συμβαίνει αυτό, μπορείτε να αναμίξετε το Markdown και HTML, αλλά υπάρχουν ορισμένοι περιορισμοί.Για παράδειγμα, δεν μπορείτε να συμπεριλάβετε Markdown μέσα σε ετικέτες HTML σε επίπεδο μπλοκ.

Διαβάστε περισσότερα:

20 μονάδες node.js που πρέπει να γνωρίζετε
12 Common Javascript Ερωτήσεις
9 από τους καλύτερους πόρους για την εκμάθηση HTML και CSS

Πώς να χρησιμοποιήσετε το Markdown στην ανάπτυξη ιστοσελίδων

01. Επιλέξτε έναν επεξεργαστή Markdown

02. Ρυθμίστε τις επικεφαλίδες

03. Σημειώστε τις παραγράφους

04. Στυλ Η γραμμή διαλείμματα

05. Σημειώστε την έμφαση

06. Δημιουργία οριζόντιων κανόνων

07. Προσθήκη εικόνων και συνδέσμων

08. Κάντε λίστες

09. Προσθέστε inline κώδικα και μπλοκ κώδικα

10. Στυλ επάνω blockquotes

11. Ενσωματώστε inline html

πως να - Τα πιο δημοφιλή άρθρα

Πώς να αλλάξετε τη γραμματοσειρά στο Twitter Bio

Κατασκευάστε εφαρμογές κινητής τηλεφωνίας cross-platform με την πτερυγισμό της Google

Πώς να ζωγραφίσει ρεαλιστικά κύματα στο Photoshop

Σχεδιάστε ένα avatar playable για ένα βιντεοπαιχνίδι

4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

Κάντε τους χαρακτήρες σας ποπ με χρώμα και φως

Κάντε μια διπλή έκθεση στο Photoshop

Πώς να χρησιμοποιήσετε τα σχήματα μείγμα για να ζωντανέψετε χαρακτήρες

Κατηγορίες