HyperMD

Гипермд

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

Онлайн демо | Примеры | Документация

中文介绍

QuickStart

 // npm install --save hypermd codemirror
var HyperMD = require ( 'hypermd' )
var myTextarea = document . getElementById ( 'input-area' )
var editor = HyperMD . fromTextArea ( myTextarea )

Также для требований, посылок, Webpack, обычного браузера Env. Прочитайте документ

Зачем использовать Hypermd?

Hypermd-это набор дополнений Codemirror / режимы / темы / команды / keymap и т. Д.

Вы можете использовать как оригинальный Codemirror, так и Hypermd на одной и той же странице.

? Написать и предварительный просмотр на лету

• Регулярные блоки и элементы отметки
  • Сильный , акцент , Удар , Code
  • Ссылки, изображения
  • Заголовок / QUOTE / Кодовый блок / список / горизонтальное правило
• Расширение разметки
  • Простая таблица
  • Сноска ¹
  • Список TODO (поле нажатием)
  • Ямл Фронт Материал
  • $ LaTex $ Формула, встроенный или блочный режим отображения ²
  • Emoji :: :joy: =>? (Также поддерживает пользовательские смайлики)
• И еще
  • HTML в Markdown - Wysiwig MDX возможно
  • #hashtag поддержка ³ , см. Демо
  • Блок -схема и диаграммы (русалка или блок -схема.js)

? Лучший опыт разметки

• Загрузить изображения и файлы через буфер обмена или Drag'ndrop
• Alt+нажмите , чтобы открыть ссылку / прыгнуть в сноску ¹
• Находить на прочитанные сноски
• Скопируйте и вставьте , переведите HTML в Markdown ⁴
• Легкие и готовые к использованию связки с ключами (он же Keymap)

? КОДЕМРРУРСКИЕ ПРЕИМУЩЕСТВО

• Синтаксический выделение для блоков кода, поддерживает более 120 языков ⁵ . Режим может быть загружен по требованию.
• Настраиваемые связки с ключами
• Разница и слияние
• Темы ⁶
• Почти все аддоны Codemirror!

? Расширяемый и настраиваемый

• Используйте Powerpacks для интеграции либеральных и услуг 3-й стороны на лету
  • Mathjax, отмечен, Katex и многое другое.
  • Прочитайте список
• Функции HyperMD сильно модулируются

? Приспособлен KeyMap "Hypermd":

• Стол
  • Введите создать таблицу с | column | line |
  • Введите вставьте новую строку или завершите таблицу (если последняя строка пуста)
  • TAB или Shift-Tabe для перемещения между ячейками
• Список
  • Вкладка или смену смены, чтобы отступить/непреднамеренный элемент текущего списка
• Форматирование соседнего слова (или выбранного текста)
  • Ctrl+B Bold
  • Ctrl+я акцент
  • Ctrl+d удар

Особая благодарность

? Сервис и ресурс

Icomoon - Iconpack (бесплатная версия) Демо -страница использует значки Icomoon. Связанные файлы хранятся в Demo/Svgicon.	Кодеки - научная библиотека с открытым исходным кодом FoldMath использует сервис Codecogs в качестве по умолчанию Tex Mathrenderer. (Вы можете загрузить Powerpack, чтобы использовать другой рендерер, например, Katex или Mathjax)
Sm.ms - бесплатная служба хостинга изображений Демо-страница и PowerPack/INSERT-FILE-WITH-SMMS Используйте API SM.MS для загрузки пользовательских изображений. (Если вы хотите интегрировать сервис SM.MS, используйте PowerPack)	Эмоджионе - открытые иконы смайликов Демо-страница и PowerPack/Fold-Emoji-With-Emojione Использовать значки эмодзи, предоставленные бесплатно Emojione (бесплатная лицензия) (Вы можете использовать другие альтернативы, например, Twemoji из Twitter)
Codemirror - Редактор кода в браузер. Requirejs - JavaScript AMD Module Loader. Katex - самая быстрая библиотека математического набора для Интернета. Отмеченные , обновления и более замечательные либера.

? Спонсоры

Спонсоры (отсортированы по дате)

☕phithon ☕c*i ☕*yuan ☕*xiuzhang ☕*junjie ? 圆伞科技☕*di

Внося

Hypermd-это личный проект с открытым исходным кодом от Laobubu. Взносы приветствуются. Вы можете:

• Вилка на GitHub, создайте свои удивительные темы и дополнения.
• Купить мне кофе
• Распространение гипермма в мир!

---

Сноски

1. Ctrl+Click работает тоже, но будет прыгать в сноску, если существует. ↩ ↩ ²

2. Математический блок Используйте $$ , чтобы обернуть выражение вашего текста. ↩

3. Отключено по умолчанию, см. DOC; #USE TWO HASH SYMBOL# Если имя тега содержит пробелы. ↩

4. Используйте Ctrl+Shift+V чтобы вставить простой текст. ↩

5. Языки столько, сколько поддерживает Codemirror. ↩

6. Если тема не предназначена для HyperMD, некоторые функции могут отсутствовать. ↩