Μετατροπέας Markdown σε HTML

Ο μετατροπέας Markdown-to-HTML παίρνει τη πιο συνηθισμένη ροή εργασίας συγγραφής στον σύγχρονο ιστό — γραφή σε Markdown, δημοσίευση ως HTML — και την κάνει άμεση. Επικολλήστε οποιοδήποτε Markdown στο αριστερό παράθυρο και το δεξιό παράθυρο εμφανίζει το αποδιδόμενο HTML σε πραγματικό χρόνο. Χωρίς γύρο διακομιστή, χωρίς εγγραφή, χωρίς μεταφόρτωση αρχείου: το marked.js εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας, κάνοντας parsing του Markdown σε καθαρό HTML σε χιλιοστά του δευτερολέπτου. Χρησιμοποιήστε το για μεμονωμένη μετατροπή README, προεπισκόπηση πρόχειρου ιστολογίου, μετανάστευση CMS μεταξύ πλατφορμών με διαφορετικές διαλέκτους Markdown ή γρήγορη επαλήθευση ότι η σύνταξή σας είναι σωστή πριν την δέσμευση σε μια γεννήτρια στατικού ιστότοπου. Υποστηρίζει την πλήρη προδιαγραφή CommonMark συν τις επεκτάσεις GitHub Flavored Markdown (πίνακες, λίστες εργασιών, διαγραφή, αυτόματοι σύνδεσμοι) — που σημαίνει ότι ό,τι λειτουργεί στο GitHub θα λειτουργήσει εδώ χωρίς εκπλήξεις.

Βήμα 1: Επικολλήστε το κείμενο Markdown στο αριστερό παράθυρο εισόδου. Ο μετατροπέας δέχεται οποιοδήποτε μήκος από μία γραμμή έως χιλιάδες γραμμές περιεχομένου. Λειτουργεί η τυπική σύνταξη CommonMark: `#` για επικεφαλίδες, `*text*` για πλάγια, `text` για έντονα, `` `code` `` για ενσωματωμένο κώδικα, `[link](url)` για συνδέσμους, `-` ή `*` για στοιχεία μη ταξινομημένης λίστας, `1.` για ταξινομημένες λίστες, `>` για παραθέσεις, τριπλή ανάποδη απόστροφο για μπλοκ πεφραγμένου κώδικα. Βήμα 2: Παρακολουθήστε το δεξιό παράθυρο να αποδίδει HTML σε πραγματικό χρόνο καθώς πληκτρολογείτε ή επικολλάτε. Οι πίνακες αποδίδονται με σωστά περιγράμματα, οι επικεφαλίδες λαμβάνουν αυτόματα παραγόμενα χαρακτηριστικά `id` (για συνδέσμους αγκύρωσης), τα μπλοκ κώδικα διατηρούν ετικέτες γλώσσας και το inline HTML περνάει. Βήμα 3: Κάντε κλικ στο Αντιγραφή HTML για να αρπάξετε τον ακατέργαστο πηγαίο κώδικα HTML για επικόλληση σε ένα αρχείο `.html`, πρόγραμμα επεξεργασίας κειμένου πλούσιου περιεχομένου CMS ή πρότυπο στατικού ιστότοπου. Κάντε κλικ στο Αντιγραφή Απόδοσης για να αντιφέρετε τη μορφοποιημένη προβολή εάν ο προορισμός σας υποστηρίζει πλούσιο κείμενο (Word, Google Docs, συνθέτες email).

Αυτός ο μετατροπέας έχει και τα δύο ενεργοποιημένα από προεπιλογή. Το CommonMark (2014) είναι η τυποποιημένη, σαφής προδιαγραφή Markdown που ορίζει την ακριβή συμπεριφορά του parser — υιοθετημένη από το GitHub, το Reddit, το Stack Overflow, το Discourse και τα περισσότερα σύγχρονα εργαλεία. Το GitHub Flavored Markdown (GFM) επεκτείνει το CommonMark με πέντε προσθήκες: πίνακες (σειρές χωρισμένες με κάθετες γραμμές με ευθυγράμμιση), λίστες εργασιών (`- [ ]` και `- [x]` για πλαίσια ελέγχου), διαγραφή (`~~text~~`), αυτόματους συνδέσμους (τα raw URLs γίνονται κλικ χωρίς ρητή σύνταξη `[](url)`) και περιορισμένο raw HTML (ορισμένες ετικέτες φιλτραρισμένες για ασφάλεια). Δεδομένου ότι τα README του GitHub είναι η πιο κοινή πηγή Markdown στον ιστό, η συμβατότητα GFM είναι απαραίτητη — αυτός ο μετατροπέας αποδίδει ακριβώς ό,τι αποδίδει το GitHub για την ίδια είσοδο. Εάν χρειάζεστε καθαρή έξοδο CommonMark (χωρίς επεκτάσεις GFM), μπορείτε να απενεργοποιήσετε το GFM στο μενού επιλογών, αλλά η προεπιλογή λειτουργεί για το 95% των περιπτώσεων χρήσης.

Οι πίνακες GFM χρησιμοποιούν χαρακτήρες κάθετης γραμμής (`|`) για τον ορισμό στηλών και παύλες (`-`) στη γραμμή διαχωρισμού κεφαλίδας. Βασική σύνταξη: `| Name | Age |\n|------|-----|\n| Alice | 30 |`. Η ευθυγράμμιση στηλών κωδικοποιείται στη γραμμή διαχωρισμού: `-:` για δεξιά, `:-:` για κέντρο, `:-` ή `-` για αριστερά (προεπιλογή). Παράδειγμα με ευθυγράμμιση: `| Tool | Speed | Free |\n|:-----|------:|:----:|` παράγει έναν πίνακα 3 στηλών με το Tool αριστερή ευθυγράμμιση, Speed δεξιά ευθυγράμμιση, Free κεντραρισμένη ευθυγράμμιση. Ο renderer εξάγει σωστά στοιχεία `<table>`, ``, ``, `<tr>`, `<th>`, `<td>` με χαρακτηριστικά inline `style="text-align:..."` για την ευθυγράμμιση. Οι κάθετες γραμμές στην αρχή και στο τέλος κάθε σειράς είναι προαιρετικές αλλά προστίθενται συνήθως για αναγνωσιμότητα. Τα πλάτη στηλών στην πηγή δεν χρειάζεται να ευθυγραμμίζονται — ο parser δεν ενδιαφέρεται για την οπτική απόσταση.

Τα μπλοκ πεφραγμένου κώδικα χρησιμοποιούν τριπλές ανάποδες αποστρόφους (ή tildes) για άνοιγμα και κλείσιμο: ```\ncode here\n```. Προσθέστε μια υπόδειξη γλώσσας μετά το άνοιγμα του φράχτη για να ενεργοποιήσετε την επισήμανση σύνταξης όταν δημοσιεύεται το HTML: ```javascript ή ```python ή ```bash. Ο μετατροπέας εξάγει `<pre><code class="language-X">` όπου X είναι το όνομα της γλώσσας. Αυτός ο μετατροπέας δεν εφαρμόζει χρώματα σύνταξης μόνος του — ο χρωματισμός γίνεται από μια ξεχωριστή βιβλιοθήκη όπως το highlight.js, το Prism.js ή το Shiki όταν το HTML αποδίδεται στη σελίδα σας. Γιατί διαχωρισμός; Οι βιβλιοθήκες επισήμανσης σύνταξης είναι 50KB-200KB η καθεμία και προσθέτουν σημαντικό βάρος στη σελίδα. ο μετατροπέας παραμένει ελαφρύς εξάγοντας μόνο την ετικέτα γλώσσας και αφήνοντας την αγωγή δημοσίευσής σας να προσθέσει χρώματα. Κοινές ετικέτες γλωσσών: javascript, typescript, python, java, csharp, go, rust, ruby, php, html, css, json, yaml, xml, bash, sql, markdown.

Η διεπαφή διπλού παραθύρου — πηγή Markdown στα αριστερά, προεπισκόπηση HTML στα δεξιά — είναι η τυπική ροή εργασίας συγγραφής για τεχνικούς συγγραφείς και προγραμματιστές. Σας επιτρέπει να γράφετε στην ελαφριά, ευανάγνωστη μορφή Markdown βλέποντας αμέσως το αποτέλεσμα που μοιάζει δημοσιευμένο. Σε σύγκριση με τους editors WYSIWYG (Word, Google Docs): Το Markdown είναι πιο γρήγορο στη γραφή (χωρίς ψάξιμο με το ποντίκι για κουμπιά μορφοποίησης), με δυνατότητα ελέγχου έκδοσης (τα απλά κείμενα κάνουν καθαρό diff στο Git), φορητό (οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου λειτουργεί) και παράγει καθαρό HTML χωρίς διογκωμένα ένθετα divs. Σε σύγκριση με την απευθείας γραφή HTML: Το Markdown είναι 3-5x πιο γρήγορο για τυπικό περιεχόμενο (επικεφαλίδες, παράγραφοι, λίστες, σύνδεσμοι), διαβάζεται φυσικά σε πηγαία μορφή και αφαιρεί τις αποφάσεις μορφοποίησης από τη ροή γραφής. Χρησιμοποιήστε το Markdown για οποιοδήποτε περιεχόμενο με βάρος κειμένου. μεταβείτε σε HTML μόνο όταν χρειάζεστε λεπτομερή έλεγχο παρουσίασης.

Ο μετατροπέας εξάγει σημασιολογικό HTML5 — στοιχεία που περιγράφουν τη σημασία του περιεχομένου, όχι μόνο την εμφάνιση. Οι επικεφαλίδες γίνονται `<h1>` έως `<h6>` με αυτόματα παραγόμενα χαρακτηριστικά `id` για σύνδεση αγκύρωσης. Οι παράγραφοι γίνονται `<p>`. Τα έντονα γίνονται `<strong>` (όχι `<b>`), τα πλάγια γίνονται `<em>` (όχι `<i>`) — σημασιολογικά ισοδύναμα που λειτουργούν καλύτερα με προγράμματα ανάγνωσης οθόνης και στόχευση CSS. Οι μη ταξινομημένες λίστες γίνονται `<ul><li>`, οι ταξινομημένες λίστες `<ol><li>`. Οι παραθέσεις γίνονται `<blockquote>`. Τα διαστήματα κώδικα γίνονται `<code>`, τα πεφραγμένα μπλοκ γίνονται `<pre><code>`. Οι σύνδεσμοι γίνονται `<a href>`. Οι εικόνες γίνονται `<img src alt>`. Το αποτέλεσμα είναι καθαρό, προσβάσιμο HTML που εισάγεται σε οποιοδήποτε σύγχρονο CMS, γεννήτρια στατικού ιστότοπου ή αρχείο HTML χωρίς τροποποίηση. Χωρίς inline στυλ (εκτός από την ευθυγράμμιση πίνακα), χωρίς επιπλέον περιτυλίγματα `<div>`, χωρίς χαρακτηριστικά κλάσης (εκτός από ετικέτες γλώσσας σε μπλοκ κώδικα).

Τα αρχεία README είναι η πιο κοινή πηγή Markdown στον ιστό — κάθε αποθήκη GitHub έχει ένα, τα περισσότερα μητρώα πακέτων (npm, PyPI, RubyGems) τα αποδίδουν αυτόματα. Για να μετατρέψετε ένα README.md για έναν ιστότοπο τεκμηρίωσης, επικολλήστε τα περιεχόμενα του αρχείου στον μετατροπέα και αντιγράψτε την έξοδο HTML. Συνήθεις προσαρμογές μετά τη μετατροπή: (1) Σχετικοί σύνδεσμοι — τα αρχεία README χρησιμοποιούν συχνά σχετικές διαδρομές (`./docs/install.md`). ξανά-γράψτε σε απόλυτα URLs για τον δημοσιευμένο ιστότοπο. (2) Διαδρομές εικόνων — το ίδιο πρόβλημα, οι εικόνες README χρησιμοποιούν `./images/logo.png`. ενημερώστε στη διεύθυνση URL της δημοσιευμένης εικόνας. (3) Αναγνωριστικά αγκύρωσης — τα αυτόματα παραγόμενα IDs επικεφαλίδων χρησιμοποιούν μορφή πεζών-παυλών (το `Installation` γίνεται `id="installation"`). ενημερώστε τους εσωτερικούς συνδέσμους αγκύρωσης ανάλογα. (4) Σύνταξη ειδική για αποθήκη — το GitHub συνδέει αυτόματα αναφορές ζητημάτων όπως `#123` και αναφορές χρηστών όπως `@username`. αυτά δεν συνδέονται αυτόματα εκτός του GitHub, γράψτε τα ξανά ως ρητούς συνδέσμους εάν χρειάζεται.

Οι γεννήτριες στατικών ιστότοπων (SSGs) επεξεργάζονται αρχεία Markdown σε σελίδες HTML κατά το χρόνο δόμησης, οπότε η χειροκίνητη μετατροπή συνήθως δεν είναι απαραίτητη — δεσμεύετε αρχεία `.md` στην αποθήκη σας και το SSG χειρίζεται τα υπόλοιπα. Κοινά SSGs και ο χειρισμός τους Markdown: Το Jekyll (Ruby) χρησιμοποιεί kramdown από προεπιλογή, συμβατό με CommonMark με κάποιο GFM. Το Hugo (Go) χρησιμοποιεί Goldmark, πλήρες CommonMark + GFM + επεκτάσεις. Το Next.js MDX (JavaScript) χρησιμοποιεί remark/rehype, σας επιτρέπει να ενσωματώνετε στοιχεία React στο Markdown. Το Eleventy (JavaScript) χρησιμοποιεί markdown-it από προεπιλογή. Το Astro (JavaScript) χρησιμοποιεί remark και υποστηρίζει MDX. Το Gatsby (JavaScript) χρησιμοποιεί gatsby-plugin-mdx με remark. Αυτός ο μετατροπέας είναι πιο χρήσιμος για: (a) μεμονωμένες μετατροπές εκτός ροής εργασίας SSG, (b) επαλήθευση ότι το Markdown σας αποδίδεται σωστά πριν τη δέσμευση, (c) μετανάστευση περιεχομένου μεταξύ SSGs που χρησιμοποιούν διαφορετικές διαλέκτους Markdown.

Έξι συνηθισμένες παγίδες. (1) Απαλές αλλαγές γραμμής εντός παραγράφων — οι μεμονωμένες αλλαγές γραμμής συμπτύσσονται σε κενά ανά CommonMark, όχι `<br>`. Χρησιμοποιήστε δύο διαστήματα στο τέλος ή μια κενή γραμμή για μια ρητή αλλαγή. (2) Μπλοκ κώδικα με εσοχή (εσοχή 4 διαστημάτων) έναντι πεφραγμένου (τριπλή ανάποδη απόστροφο) — και τα δύο λειτουργούν, αλλά το πεφραγμένο συνιστάται επειδή διατηρεί ετικέτες γλώσσας. (3) Ένθετες λίστες με λανθασμένη εσοχή — το CommonMark απαιτεί 2 ή 4 διαστήματα, η ανάμειξη στηλοθέτη (tabs) και διαστημάτων σπάει την απόδοση σε ορισμένους parsers. (4) Το inline HTML αφαιρείται από αυστηρότερους renderers — το GitHub και το Reddit φιλτράρουν πολλές ετικέτες για ασφάλεια. ό,τι λειτουργεί σε αυτόν τον μετατροπέα μπορεί να μην λειτουργεί παντού. (5) Επικεφαλίδες χωρίς κενή γραμμή πριν/μετά — οι περισσότεροι parsers ανέχονται, αλλά το CommonMark συνιστά κενές γραμμές για σαφήνεια. (6) Διαγραφή με μεμονωμένα tildes — το μεμονωμένο tilde δεν λειτουργεί, χρειάζεται `~~double tildes~~`. Κατά τον εντοπισμό σφαλμάτων, ελέγξτε ποια διάλεκτο μιλά η πλατφόρμα προορισμού (CommonMark; GFM; κάτι προσαρμοσμένο;) πριν υποθέσετε ότι ο μετατροπέας είναι λάθος.

Αυτός ο μετατροπέας λειτουργεί 100% στον περιηγητή σας — το κείμενο Markdown δεν φεύγει ποτέ από τη σελίδα. Οι διακομιστές μετατροπής Markdown συνήθως καταγράφουν κάθε μετατροπή για αναλυτικά στοιχεία και ενδέχεται να αποθηκεύουν δεδομένα εισόδου για προσωρινή αποθήκευση ή παρακολούθηση σφαλμάτων. Για τις περισσότερες απλές μετατροπές αυτό δεν αποτελεί πρόβλημα, αλλά οι προγραμματιστές και οι τεχνικοί συγγραφείς επικοolλούν συχνά περιεχόμενο που δεν πρέπει να διαρρεύσει: κλειδιά API σε δείγματα κώδικα, εσωτερική τεκμηρίωση, ιδιόκτητες τεχνικές προδιαγραφές, πρόχειρα άρθρα ιστολογίου υπό NDA, δεδομένα πελατών σε τεκμηρίωση υποστήριξης. Η μετατροπή στην πλευρά του πελάτη εξαλείφει εντελώς τον κίνδυνο διαρροής. Για επαλήθευση: ανοίξτε την καρτέλα Δίκτυο στα εργαλεία προγραμματιστή του περιηγητή, επικολλήστε Markdown, κάντε κλικ στη μετατροπή — θα δείτε μηδενικά εξερχόμενα αιτήματα κατά τη διάρκεια της μετατροπής. Η βιβλιοθήκη marked.js φορτώνεται μία φορά όταν ανοίγει η σελίδα (ορατό στην αρχική φόρτωση της σελίδας). Μετά από αυτό, όλη η μετατροπή είναι τοπική. Για αναξιόπιστη είσοδο Markdown από τρίτες πηγές, αποστειρώστε την αποδιδόμενη HTML με το DOMPurify πριν την εισαγωγή σε μια σελίδα για την αποτροπή επιθέσεων XSS.

Γρήγορη αναφορά σύνταξης. Επικεφαλίδες: `# H1` έως `###### H6`. Έντονα: `text`. Πλάγια: `*text*` ή `_text_`. Έντονα+πλάγια: `*text*`. Διαγραμμένα (GFM): `~~text~~`. Ενσωματωμένος κώδικας: `` `code` ``. Σύνδεσμος: `[text](https://url.com)`. Εικόνα: ``. Αυτόματος σύνδεσμος (GFM): `https://example.com` (ακατέργαστο URL, χωρίς αγκύλες). Μη ταξινομημένη λίστα: `- item` ή `* item` ή `+ item`. Ταξινομημένη λίστα: `1. item`. Ένθετη λίστα: εσοχή με 2 κενά. Παράθεση: `> quoted text`. Παράθεση πολλών γραμμών: πρόθεμα σε κάθε γραμμή με `>`. Περιοχή κώδικα με περιφράξεις: τριπλά ανάστροφα εισαγωγικά (ανοιχτά και κλειστά) με προαιρετική ετικέτα γλώσσας. Περιοχή κώδικα με εσοχή: 4 κενά ή 1 στηλοθέτης στην αρχή της γραμμής. Οριζόντια γραμμή: `---` ή `***` σε δική της γραμμή. Πίνακας (GFM): `| col1 | col2 |\n|------|------|\n| val1 | val2 |`. Λίστα εργασιών (GFM): `- [ ] todo` και `- [x] done`. Δίοδος HTML: οποιαδήποτε ετικέτα HTML λειτουργεί ενσωματωμένα. Σκληρή αλλαγή γραμμής: δύο trailing κενά. Διαφυγή ειδικού χαρακτήρα: ανάστροφη κάθετος πριν, π.χ. `\*not italic\*`. Χρησιμοποιήστε τον μετατροπέα για οποιαδήποτε περίπτωση σας μπερδεύει — η ζωντανή προεπισκόπηση δείχνει ακριβώς πώς αποδίδεται κάθε μοτίβο.