Hiçbir Kütüphane Kullanmadan Canlı Bir Markdown Editörü Oluşturdum
Bir Markdown editörü oluşturmak için ağır kütüphanelere ihtiyacınız yok. Yaklaşık 40 satır kodla çalışan bir versiyon oluşturdum. Siz yazdıkça HTML'i anında render eder.
Süreç beş belirli adımı takip eder:
HTML karakterlerini escape edin Öncelikle < ve > gibi sembolleri değiştirmelisiniz. Bu, script etiketlerinden kaynaklanabilecek XSS saldırılarını önler. Bunu atlarsanız editörünüz güvensiz olur.
Kod bloklarını koruyun Kod bloklarını ayıklayın ve yerlerine yer tutucular (placeholders) koyun. Bu, biçimlendirme kurallarınızın bir örnek içindeki kodu bozmamasını sağlar.
Blok kurallarını işleyin Metnin her satırını tek tek inceleyin.
- h1 etiketleri oluşturmak için # kullanın.
- liste öğeleri oluşturmak için - kullanın.
- alıntılar oluşturmak için > kullanın. Liste satırlarını tek bir ul etiketi içinde gruplandırın.
- Satır içi (inline) regex uygulayın Metin stillerini işlemek için düzenli ifadeler (regex) kullanın.
- text ifadesini strong etiketlerine dönüştürün.
- text ifadesini anchor etiketlerine dönüştürün. Sıralama önemlidir. Hataları önlemek için kalın (bold) metni italikten önce işleyin.
- Canlı render Her tuş vuruşunda tüm içeriği yeniden render edin. Markdown küçük ve ayrıştırılması (parse) hızlıdır. Bu, anlık bölünmüş ekran (split-screen) etkisi yaratır.
Mantık basittir: Escape et, koru, blok kuralları, satır içi regex ve render et.
Canlı editörü buradan deneyin: https://dev48v.infy.uk/solve/day11-markdown-editor.html
Kaynak: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9