CODEWITHSUNDEEP
javascripthtmlnode.jskatex
usul
usul

Reputation: 804

Generating HTML with KaTeX and nodejs

I run into problems trying to render a nontrivial formula in HTML and CSS. It just creates a sort of jumbled mess of unicode characters on my screen.

I downloaded KaTeX into directory ./katex/ and created test.js:

var katex = require('./katex/katex.min.js');
var html = katex.renderToString("x^y");
console.log(html);

I ran the command 'nodejs test.js' and pasted the output into this minimal html file test.html (with line breaks inserted for readability):

<html>
<head>
<link rel="stylesheet" type="text/css" href="./katex/katex.min.css">
</head>
<body>

<span class="katex"><span class="katex-mathml"><math><semantics>
<mrow><msup><mi>x</mi><mi>y</mi></msup></mrow>
<annotation encoding="application/x-tex">x^y</annotation></semantics>
</math></span><span class="katex-html" aria-hidden="true">
<span class="strut" style="height:0.664392em;"></span>
<span class="strut bottom" style="height:0.664392em;vertical-align:0em;">
</span><span class="base textstyle uncramped"><span class="mord">
<span class="mord mathit">x</span><span class="vlist">
<span style="top:-0.363em;margin-right:0.05em;">
<span class="fontsize-ensurer reset-size5 size5"><span style="font-size:0em;">​
</span></span><span class="reset-textstyle scriptstyle uncramped">
<span class="mord mathit" style="margin-right:0.03588em;">y</span>
</span></span><span class="baseline-fix">
<span class="fontsize-ensurer reset-size5 size5">
<span style="font-size:0em;">​</span></span>​</span></span></span>
</span></span></span>

</body>
</html>

You can't see it here, but there are also some unicode zero-width space characters (200b).

I then opened this in a browser and got a mess of extra unicode-like characters.

displaying test.html

The same thing happens for other formulas like \sqrt{} and \frac{}. What I am doing wrong? Thanks.

Upvotes: 1

Views: 991

Answers (1)

Bala
Bala

Reputation: 68

This is an encoding issue. Just add the meta tag in html file to solve the issue. 

<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="./katex/katex.min.css">
</head>

Upvotes: 3

Related Questions