Редактор Markdown | Веб-редактор Markdown с живым предварительным просмотром

Введение

В этом проекте мы создадим простой веб-редактор Markdown, который предоставляет живую предварительную просмотр HTML при наборе текста. Используя библиотеки, такие как Ace Editor, marked и highlight.js, вы разработаете интуитивный редактор, который не только позволяет писать в формате Markdown, но и сохраняет данные между сессиями браузера и подсвечивает фрагменты кода в предварительном просмотре.

👀 Предварительный просмотр

Живой предварительный просмотр веб-редактора Markdown

🎯 Задачи

В этом проекте вы научитесь:

настраивать HTML-структуру редактора и просмотрщика;
стилизовать редактор и просмотрщик для приятного пользовательского опыта;
реализовывать логику инициализации редактора;
преобразовывать Markdown в HTML и отображать его в просмотрщике;
синхронизировать прокрутку между редактором и просмотрщиком.

🏆 Достижения

После завершения этого проекта вы сможете:

разрабатывать веб-редактор Markdown с живым предварительным просмотром HTML;
использовать библиотеки, такие как Ace Editor, marked и highlight.js, для расширения функциональности редактора;
реализовывать сохранение данных между сессиями браузера;
предоставлять подсветку синтаксиса кода в предварительном просмотре Markdown.

Настройка HTML-структуры

Требования:

Знание основных HTML-тегов.

Функциональность:

Создать основу для редактора и просмотрщика.

В index.html создайте базовую HTML-структуру для редактора и просмотрщика.预留编辑器和预览窗格的空间。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>markdown editor</title>

    <!-- Импортировать CSS-файлы -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/default.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- div для редактора Markdown -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- div для предварительного просмотра Markdown -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- Импортировать JavaScript-файлы -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Стилизовать редактор и просмотрщик

Требования:

Основы CSS.

Функциональность:

Стилизовать редактор и просмотрщик для приятного пользовательского опыта.

Вставьте предоставленные стили в style.css. Это обеспечит правильную стилизацию как редактора, так и просмотрщика, и каждый из них будет занимать половину экрана.

/* style.css */

/* Область редактирования */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* Область предварительного просмотра */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

Этот CSS гарантирует, что редактор и просмотрщик занимают по половине экрана и располагаются рядом.

Реализовать инициализацию редактора

Требования:

Базовое понимание JavaScript.

Функциональность:

Настроить Ace Editor с заданными параметрами.

Начните main.js с логики инициализации редактора.

/* main.js */

/**
 * Инициализировать редактор
 *
 */
function initEditor() {
  // Инициализировать редактор
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Установить стиль темы
  editor.getSession().setMode("ace/mode/markdown"); // Установить режим редактора
  editor.getSession().setTabSize(4); // Установить табуляцию равной 4 пробелам
  editor.getSession().setUseWrapMode(true); // Включить перенос слов

  // Загрузить данные из локального хранилища
  editor.setValue(localStorage.localData || "");
}

Реализовать разбор Markdown

Требования:

Знание JavaScript и jQuery.

Функциональность:

Преобразовать Markdown в HTML.
Отобразить HTML в просмотрщике.

/**
 * Разобрать markdown
 *
 * @params {object} editor - Экземпляр редактора
 * @return {object} - Ящик предварительного просмотра
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // Ящик предварительного просмотра документа
  var data = editor.getValue(); // Получить данные редактора

  // Сохранить данные в локальное хранилище
  localStorage.localData = data;
  // Разобрать markdown
  data = marked(data);
  viewer.html(data);

  // Подсветить код в документе markdown
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // Вернуть viewer
  return viewer;
}

Синхронизировать прокрутку между редактором и просмотрщиком

Требования:

Понимание JavaScript-мероприятий.

Функциональность:

Синхронизировать прокрутку редактора и просмотрщика.

/*
 * Управлять ползунком прокрутки
 * Синхронизировать прокрутку между редактором и ящиком предварительного просмотра
 *
 * @params {object} editor - Экземпляр редактора
 * @params {object} viewer - Ящик предварительного просмотра
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // Перемещаться к первой строке по умолчанию
  session.setScrollTop(0);

  // Привязать событие прокрутки к редактору
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // Установить ползунок прокрутки для ящика предварительного просмотра
    viewer.scrollTop(sTop);
  });

  // Установить событие прокрутки для ящика предварительного просмотра
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // Установить ползунок прокрутки для редактора
    session.setScrollTop(sTop);
  });
}

Интегрировать все функции и инициализировать редактор

Требования:

Понимание вызова функций в JavaScript.

Функциональность:

Объединить все предыдущие шаги в единый код.
Инициализировать редактор и применить все функциональные возможности.

/* main.js */

initEditor();

/**
 * Инициализировать редактор
 *
 */
function initEditor() {
  // Инициализировать редактор
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Установить стиль темы
  editor.getSession().setMode("ace/mode/markdown"); // Установить режим редактора
  editor.getSession().setTabSize(4); // Установить табуляцию равной 4 пробелам
  editor.getSession().setUseWrapMode(true); // Включить перенос слов

  // Загрузить данные из локального хранилища
  editor.setValue(localStorage.localData || "");

  // Разобрать данные, загруженные из локального хранилища
  var viewer = parseMarkdown(editor);
  // Управлять ползунком прокрутки
  fixScrollBar(editor, viewer);

  // Реактивно разбирать markdown
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

Запуск проекта

Откройте index.html в веб-браузере.
Чтобы просмотреть и протестировать свой редактор Markdown.
Эффект страницы выглядит следующим образом:

Резюме

Поздравляем! Вы только что создали веб-редактор Markdown с функцией живого предварительного просмотра. Теперь вы можете писать содержимое Markdown, просматривать его живую HTML-реализацию и даже подсвечивать фрагменты кода внутри. Помните, что содержимое, которое вы пишете, будет сохраняться между сессиями браузера благодаря localStorage. Удачной разработки!

Разработка редактора Markdown с живым предварительным просмотром

Введение

👀 Предварительный просмотр

🎯 Задачи

🏆 Достижения

Настройка HTML-структуры

Стилизовать редактор и просмотрщик

Реализовать инициализацию редактора

Реализовать разбор Markdown

Синхронизировать прокрутку между редактором и просмотрщиком

Интегрировать все функции и инициализировать редактор

Запуск проекта

Резюме