Markdown Önizleyici

Düzenleyici

Önizleme

0 words 0 chars 0 min read

Markdown Önizleyici nedir?

GitHub Flavored Markdown için ücretsiz, tarayıcı tabanlı canlı önizleyici — sözdizimi vurgulu kod (highlight.js), KaTeX ile render edilen matematik, Mermaid diyagramlar, sanitize HTML çıktısı ve tek tıkla .html veya .md dışa aktarma. Hiçbir şey yüklenmez; her tuş vuruşu markdown-it ve DOMPurify ile tarayıcınızda render edilir.

GitHub Flavored Markdown'ı çevrimiçi olarak matematik, diyagram ve sözdizimi vurgulu canlı nasıl önizlerim?

Sol tarafa markdown yazın veya yapıştırın, render edilen HTML anında sağda görünür. Önizleyici tabloları, highlight.js ile kod bloklarını, KaTeX matematiği ($E = mc^2$ satır içi veya blok), Mermaid diyagramları (graph, sequenceDiagram vb.), görev listelerini, alıntıları ve daha fazlasını destekler. Çıktı DOMPurify ile sanitize edilir; e-posta, blog veya statik sitelere kopyalamak güvenlidir. Araç tamamen tarayıcınızda çalışır — hiçbir şey yüklenmez.

Öne çıkan özellikler

Canlı GFM render

linkify, typographer ve tablo destekli markdown-it; anında GitHub Flavored Markdown verir — başlıklar, listeler, kod, tablolar, alıntılar, dipnotlar ve güvensiz inline HTML'in kaçışlanması.

Kod için highlight.js

Fenced kod blokları, 190+ dil için highlight.js'ten sözdizimi renkleri alır; dil belirtilmezse otomatik algılama yapılır.

Satır içi + blok KaTeX matematik

Matematiği tek veya çift dolar işaretiyle sarın ($E = mc^2$ veya $\int_0^1 f(x) dx$). KaTeX, tarayıcıda doğru ve hızlı LaTeX render eder; MathJax round-trip'i yoktur.

Mermaid diyagramlar (lazy-load)

Akış şeması, sıra diyagramı, gantt grafiği için ```mermaid fenced bloklar kullanın. 3 MB'lik Mermaid bundle sadece diyagram kullanınca indirilir.

Üç görünüm modu

Bölünmüş, Sadece-Düzenleyici ve Sadece-Önizleme modları arasında tek tıkla geçin. Tam ekran modu, odaklı yazım için dikkat dağıtıcıları gizler.

Sanitize çıktı + dışa aktarma

Çıktı DOMPurify'dan (SVG/MathML allowlist ile) geçirilerek eklenir; embed güvenlidir. Render HTML'i kopyalayın, kaynak markdown'ı kopyalayın veya bağımsız dosya olarak indirin.

Nasıl kullanılır

Markdown'ı sol panele yazın veya yapıştırın. Sağdaki önizleme 80 ms debounce ile canlı güncellenir. Araç çubuğundan kalın, italik, başlık, link, kod, alıntı, liste ve tablo ekleyin ya da "Örnek"e tıklayarak özellik gösterim belgesini yükleyin. Görünüm modları (Bölünmüş / Düzenleyici / Önizleme) arasında geçin, tam ekrana açın, sonucu HTML veya .md olarak dışa aktarın. Hiçbir şey yüklenmez — markdown-it, DOMPurify, highlight.js, KaTeX ve Mermaid hepsi tarayıcınızda çalışır.

Sıkça sorulan sorular

Markdown'ım bir sunucuya yükleniyor mu?

Hayır. Tüm önizleyici tarayıcınızda markdown-it (parser), DOMPurify (sanitizer), highlight.js (kod renkleri), KaTeX (matematik) ve Mermaid (diyagramlar) ile çalışır. Yapıştırılan metin asla cihazınızdan çıkmaz; özel taslaklar ve yayınlanmamış yazılar için güvenlidir.

Hangi markdown çeşidini destekler?

GitHub Flavored Markdown (CommonMark + tablolar, fenced kod, autolinks, strikethrough, görev listeleri) artı KaTeX matematik sözdizimi ve fenced ```mermaid bloklarda Mermaid diyagramlar. URL'ler otomatik linklenir ve tipografik dönüşümler (em-dash, akıllı tırnaklar) uygulanır.

Render edilen HTML embed için güvenli mi?

Evet. Çıktı, KaTeX/Mermaid SVG çıktısına izin veren bir allowlist ile DOMPurify'dan geçirilir; bu nedenle hazırlanmış markdown ile cross-site scripting saldırıları engellenir. Kaynaktaki ham HTML, çalıştırılmaz, kaçışlanır.

Yüklediği kütüphaneler ne kadar büyük?

markdown-it (~124 KB), DOMPurify (~27 KB), highlight.js (~127 KB) ve KaTeX (~271 KB + 24 KB CSS) ilk ziyarette yüklenir. Mermaid (3,3 MB) sadece diyagram kullanınca indirilir; ilk sayfa hızlı kalır.

Render edilmiş HTML'i dışa aktarabilir miyim?

Evet. Render markup'ı panoya almak için "HTML kopyala", bağımsız belge kaydetmek için "HTML indir", kaynağı saklamak için "Markdown kopyala" / ".md indir" kullanın.

Tooljar ekibi tarafından markdown-it (v14+), DOMPurify, highlight.js (v11+), KaTeX (v0.16+) ve Mermaid (v11+) ile inşa edildi — hepsi saf JavaScript ile sarmalandı, editör girdisinde sıfır analytics; araç cache'lendikten sonra çevrimdışı çalışır ve taslak gizliliğinize saygı duyar.