Μετάβαση στο κύριο περιεχόμενο
LibraTool logoLibraTool

Επεξεργαστής Markdown δωρεάν

Γράψτε και προεπισκοπήστε Markdown σε πραγματικό χρόνο. Υποστηρίζει επικεφαλίδες, έντονη γραφή, πλάγια γραφή, μπλοκ κώδικα, πίνακες και λίστες.

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί
94 λέξεις · 634 χαρ.
Markdown
Προεπισκόπηση
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Καλώς ήρθατε στον Επεξεργαστή Markdown</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Γράψτε <strong>Markdown</strong> στα αριστερά, δείτε την ζωντανή προεπισκόπηση στα δεξιά.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Χαρακτηριστικά</h3> <ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Έντονα</strong>, <em>πλάγια</em> και <del>διαγραμμένα</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Ενσωματωμένος κώδικας</code> και μπλοκ κώδικα</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Σύνδεσμοι</a></li><li class="my-0.5">Λίστες, αποσπάσματα, πίνακες και άλλα</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Παράδειγμα κώδικα</h3> <pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) { return `Hello, ${name}!`; }</code></pre> <blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Το Markdown δημιουργήθηκε από τον John Gruber το 2004 για να κάνει ευκολότερη τη σύνταξη για το διαδίκτυο.</blockquote> <table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Χαρακτηριστικό</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Υποστηρίζεται</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Κεφαλίδες</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Λίστες</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Πίνακες</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Κώδικας</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Σύντομη αναφορά Markdown
# Heading 1H1
**bold**Έντονο
*italic*Πλάγιο
`code`Ενσωματωμένος κώδικας
- itemΛίστα με κουκκίδες
1. itemΑριθμημένη λίστα
> quoteΠαράθεση
[text](url)Σύνδεσμος
![alt](url)Εικόνα
---Διαχωριστής

Συνηθισμένες χρήσεις

  • Γράψτε τεκμηρίωση API σε MarkdownΣχέδιο περιγραφές τελικού σημείου, παραδείγματα αιτήματος/απάντησης και πίνακες παραμέτρων σε Markdown.
  • Λάβετε σημειώσεις MarkdownΓράψτε δομημένες σημειώσεις σε Markdown που μπορούν να επικολληθούν σε Notion, Obsidian, Bear ή οποιαδήποτε εφαρμογή Markdown.
  • Γράψτε ένα GitHub README σε MarkdownΣχεδίαση και προεπισκόπηση του README του αποθετηρίου GitHub σας με ζωντανή απόδοση Markdown.
  • Γράψτε τεχνική τεκμηρίωσηΓράψτε και προεπισκοπήστε τεκμηρίωση API, wikis και τεχνικές διαδρομές σε Markdown πριν τη δημοσίευση.
  • Γράψτε ιστολογικές δημοσιεύσεις σε MarkdownΣχεδιάστε δημοσιεύσεις ιστολογίου σε Markdown για Ghost, Jekyll, Hugo, Hashnode και άλλες πλατφόρμες δημοσίευσης βάσει Markdown.

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

Η προεπισκόπηση αποδίδεται από χειρόγραφο αναλυτή Markdown ενσωματωμένο στο εργαλείο — χωρίς marked, remark ή εξωτερική βιβλιοθήκη. Αναλύει την πηγή γραμμή προς γραμμή στον browser, μετατρέποντας τη σύνταξη σε HTML που περνά από sanitizer πριν εμφανιστεί.

  1. 1
    Tokenization γραμμή προς γραμμή
    Η προσαρμοσμένη συνάρτηση renderMarkdown χωρίζει την πηγή στις αλλαγές γραμμής και τις διατρέχει σε ένα πέρασμα, αναγνωρίζοντας με σειρά προτεραιότητας μπλοκ κώδικα, επικεφαλίδες (H1–H6), παραθέσεις, αριθμημένες και μη λίστες, πίνακες GFM (με στοίχιση στηλών), οριζόντιες γραμμές και παραγράφους.
  2. 2
    Επέκταση inline σύνταξης
    Κάθε γραμμή ή κελί επεξεργάζεται στη συνέχεια από το inlineMarkdown, μια αλυσίδα αντικαταστάσεων regex που χειρίζεται έντονα (** και __), πλάγια (* και _), έντονα πλάγια (***), διαγραμμένα (~~), inline κώδικα (), εικόνες (![alt](url)) και συνδέσμους ([text](url)) — οι εικόνες επιλύονται πριν από τους συνδέσμους ώστε το πρόθεμα ! να μην καταναλωθεί λάθος.
  3. 3
    Εξυγίανση και αποκλεισμός απομακρυσμένων πόρων
    Το ακατέργαστο HTML του renderer περνά από sanitizer (sanitize-html) για να αφαιρεθούν μη ασφαλή tags και χαρακτηριστικά όπως <script>, handlers onerror και hrefs javascript:. Ένα δεύτερο πέρασμα (neutralizeRemote) αντικαθιστά από προεπιλογή τις τιμές src απομακρυσμένων εικόνων με δεσμευτικά, ώστε η προεπισκόπηση να μην επικοινωνεί σιωπηλά με εξωτερικούς διακομιστές πριν το επιτρέψετε.
  4. 4
    Εξαγωγή ως .md ή αυτόνομο .html
    Η αντιγραφή ή λήψη Markdown γράφει το ακατέργαστο κείμενο πηγής. Η λήψη HTML περικλείει την εξυγιασμένη έξοδο σε αυτόνομο έγγραφο με δικό του inline stylesheet — οι κλάσεις Tailwind λειτουργούν μόνο μέσα στον ιστότοπο, οπότε η εξαγωγή περιλαμβάνει απλούς κανόνες CSS, κάνοντας το αρχείο αναγνώσιμο παντού.

Σχετικά εργαλεία

📝

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

Μετατρέψτε HTML σε καθαρό Markdown. Χειρίζεται επικεφαλίδες, λίστες, συνδέσμους, εικόνες, μπλοκ κώδικα, πίνακες και παραθέματα. Ιδανικό για μεταφορά περιεχομένου από CMS.

Δοκιμάστε το
🔄

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

Μετατρέψτε Markdown σε καθαρό HTML με ζωντανή προεπισκόπηση. Χρησιμοποιήστε την πηγή για να αντιγράψετε έτοιμο HTML για blogs, CMS ή πρότυπα email.

Δοκιμάστε το
📊

Επεξεργαστής Διαγραμμάτων Mermaid

Γράψτε διαγράμματα ροής, διαγράμματα ακολουθίας, γραφήματα Gantt και άλλα σε σύνταξη Mermaid με ζωντανή προεπισκόπηση. Εξαγωγή ως SVG ή PNG. Εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας.

Δοκιμάστε το

Συχνές ερωτήσεις