𝗛𝗼 𝗖𝗼𝘀𝘁𝗿𝘂𝗶𝘁𝗼 𝗨𝗻 𝗘𝗱𝗶𝘁𝗼𝗿 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗟𝗶𝘃𝗲 𝗦𝗲𝗻𝘇𝗮 𝗟𝗶𝗯𝗿𝗲𝗿𝗶𝗲
Non servono librerie pesanti per costruire un editor Markdown. Ho creato una versione funzionante in circa 40 righe di codice. Renderizza l'HTML istantaneamente mentre scrivi.
Il processo segue cinque passaggi specifici:
Escape dei caratteri HTML Devi prima sostituire simboli come < e >. Questo previene attacchi XSS tramite i tag script. Se salti questo passaggio, il tuo editor non è sicuro.
Protezione dei blocchi di codice Estrai i blocchi di codice e sostituiscili con dei segnaposto. Ciò garantisce che le regole di formattazione non rompano il codice all'interno di un esempio.
Elaborazione delle regole di blocco Analizza ogni riga di testo.
- Usa # per creare tag h1.
- Usa - per creare elementi di una lista.
- Usa > per creare citazioni. Raggruppa le righe della lista in un unico tag ul.
- Applicazione delle regex inline Usa le espressioni regolari per gestire gli stili del testo.
- Converti testo in tag strong.
- Converti testo in tag anchor. L'ordine è importante. Elabora il grassetto prima del corsivo per evitare errori.
- Rendering live Renderizza nuovamente l'intero contenuto ad ogni pressione di tasto. Markdown è leggero e veloce da analizzare. Questo crea l'effetto split-screen istantaneo.
La logica è semplice: Escape, protezione, regole di blocco, regex inline e rendering.
Prova l'editor live qui: https://dev48v.infy.uk/solve/day11-markdown-editor.html
Fonte: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9