Markdown — это облегченный язык разметки с синтаксисом форматирования простого текста. Это простой способ добавить форматирование, такое как заголовки, полужирный шрифт, маркированные списки и т. д., к обычному тексту. Markdown использует простой синтаксис форматирования для выполнения тех же действий, что и HTML, но проще, чем HTML. Я создал средство предварительного просмотра Markdown с помощью React. Вы можете попробовать приложение здесь или посмотреть весь проект в моем профиле CodeSandbox или в моем репозитории GitHub.
Технологии, которые я использовал
- React.JS
- JavaScript
- HTML5
- CSS3
Как это работает
Вот краткий обзор функциональности приложения. Приложение состоит из редактора и средства предварительного просмотра. Пользователь вводит данные в синтаксисе Markdown в редакторе и видит отформатированные выходные данные рядом с ними в средстве предварительного просмотра. Приложение — это родительский компонент React, который хранит начальное и все остальные состояния приложения. Функция рендеринга компонента создает все приложение, содержащее отдельные разделы HTML и три дочерних компонента Панель инструментов, редактор и предварительный просмотр. Компонент приложения передает реквизиты компоненту Панель инструментов в виде текста, например «Редактор» и «Просмотрщик». Компонент Редактор получает реквизиты, называемые markdown и onChange. OnChange вызывает метод handleChange метод, который обеспечивает отзывчивость области ввода текста изменяемого редактора. Метод handleChange обновляет фактическое состояние текстового редактора. Компонент Previewer использует свойство dangerouslySetInnerHTML для установки разметки, содержащейся в элементе. Компонент использует библиотеку marked синтаксического анализатора Markdown, чтобы брать уцененный текст и преобразовывать его в HTML.
Я использовал метод чтения-поиска-спроса всякий раз, когда застревал. Эти страницы больше всего помогли мне при решении задач:
Вы можете найти мою следующую запись в блоге здесь или больше обо мне на моей веб-странице.
