Готуємо до публікації пост з формулами

Останнім часом на хабре з'явилося багато постів з математичними формулами. Наприклад, не можна не згадати серію статей maisvendoo про теоретичної механіки.

У зв'язку з цим стало актуальним питання про вибір зручного інструменту для створення і підготовки таких постів. SeptiM запропонував скрпит, перетворює маркдаун-розмітку + латех в html-код. Я вирішив розвинути ідею і спростити інструмент, і зробив для цих же цілей онлайн-редактор:

Скріншот редактора

Редактор математичних текстів
В редакторі зручно набирати текст з великою кількістю формул і відразу бачити результат. Ви форматуєте текст в маркдауне, вводите формули на латехе і отримуєте код html.

Розглянемо приклад. Фрагмент

Формула для вирішення квадратного рівняння<nobr>_ax_^2^ + _bx_ + _c_ = 0</nobr> має вигляд

$$
x_{1,2} = {-b\pm\sqrt{b^ 2 - 4ac} \over 2a}
$$ (1)

перетворюється в
Формула для вирішення квадратного рівнянняax2 + bx + c = 0 має вигляд

x_{1,2} = {-b\pm\sqrt{b^ 2 - 4ac} \over 2a}
Особливості редактора
Редактор зберігає введений текст в localStorage, щоб при збоях браузера, операційної системи, комп'ютера або електроживлення ваша праця не пропадав.

Є експорт у варіант html-розмітки, зрозумілою хабрапарсеру (який ігнорує атрибути
style
та теги
<p>
але розуміє «тег»
<source>
і переноси рядків).

Редактор працює в браузері, звертається на сервер тільки за формулами в режимі попереднього перегляду.

Деяких можливостей в маркдауне немає. Для вставки картинок з вирівнюванням або зазначенням розмірів використовуйте голий html.

Математичні формули у вебі
На сайтах зустрічаються два способи вбудовування латеха. Формули або рендеряться на сервері і віддаються як картинки, або рендеряться на клієнта.

Існуючі рішення мені не подобалися. Сервіс codecogs.com для серверного візуалізації іноді глючив: генерував картинки з дуже великими верхніми і нижніми індексами, а потім і кешировал їх. JS-рендерер MathJax робить одну і ту ж роботу по візуалізації щоразу на всіх комп'ютерах і мобільних, так і містить обмежений набір команд.

Тому ще раніше я зробив свій сервіс генерації svg — і jpeg-картинок. В редакторі використовуються svg-картинки, щоб формули красиво виглядали на ретине.

Підсвічування синтаксису
Найбільше я задоволений підсвічуванням синтаксису. Її вдалося поєднати з браузерною перевіркою орфографії і зробити досить швидкою для роботи на льоту:
Підсвічування синтаксису
На жаль, підсвічування не завжди працює коректно (і ніколи повністю не буде, тому що в основі лежить парсер на регулярних виразах). Проте завдання орієнтування за текстом цей спосіб вирішує добре. Повідомляйте про баги, буду намагатися їх виправляти.

План розвитку
З часом я хочу зробити підтримку клавіатурних сполучень, доопрацювати анімацію (не у всіх браузерах зараз плавна), додати відкриття файлів drag & drop, розібратися з вирівнюванням формул по базовій лінії в режимі попереднього перегляду.

Код редактора, як і сервісу генерації зображень, викладений на гітхабі. Форкайте і надсилайте пул-реквесты :)

Подяки
Спасибі користувачеві maisvendoo за тестування. В редакторі використовується парсер markdown-it. Ідея підсвічування знайдена в проекті LDT.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.