Готовим к публикации пост с формулами

    В последнее время на хабре появилось много постов с математическими формулами. Например, нельзя не вспомнить серию статей 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- и png-картинок с формулами. В редакторе используются svg-картинки, чтобы формулы красиво смотрелись на ретине.


    Подсветка синтаксиса


    Больше всего я доволен подсветкой синтаксиса. Её удалось совместить с браузерной проверкой правописания и сделать достаточно быстрой для работы на лету:


    Подсветка синтаксиса

    К сожалению, подсветка не всегда работает корректно (и никогда полностью не будет, потому что в основе лежит парсер на регулярных выражениях). Однако задачу ориентирования по тексту этот способ решает хорошо. Сообщайте о багах, буду пытаться их исправлять.


    План развития


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


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


    Благодарности


    Спасибо пользователю maisvendoo за тестирование. В редакторе используется парсер markdown-it. Идея подсветки найдена в проекте LDT.

    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 31
    • +1
      Поздравляю с официальным релизом )
      • +1
        Спасибо. Назовем это бета-релизом :)
      • 0
        Напомнило stackedit.io
        • 0
          Я сначала хотел его форкнуть, но он показался слишком тяжеловесным.
        • 0
          Расскажите пожалуйста, вкратце, чем маркдаун лучше чем простой html и почему его предпочтительнее использовать?
          • 0
            Ничем. Меньше символов набирать.
            • 0
              Удобно для ведения документации (к примеру github его нативно парсит в html) написания постов в уютный бложек и т.д. Согласитесь, писать html для контента не очень удобно, а WYSIWYG заставляет отрывать пальцы от клавиатуры
              • 0
                Да почти ничем.
                Простые тексты (текст, заголовки, немного ссылок) набирать действительно удобно. Но если документ более-менее насыщен форматированием (иллюстрации, вложенные списки, и особенно таблицы) — мрак. Неудобно, плохо контролируется. HTML многословнее, конечно, но четче и лучше контролируется. Я пробовал (и продолжаю пробовать) вести локальную вики-базу знаний маркдауном — уже проклял всё.
                Но для коротких писулек на гитхабе (readme и подобные тексты) — действительно очень хорош.
                • 0
                  а как вы думаете, было бы лучше если бы хабр использовал markdown вместо псевдоhtml?
                  • 0
                    Сложно ответить на этот вопрос, потому что там дело не только в языке, но и реализации конкретного хабрапарсера с его особенностями (помню была статья на эту тему).
                    • +4
                      Энивэй, редактор хабра очень плох. Это какая-то отвратительная фигня из каменного века.
                      Нет ничего прекраснее набирать текст в русской раскладке, и чтобы вставить пару чёртовых тегов, переключаться на англ., потом обратно на русскую.
                      Я, было, думал, markdown всех спасёт, но у него тоже есть проблемы.
                      Потом я вспомнил про редактор medium.com.
                      Но увы, неповоротливая машина Тематических Медиа вряд ли когда-нибудь созреет до такого.
                      Холопы должны страдать.
                • 0
                  Спасибо! Эта штука придется очень кстати! Как раз сейчас мучаюсь над формулами.
                  • +1
                    base64 формат добавить было бы тоже полезно
                    • +1
                      А не могли бы вы прикрутить поддержку кириллицы в формулах?

                      $$ Ц_{факт} =\frac{Ц_{уст} *\mathop{Q}\limits_{H}^{P} _{факт} }{\mathop{Q}\limits_{H}^{P} _{расчет} } $$
                      • 0
                        Попробую настроить. В кириллице есть смысл в индексах и подписях.
                      • 0
                        Маленькое замечание, пишу тут, чтобы было видно всем — для вставки хабраката используется таже конструкция что и во встроенном хабраредакторе

                        <cut>
                        


                        или

                        <cut text="Все тайны откроются ниже"/>
                        
                        • +2
                          вот это бомба, даже желание появилось что-нибудь написать!!!
                          • 0
                            Спасибо! Отличный редактор!

                            Но есть момент — почему-то не видны формулы при копировании с html и вставке в документ Word. Это можно как-то решить?
                            • +1
                              Ворд 2003 не понимает картинки SVG. Я не знаю, что происходит в более новых версиях. В любом случае, при таком копировании формулы будут вставляться как картинки. Не думаю, что это удобно.

                              Задача моего редактора — подготовить html-код для публикации в вебе. Если вам нужен документ с кучей формул для печати, лучше всего сделать документ в самом латехе. В нем не так сложно разобраться, особенно когда под рукой гугл :)
                          • 0
                            Выглядит круто! Поздравляю с релизом :)

                            Было бы здорово, если бы еще и habrastorage кушал svg. Как вообще у вас с этим? Хабраэффект от постов не создает проблемы? Просто я так понимаю, что число запросов пропорционально числу формул умножить на число просмотров страницы. У меня некоторое время назад возникли небольшие проблемы с одним сервисом из-за этого.
                            • 0
                              Не создает. И даже хакер-ньюс-эффект не созает :) Причем на не сильно мощной виртуалке (Linode 1GB).

                              Формулы генерятся, кешируются и отдаются через nginx как статические файлы. Я уже описывал устройство сервиса.
                              • +1
                                Ага, понятно. Буду надеяться, что проработает дольше хабрахабра. :)
                                • 0
                                  Вот еще интересный момент. Почему вы решили не использовать одинарные доллары для inline-формул?
                                  • 0
                                    Думаю, что в конечном итоге из-за лени :)

                                    Когда вы передаете содержимое формулы в URL, вы не знаете, блочная ли это формула, или строчная. Исторически скрипт tex.s2cms.ru/latex.js был написан раньше самого сервиса генерации картинок, использовался в моем движке S2 и работал сначала с codecogs.com.

                                    Сервис codecogs.com генерировал строчную формулу, если начать ее с конструкции \inline. Я решил, что всегда буду использовать блочные формулы, а если надо — допишу \inline руками. (Это надо в редких случаях, например, чтобы уменьшить высоту дроби, добавляемой через \frac.)

                                    К тому же ограничитель в виде двойных долларов почти наверняка никогда не встретится просто так в тексте страницы, так что не будет проблем с экранировкой.

                                    Потом я сделал свой сервис и сохранил поведение с \inline для обратной совместимости.

                                    А сейчас редактор сделал по аналогии. Еще проще написать одно дополнительное правило для markdown-it, добавляющее строчный элемент, чем два.

                                    Также в эту схему удачно легла нумерация формул. Проще распарсить $$...$$(1), когда это строчное содержимое одного блока, а не содержимое двух разных блоков, $$...$$ и (1).
                                    • 0
                                      А, понятно. Я, кстати, только сейчас заметил, что $$$$ — это всегда блочная формула. Даже внутри текста.

                                      Да, спасибо за ответ.
                              • 0
                                Надо что-то с переносом строк в мобильной версии придумать. У меня каждая формула на отдельной строчке.
                                • 0
                                  Не понял, что вы имеете в виду под «каждая формула на отдельной строчке». Можно скриншот?
                                • 0
                                  Спасибо, получилась ужасно удобная штука. Как раз писал статью с большим количеством формул и наткнулся на ваш редактор, очень удобно, только поскольку был очень далёк от темы пару часов пришлось потратить на то, чтобы разобраться с механизмом работы. Хорошо бы или подробнее описать в статье или дать ссылочки для нубов в данной теме.
                                  • 0

                                    О чем нужны подробности? Я в рыбном тексте, который открывается в редакторе при первом открытии, написал, что такое латех и маркдаун. И ссылки там есть.

                                    • 0
                                      Мне уже не о чём, но сначала поскольку был совсем не в теме было сложно разобраться

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.