𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗟𝗶𝘃𝗲 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗘𝗱𝗶𝘁𝗼𝗿 𝗪𝗶𝘁𝗵 𝗡𝗼 𝗟𝗶𝗯𝗿𝗮𝗿𝘆
You do not need heavy libraries to build a Markdown editor. I built a working version in about 40 lines of code. It renders HTML instantly as you type.
The process follows five specific steps:
Escape HTML characters You must replace symbols like < and > first. This prevents XSS attacks from script tags. If you skip this, your editor is unsafe.
Protect code blocks Extract code blocks and replace them with placeholders. This ensures your formatting rules do not break the code inside a sample.
Process block rules Walk through every line of text.
- Use # to create h1 tags.
- Use - to create list items.
- Use > to create quotes. Group list lines into a single ul tag.
- Apply inline regex Use regular expressions to handle text styles.
- Convert text to strong tags.
- Convert text to anchor tags. The order matters. Process bold before italics to avoid errors.
- Live render Re-render the entire content on every keystroke. Markdown is small and fast to parse. This creates the instant split-screen effect.
The logic is simple: Escape, protect, block rules, inline regex, and render.
Try the live editor here: https://dev48v.infy.uk/solve/day11-markdown-editor.html
Source: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9