Preparing for publication post with formulas

Recently, many posts with mathematical formulas have appeared on Habré. For example, one can not forget a series of articles maisvendoo about theoretical mechanics.

In this regard, the issue of choosing a convenient tool for creating and preparing such posts has become topical. SeptiM proposed a script that converts Markdaun markup + latex to html code. I decided to develop the idea and simplify the tool, and made an online editor for the same purpose with the support of latek and marckown :

Math Text Editor

In the editor, it is convenient to type text with a large number of formulas and immediately see the result. You format the text in marcdown, enter formulas at a later date and get html-code.

Consider an example. Fragment

     <nobr>_ax_^2^ + _bx_ + _c_ = 0</nobr>   $$ x_{1,2} = {-b\pm\sqrt{b^2 - 4ac} \over 2a} $$ (1) 

turns into

The formula for solving the quadratic equation ax ² + bx + c = 0 is

Editor features

The editor saves the input text in localStorage, so that if the browser, operating system, computer or power fails, your work will not be lost.

There is an export to the html-markup variant, which is understandable for the habraparser (which ignores the style attributes and the <p> tags, but understands the <source> and line breaks).

The editor works in a browser, it accesses the server only for formulas in preview mode.

There are no opportunities in marcown. To insert images with alignment or indication of size, use naked html.

Mathematical formulas on the web

On the sites there are two ways of embedding latek. Formulas are either rendered on the server and given as pictures, or rendered on the client.

I did not like the existing solutions. The codecogs.com service for server rendering is sometimes buggy: it generated images with too large superscripts and subscripts, and then cached them. JS-renderer MathJax does the same job of drawing each time on all computers and mobiles, and contains a limited set of commands.

Therefore, even earlier, I made my service generating svg and png-pictures with formulas . The editor uses svg-images to make the formulas look beautiful on the retina.

Syntax highlighting

Most of all I am pleased with the syntax highlighting. She managed to combine it with browser spelling and made it fast enough to work on the fly:

Unfortunately, the backlight does not always work correctly (and never will be completely, because the parser is based on regular expressions). However, the problem of orientation in the text this method solves well. Report bugs, I will try to fix them.

Development plan

Over time, I want to make support for keyboard shortcuts, modify the animation (not all browsers are smooth now), add opening files via drag & drop, and deal with alignment of formulas on the baseline in preview mode.

The code of the editor, as well as the image generation service, is laid out on the githaba . Fork and send pull requests :)

Thanks

Thanks to maisvendoo for testing. The editor uses the markdown-it parser . The idea of ​​highlighting found in the project LDT .