Diplay style math

[cscherrer]

Thanks for your work on this, and to @fredrikekre for Documenter et al. Really great stuff.

From a markdown file, inline math seems to work with a single $ delimiter. But I'm having some trouble getting is in "display" style.

I've tried

$$
f(x)
$$

and

\[
f(x)
\]

with no luck. Is there a way to do this?

[piever]

Thanks for the nice words!

Both methods should work. One thing I've noticed is that it seems you need to leave a blank line before the dollars, not sure why. I've added a couple of examples here, do they work for you? This is the expected outcome:

[cscherrer]

Oh weird. Those work (thanks) but it doens't seem to allow the usual multiline way of writing it.

I've used KaTeX before, and environments were no problem. Some of the symbols also looked better, like the π and the ∑. I'm guessing the multiline weirdness might be a parsing bug, and the font weirdness might just be limitations of that particular font. Does that sounds right to you?

[cscherrer]

Just confirmed about the fonts thing. Rebuilding the katex fonts and copied them into build/fonts gives this

[piever]

I see, so I'm missing KaTeX fonts. Can you try https://github.com/piever/Remark.jl/pull/19, rebuild Remark and see if this fixes the font issue for you? (EDIT: it is now merged. It also bumps the KaTeX version, does that happen to fix the multiline problem?)

Concerning the multiline problem, is this a Remark.jl issue or a problem with Remark.js? Meaning, can you reproduce the bug using Remark.js directly? The instruction for KaTeX are here. In that case I'd recommend opening a bug report at Remark.

[piever]

Once we figure out the minimal set of things one needs to install KaTeX, it should probably be moved to its own package. Interact uses it as well and I imagine it's running into the same font issue.

[cscherrer]

Thanks, I tried mutliline in Remark directly and it looks fine. It seems helpful to compare this file vs extracting its markdown and asking Remark.jl to rebuild it. Here's the diff:

>>> diff ./remarktest.html build/index.html                       
5,8c5,6
<     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<     <style type="text/css">
<       /* Slideshow styles */
<     </style>
---
>     <meta charset="utf-8">
>     <link rel="stylesheet" type="text/css" href="styles.css">
15c13,17
< # \\(\KaTeX{}\\) in remark
---
> 
> 
> 
> # \(\KaTeX{}\) in remark
> 
18a21,23
> 
> 
> 
21,22c26,29
< 1. This is an inline integral: \\(\int_a^bf(x)dx\\)
< 2. More \\(x={a \over b}\\) formulae.
---
> 
> 1. This is an inline integral: \(\int_a^bf(x)dx\)
> 2. More \(x={a \over b}\) formulae.
> 
26,28c33,37
< $$
< e^{i\pi} + 1 = 0
< $$
---
> 
> :$
> 
> 
> e^{i\pi} + 1 = 0 :$
31,34c40,44
<     <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
<     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
<     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js"></script>
<     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
---
> 
>     <script src="remark.min.js" type="text/javascript"></script>
>     <script src="katex.min.js"></script>
>     <script src="auto-render.min.js"></script>
>     <link rel="stylesheet" href="katex.min.css">
36,38c46,48
<       var options = {};
<       var renderMath = function() {
<         renderMathInElement(document.body);
---
>         var options = {};
>         var renderMath = function() {
>         // renderMathInElement(document.body);
40,47c50,58
<         // renderMathInElement(document.body, {delimiters: [ // mind the order of delimiters(!?)
<         //     {left: "$$", right: "$$", display: true},
<         //     {left: "$", right: "$", display: false},
<         //     {left: "\\[", right: "\\]", display: true},
<         //     {left: "\\(", right: "\\)", display: false},
<         // ]});
<       }
<       var slideshow = remark.create(options, renderMath);
---
>         renderMathInElement(document.body, {delimiters: [ // mind the order of delimiters(!?)
>             {left: "$$", right: "$$", display: true},
>             {left: "$", right: "$", display: false},
>             {left: "\\[", right: "\\]", display: true},
>             {left: "\\(", right: "\\)", display: false},
>         ]});
>         }
> 
>         var slideshow = remark.create({}, renderMath);
49c60
<     </script>
---
>         </script>
51c62
< </html>
\ No newline at end of file
---
> </html>

[piever]

It's actually because of Documenter: if you build the presentation with documenter=false option, the multiline format works just fine. Do you have any idea why Documenter would change that part of markdown or if there is some option one can give to leave "non Julia specific" markdown as is?

EDIT: a possible hack around it is to replace double dollars by a normal string before passing the markdown to documenter and then replace back (I think I'm doing it for some other thing that was getting messed up).

[piever]

One can get it to work with Documenter but the level of escaping really is a bit silly:

\$\$
e^{i\pi} + 1 = 0 \\\\\\\\ 
\sum_{n=0}^\infty \alpha^n = \frac{1}{1-\alpha}
\$\$

Interestingly enough, one can actually use Documenter math mode:

e^{i\pi} + 1 = 0 \\\\
\sum_{n=0}^\infty \alpha^n = \frac{1}{1-\alpha}

I'm not sure why you'd need 4 \ rather than 2 for the newline (\newline OTOH seems to work just fine). This seems to be a Remark.js+KaTeX thing more than a Remark.jl + Documenter

[piever]

I've done the hack of replacing the dollars. So on master:

$$
e^{i\pi} + 1 = 0 \newline
\sum_{n=0}^\infty \alpha^n = \frac{1}{1-\alpha}
$$

should work. I'd recommend against \\ for the newline as the combination of Documenter plus Remark makes it so that escaping that is close to impossible....