Support LaTeX rendering

[breandan]

There is a VSCode extension which supports rendering inline LaTeX snippets. Would be nice to have something similar in IntelliJ IDEA. You might be able to use MathJax.

[vsch]

@breandan, I have been struggling with the syntax that should be used since there is no standard support for LaTeX in markdown. The MathJax syntax is popular but it is not supported by GitHub and I also have to look into Jekyll compatibility so the plugin can support another processor.

I am also considering making LaTeX support that would be transparent from processor, like table of contents which is updated in the plugin.

Something like an HTML comment that would be ignored by processors but would be used by the plugin to insert/update the HTML LaTeX code following the special comment.

For example, something like the following would make unsupported LaTeX syntax easily converted to "simulated" LaTeX support as easy as wrapping the latex in a comment. Depending on the conversion mode the result could be MathML, GIF or server based rendering.

<!--:latex
$$\begin{align*}
x^2 + y^2 &= 1 \\
y &= \sqrt{1 - x^2} \\
\end{align*}
$$
!>

MathML would insert and update the following after the comment:

<math display="block">
          <mrow>
            <mi>x</mi>
            <mo>=</mo>
            <mfrac>
              <mrow>
                <mo>−</mo>
                <mi>b</mi>
                <mo>±</mo>
                <msqrt>
                  <mrow>
                    <msup>
                      <mi>b</mi>
                      <mn>2</mn>
                    </msup>
                    <mo>−</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                  </mrow>
                </msqrt>
              </mrow>
              <mrow>
                <mn>2</mn>
                <mi>a</mi>
              </mrow>
            </mfrac>
          </mrow>
        </math>

Server based would insert/update an image tag after the special comment:

<img src="http://latex.codecogs.com/svg.latex?%5Cbegin%7Balign*%7D%0Ax%5E2%20%2B%20y%5E2%20&amp;=%201%20%5C%5C%0Ay%20&amp;=%20%5Csqrt%7B1%20-%20x%5E2%7D%20%5C%5C%0A%5Cend%7Balign*%7D%0A" alt="alt" />

Making LaTeX support not dependent on the processor but dependent on an internet connection:

GIF, would simply use the server rendering to download the result and save locally in a file with a link to that file.

What do you think?

[vsch]

@breandan, I forgot to mention that you can have LaTeX rendering right now by using the multi-line URL image and a server side rendering.

![LaTex Embedded Image](http://latex.codecogs.com/svg.latex?
\begin{matrix}
 f &= &2 + x + 3 \\
 &= &5 + x \\
\end{matrix}
)

The markdown image will display in preview but will not display on GitHub but you can use the "Change Markdown to HTML" intention on the image element to convert the image to HTML tag which will display on every processor.

Converted to HTML:

<img src="http://latex.codecogs.com/svg.latex?%5Cbegin%7Bmatrix%7D%0Af%20&amp;=%20&amp;2%20%2B%20x%20%2B%203%20%5C%5C%0A&amp;=%20&amp;5%20%2B%20x%20%5C%5C%0A%5Cend%7Bmatrix%7D%0A" alt="LaTex Embedded Image" />

It displays as:

When you want to edit it, use the "Change HTML to Markdown" intention on the img tag to get the original Markdown multi-line URL image for editing.

This will let you use LaTeX right now and create markdown documents that any processor can render with embedded LaTeX.

[vsch]

The content of the multi-line URL image is LaTeX, without the $$ block delimiters or $ inline delimiters so it is easy to edit. Here is the sample from the first reply:

![alt](http://latex.codecogs.com/svg.latex?
\begin{align*}
x^2 + y^2 &= 1 \\
y &= \sqrt{1 - x^2} \\
\end{align*}
"Image Title")

Converted to HTML:

<img src="http://latex.codecogs.com/svg.latex?%5Cbegin%7Balign*%7D%0Ax%5E2%20%2B%20y%5E2%20&amp;=%201%20%5C%5C%0Ay%20&amp;=%20%5Csqrt%7B1%20-%20x%5E2%7D%20%5C%5C%0A%5Cend%7Balign*%7D%0A" alt="alt" title="Image Title" />

Rendering of HTML img tag:

[vsch]

BTW, this workaround works for any other type of server side graphing language like UML:

![UML](http://g.gravizo.com/g?
@startuml;
actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;
User -> A: DoWork;
activate A;
A -> B: Create Request;
activate B;
B -> C: DoWork;
activate C;
C --> B: WorkDone;
destroy C;
B --> A: Request Created;
deactivate B;
A --> User: Done;
deactivate A;
@enduml;
)

Converted to HTML:

<img src="http://g.gravizo.com/g?@startuml;%0Aactor%20User;%0Aparticipant%20%22First%20Class%22%20as%20A;%0Aparticipant%20%22Second%20Class%22%20as%20B;%0Aparticipant%20%22Last%20Class%22%20as%20C;%0AUser%20-%3E%20A:%20DoWork;%0Aactivate%20A;%0AA%20-%3E%20B:%20Create%20Request;%0Aactivate%20B;%0AB%20-%3E%20C:%20DoWork;%0Aactivate%20C;%0AC%20--%3E%20B:%20WorkDone;%0Adestroy%20C;%0AB%20--%3E%20A:%20Request%20Created;%0Adeactivate%20B;%0AA%20--%3E%20User:%20Done;%0Adeactivate%20A;%0A@enduml;%0A" alt="UML" />

Displayed as:

[vsch]

@breandan, I got MathJax to work with JavaFX preview by adding the following to HTML Generation:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

The limitation right now to prevent markdown from parsing the text that includes LaTeX is to wrap it inside div tag and not have any blank lines.

<div>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</div>

To get the following in preview:

Downloading MathJax locally and changing the script reference to the local file location did not speed up the preview but does eliminate the need for internet connectivity.

[vsch]

@breandan, I will take a look at MathJax to see if I can limit its processing to only certain tags/classes so that I can parse the LaTeX text and emit special HTML that MathJax will recognize to eliminate the need for div tags.

I tried the LaTeX plugin for IntelliJ but other than some syntax highlighting could not get it to work in 2017.2

A good solution would be to have a LaTeX plugin for language syntax and completions with JavaFX/MathJax split preview like the Markdown plugin for LaTeX editing.

Then adding to the markdown plugin LaTeX injected code blocks which will give completions and syntax highlighting of the LaTeX plugin, additionally giving the option to edit it as a code fragment separate from Markdown.

Rendering in Markdown Navigator will still be done in JavaFX with MathJax script added, which I will add to the Stylesheet configuration as an additional script so it will be a matter of selecting a checkbox in settings:

What do you think of this ultimate direction for LaTeX support in IntelliJ?

[vsch]

@breandan, added GitLab Flavoured Markdown parsing and rendering functionality

• Math inline using $``$ and fenced code blocks with info of math using Katex
• Charts fenced code blocks with info of mermaid using Mermaid
• Ins/Del via {++} and [++]/{--} and [--]
• Multi-line block quotes
• Video image link rendering

This only applies to parsing and rendering HTML not the style sheet. Also link completions are GitHub like. The latter is for release 3.0.

EAP update with a fix for the issue is available.

To enable EAP update channel:

1. Select "Early Access Program" in Check updates for:
2. Then make the IDE check for updates.