Я створив живий Markdown-редактор без бібліотек
Для створення Markdown-редактора не потрібні важкі бібліотеки. Я створив робочу версію приблизно за 40 рядків коду. Вона миттєво рендерить HTML під час введення тексту.
Процес складається з п'яти конкретних кроків:
Екранування HTML-символів Спочатку потрібно замінити такі символи, як < та >. Це запобігає XSS-атакам через теги
<script>. Якщо пропустити цей крок, ваш редактор буде незахищеним.Захист блоків коду Витягніть блоки коду та замініть їх плейсхолдерами. Це гарантує, що правила форматування не пошкодять код у прикладі.
Обробка блочних правил Пройдіть по кожному рядку тексту.
- Використовуйте # для створення тегів
<h1>. - Використовуйте - для створення елементів списку.
- Використовуйте > для створення цитат.
Згрупуйте рядки списку в один тег
<ul>.
- Застосування inline regex Використовуйте регулярні вирази для обробки стилів тексту.
- Перетворюйте text на теги
<strong>. - Перетворюйте text на теги посилань (anchor tags). Порядок має значення. Обробляйте жирний шрифт перед курсивом, щоб уникнути помилок.
- Живий рендеринг Перерендерить весь контент при кожному натисканні клавіші. Markdown має малий розмір і швидко парситься. Це створює ефект миттєвого розділеного екрана.
Логіка проста: екранування, захист, блочні правила, inline regex та рендеринг.
Спробуйте живий редактор тут: https://dev48v.infy.uk/solve/day11-markdown-editor.html
Джерело: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9