Благодаря редактору, предварительному просмотру и подсветке синтаксиса кода.
Мотивация
Я большой поклонник написания заметок с помощью Markdown. А поскольку я разработчик, почему бы не научиться создавать простой редактор Markdown? Вот оно. Надеюсь, вам понравится этот простой урок.
Если вы хотите получить доступ к полному коду, ознакомьтесь с example-electron-markdown-editorна GitHub.
Технический стек
- Электрон: платформа для создания кроссплатформенных настольных приложений с использованием HTML, JS и CSS.
- Vite: инструмент для быстрой сборки
- React: библиотека для создания пользовательского интерфейса (бета-документ)
- TypeScript: типизированный JavaScript
- CodeMirror 6: расширяемый редактор кода для Интернета.
- Remark: расширяемый процессор Markdown.
- React-Markdown: компонент React для отображения уценки.
- react-syntax-highlighter: компонент подсветки синтаксиса для реакции с
prismjsилиhighlightjsс использованием встроенных стилей. - Neovim: текстовый редактор на базе Vim.
Создайте проект из шаблона Electron-Vite
На основе Vite-electron-builder я создал для вас новый шаблон с использованием TypeScript и React — Electron-Vite-React-Typescript-Template. Просто нажмите кнопку Use this template и назовите свой проект. Структура проекта выглядит так:
Структура проекта
packages/main: основной скрипт Electron.
packages/preload: используется в BrowserWindow.webPreferences.preload.
packages/renderer strong>: Электронная веб-страница.
Запустите приложение в режиме разработки
# install all dependencies npm i npm run watch
Совет: если вы хотите использовать другой менеджер пакетов, например yarn, вам нужно отредактировать .github/workflows, так как по умолчанию он использует npm. (узнайте больше в репозитории: example-electron-markdown-editor)
Создайте редактор Markdown с помощью CodeMirror 6
CodeMirror 6 — это новая библиотека редактора кода для Интернета, реализованная с нуля на основе опыта создания и поддержки версий с 1 по 5 за последние 13 лет. Он стремится быть более расширяемым и доступным, чем предыдущие версии.
Марейн Хавербеке
Совет. См. Руководство по переходу на CodeMirror 6
Установить зависимости
Три основные части для создания редактора Markdown (или любого другого языка) с использованием CodeMirror 6:
- Создайте состояние редактора
- Создайте вид редактора
- Создайте родительский (HTML) элемент для редактора
Создайте React Hook, чтобы предоставить компонент представления редактора
React Hook позволяет нам повторно использовать код в разных местах, что значительно упрощает расширение нашего приложения в будущем.
./packages/renderer/src/use-codemirror.tsx
Используйте хук React, предоставив обработчик состояния и родительский элемент для редактора
./packages/renderer/src/editor.tsx
Реализовать компонент редактора в компоненте приложения
./packages/renderer/src/app.tsx
Создайте предварительный просмотр Markdown в React, используя react-markdown
Установить зависимости
yarn add react-markdownСоздайте компонент предварительного просмотра и внедрите компонент ReactMarkdown
./packages/renderer/src/preview.tsx
Реализовать компонент предварительного просмотра в компоненте приложения
./packages/renderer/src/app.tsx
Выход
npm run watch
Вы заметили, что синтаксис кода не выделен. Итак, давайте исправим это, введя еще одну зависимость:
npm i react-syntax-highlighterТеперь preview.tsx становится:
Теперь мы выделили синтаксис нашего кода:
Далее мы также хотим добавить функцию, позволяющую пользователям копировать код.
- Создайте компонент для кнопки копирования:
- Используйте его внутри preview.tsx.
Выход:
Протестируйте наше приложение в среде разработки:
Создайте предварительный просмотр Markdown в React с помощью функции CodeMirror RunMode (эксперимент)
Запуск режима CodeMirror вне редактора. Функция CodeMirror.runMode. Как использовать runMode function, объясняется в этом видео, созданном моим любимым ютубером — Как создать редактор Markdown с использованием Electron, ReactJS, Vite, CodeMirror и Remark. Но вы не можете просто скопировать код и ожидать, что он будет работать так же, как показано в видео, потому что он использует CodeMirror 5. Поэтому, чтобы заставить его работать с CodeMirror 6, вам потребуются некоторые дополнительные настройки.
Второй подход требует больше усилий для выполнения работы, чем первый, но почему его стоит здесь упомянуть? На самом деле, преимущество использования CodeMirror RunMode заключается в том, что мы можем иметь ту же подсветку синтаксиса кода, что и в нашем редакторе разметки CodeMirror.
В будущем я обновлю свое решение с помощью функции CodeMirror runMode. Мы могли бы сравнить различия в использовании различных методов.
Скомпилируйте и откройте приложение Electron
Использование скрипта npm
compile: Этот скрипт настроен на максимально быструю компиляцию приложения. Он не готов к распространению, скомпилирован только для текущей платформы и используется для отладки. (кредит: https://github.com/cawa-93/vite-electron-builder)
npm run compile
open dist/mac/your-app-name.app
Совет. Когда вы запускаете скомпилированное приложение, вы не можете запустить приложение в разработке, как раньше.
Исправлено: нужно закрыть скомпилированное приложение, а затем npm run watch
Заключение
Спасибо за прочтение! В этой статье рассказывается, как создать редактор Markdown с помощью CodeMirror 6, а также как создать страницу предварительного просмотра Markdown. С помощью этой базовой настройки вы всегда можете расширить это приложение, добавив новые функции в свой проект. Пожалуйста, не стесняйтесь использовать этот пример.
В следующем я воссоздам этот редактор уценки для веб-приложения, используя Next.js, TypeScript, TailWindCSS, CodeMirror 6 и react-markdown.
Удачного кодирования! ☺️
Читать дальше
Полезные источники и ссылки
- Видео, которое я посмотрел, чтобы завершить вышеупомянутый проект — Как создать редактор Markdown с использованием Electron, ReactJS, Vite, CodeMirror и Remark.
- Оригинальный шаблон, который я строю на Vite-electron-builder
