Rendering in pre or code tags

[embedded-kiddie]

First of all, thank you for the awesome plugin.

Could you consider to avoid rendering the contents in pre or code tags? There are quite a few sites that explain how to express mathematical formulas in LaTeX using KaTeX scripts.

For example, the following code snippet

{% highlight tex %}
\(
s^2 = \frac{1}{n} \sum_{i=1}^n {(x_i - \overline{x})^2}
\)
{% endhighlight %}

is rendered into like this:

<pre><code>
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><msup><mi>s</mi><mn>2</mn></msup><mo>=</mo><mfrac><mn>1</mn><mi>n</mi></mfrac><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><mrow><mo stretchy="false">(</mo><msub><mi>x</mi><mi>i</mi></msub><mo>−</mo><mover accent="true"><mi>x</mi><mo stretchy="true">‾</mo></mover><msup><mo stretchy="false">)</mo><mn>2</mn></msup></mrow></mrow><annotation encoding="application/x-tex">
s^2 = \frac{1}{n} \sum_{i=1}^n {(x_i - \overline{x})^2}
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8641em;"></span><span class="mord"><span class="mord mathnormal">s</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.9291em;vertical-align:-1.2777em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3214em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal">n</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.6514em;"><span style="top:-1.8723em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.05em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.3em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">n</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.2777em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord"><span class="mopen">(</span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3117em;"><span style="top:-2.55em;margin-left:0em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">i</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord overline"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.6306em;"><span style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal">x</span></span></span><span style="top:-3.5506em;"><span class="pstrut" style="height:3em;"></span><span class="overline-line" style="border-bottom-width:0.04em;"></span></span></span></span></span></span><span class="mclose"><span class="mclose">)</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span></span>
</code></pre>

This issue happens only with \[...\] and \(...\). The $$...$$ and \begin{}...\end{} are OK.

I think we don't need rendering in pre or code tags. I would appreciate it if you would consider compatibility for sites that already use KaTeX scripts, because it's great that the owners of these sites can just install your plugin and remove the KaTeX script tags.

Thanks again!

P.S. In my site, when I write some formulas with \[...\] or \(...\), I use the following to avoid kramdown do something:

{::nomarkdown}
\(
s^2 = \frac{1}{n} \sum_{i=1}^n {(x_i - \overline{x})^2}
\)
{:/}

[yagarea]

Hello!

I think you are right that rendering latex in <pre> and <code> tags makes no sense. I will try to fix it but it will not be simple. Current implementation gets LaTeX expressions using regex. This is quick and simple but not very robust. I can see two solutions:

1) Parse rendered HTML to create AST object and check parent tags in hierarchy it self. This would be very clean and reliable solution but it will be very slow. I do not think that Jekyll currently has an API for getting AST from kramdown so the workflow would look like this:

Markdown file -> Parse to AST in inside kramdown -> Render to HTML -> Parse to AST from HTML -> Render LaTeX -> Render to HTML again

2) Edit current regex expressions to avoid rendering in mentioned tags. This can be probably easily done, but it can be uncomfortable in future to maintain. viz legendary SO post. I probably start experimenting with this option first.

Well, I promise that I will try to take a look at this soon as possible. At my university this time is beginning of exam season so it will be hard for me to find time for this issue.

---

Thank you for your kind words. :) This really motivates me to work on Open Source projects.

[embedded-kiddie]

@yagarea , Thank you for your support.

I can understand the difficulty coordinating with kramdown. First and foremost, do your best for your university exams!