search

getnikola / plugins

Extra plugins for Nikola
https://plugins.getnikola.com/
MIT License
57 stars 93 forks source link

[localkatex] Render formula incorrectly #308

Closed LEXUGE closed 5 years ago

LEXUGE commented 5 years ago

The localkatex rendered formula incorrectly. I did the npm install and write the USE_KATEX = True in the conf.py. However, it just displayed formula in an incorrect way. I tried the formulas in the README.

Kwpolska commented 5 years ago

Nikola was using KaTeX v0.7.1, while the newest version (that npm installed) is v0.10.2. The HTML output by v0.10.2 is incompatible with v0.7.1’s CSS. I updated Nikola’s KaTeX on master, and localkatex’s README.

To make it work, modify your math_helper.tmpl file (in base or base-jinja) like this: https://github.com/getnikola/nikola/commit/d53bc25c50d4fe97657afa4e66ecb9d31d245ff4#diff-8617bd74e76176689f16236fef1e5bd2

LEXUGE commented 5 years ago

Nikola was using KaTeX v0.7.1, while the newest version (that npm installed) is v0.10.2. The HTML output by v0.10.2 is incompatible with v0.7.1’s CSS. I updated Nikola’s KaTeX on master, and localkatex’s README.

To make it work, modify your math_helper.tmpl file (in base or base-jinja) like this: getnikola/nikola@d53bc25#diff-8617bd74e76176689f16236fef1e5bd2

I just thought of that reason. So every time the mainstream of KaTeX updates, the Nikola's template should also be updated manually?

LEXUGE commented 5 years ago

image I've edited the math_helper.tmpl and checked the integrities of the assets. Well, it looks like that, and the html code corresponding to that is like this:

<semantics><mrow><mi>e</mi><mo>&lt;</mo><mi>s</mi><mi>u</mi><mi>p</mi><mo>&gt;</mo><mi>i</mi><mi>x</mi><mo>&lt;</mo><mi mathvariant="normal">/</mi><mi>s</mi><mi>u</mi><mi>p</mi><mo>&gt;</mo><mo>=</mo><mi>c</mi><mi>o</mi><mi>s</mi><mi>x</mi><mo>+</mo><mi>i</mi><mi>s</mi><mi>i</mi><mi>n</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">e&lt;sup&gt;ix&lt;/sup&gt; = cos x + isin x</annotation></semantics>
LEXUGE commented 5 years ago

image The first line is the formula rendered by KaTeX js on client-side. The second one is rendered by localkatex.

Kwpolska commented 5 years ago

I just thought of that reason. So every time the mainstream of KaTeX updates, the Nikola's template should also be updated manually?

Not necessarily, but the version of the stylesheets (in math_helper.tmpl) and installed for localkatex must be the same.

On my side, both formulas look right, when rendered by localkatex, with the CSS version changed, in Markdown and reST:

image

LEXUGE commented 5 years ago

I just thought of that reason. So every time the mainstream of KaTeX updates, the Nikola's template should also be updated manually?

Not necessarily, but the version of the stylesheets (in math_helper.tmpl) and installed for localkatex must be the same.

On my side, both formulas look right, when rendered by localkatex, with the CSS version changed, in Markdown and reST:

image

I use org-mode for blogging. Is that the cause of the problem? If so, is it possible to solve that?

Kwpolska commented 5 years ago

I don’t have org-mode set up and can’t test it. Please check if the file in cache/ looks right (has correct HTML in all the cases).

LEXUGE commented 5 years ago

I don’t have org-mode set up and can’t test it. Please check if the file in cache/ looks right (has correct HTML in all the cases).

What do you mean by 'correct'? As I mentioned before, the Euler's formula's HTML seems wrong. Maybe org-mode processed the raw file before the localkatex. That's not well....I want the server-side rendering a lot. Would you mind paste the Euler's formula's HTML output in your case?

Kwpolska commented 5 years ago 

<p>Euler’s formula: <span class="katex"><span class="katex-mathml"><math><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>x</mi></mrow></msup><mo>=</mo><mi>cos</mi><mo>⁡</mo><mi>x</mi><mo>+</mo><mi>i</mi><mi>sin</mi><mo>⁡</mo><mi>x</mi></mrow><annotation encoding="application/x-tex">e^{ix} = \cos x + i\sin x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.824664em;vertical-align:0em;"></span><span class="mord"><span class="mord mathdefault">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.824664em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">i</span><span class="mord mathdefault mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:0.66666em;vertical-align:-0.08333em;"></span><span class="mop">cos</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">x</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.66786em;vertical-align:0em;"></span><span class="mord mathdefault">i</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mop">sin</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault">x</span></span></span></span></p>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><mo>∫</mo><mfrac><mrow><mi>d</mi><mi>x</mi></mrow><mrow><mn>1</mn><mo>+</mo><mi>a</mi><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mn>1</mn><mi>a</mi></mfrac><mi>ln</mi><mo>⁡</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>a</mi><mi>x</mi><mo stretchy="false">)</mo><mo>+</mo><mi>C</mi></mrow><annotation encoding="application/x-tex">\int \frac{dx}{1+ax}=\frac{1}{a}\ln(1+ax)+C</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:2.23369em;vertical-align:-0.86225em;"></span><span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011249999999999316em;">∫</span><span class="mspace" style="margin-right:0.16666666666666666em;"></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.37144em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mord mathdefault">a</span><span class="mord mathdefault">x</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 mathdefault">d</span><span class="mord mathdefault">x</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.7693300000000001em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:2.00744em;vertical-align:-0.686em;"></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.32144em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathdefault">a</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.16666666666666666em;"></span><span class="mop">ln</span><span class="mopen">(</span><span class="mord">1</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord mathdefault">a</span><span class="mord mathdefault">x</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathdefault" style="margin-right:0.07153em;">C</span></span></span></span></span></p>