Saya Membangun Editor Markdown Live Tanpa Library
Anda tidak memerlukan library yang berat untuk membangun editor Markdown. Saya membangun versi yang berfungsi dalam sekitar 40 baris kode. Editor ini merender HTML secara instan saat Anda mengetik.
Prosesnya mengikuti lima langkah spesifik:
Escape karakter HTML Anda harus mengganti simbol seperti < dan > terlebih dahulu. Ini mencegah serangan XSS dari tag script. Jika Anda melewatkan hal ini, editor Anda tidak aman.
Lindungi blok kode Ekstrak blok kode dan ganti dengan placeholder. Ini memastikan aturan pemformatan Anda tidak merusak kode di dalam sampel.
Proses aturan blok Telusuri setiap baris teks.
- Gunakan # untuk membuat tag h1.
- Gunakan - untuk membuat item daftar.
- Gunakan > untuk membuat kutipan. Kelompokkan baris daftar ke dalam satu tag ul tunggal.
- Terapkan regex inline Gunakan regular expression untuk menangani gaya teks.
- Ubah text menjadi tag strong.
- Ubah text menjadi tag anchor. Urutannya penting. Proses teks tebal sebelum miring untuk menghindari kesalahan.
- Render secara live Render ulang seluruh konten pada setiap ketukan tombol. Markdown berukuran kecil dan cepat untuk diparsing. Ini menciptakan efek split-screen instan.
Logikanya sederhana: Escape, lindungi, aturan blok, regex inline, dan render.
Coba editor live di sini: https://dev48v.infy.uk/solve/day11-markdown-editor.html
Sumber: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9