CODEWITHSUNDEEP
htmlkatex
Normajean
Normajean

Reputation: 1275

Katex not displaying correctly

I'm trying to write some basic maths in html.

I have included the script to auto-render at the top of my html file in a script tag:

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body);"></script>

And then I have this in my html file:

<div id="myDiv">\( \approx \)</div>

Technically, this does create an "approximately equal to" sign. However, it is very thick. When I go to the Katex "try" page (https://katex.org/#demo) and write the same in there, I get a really nice-looking "approximately equal to" sign.

I've been through the documentation and there are virtually no examples whatsoever. The only thing I can find is that one "try" page which doesn't really tell me how it's actually being applied. The documentation covers how to install, code for specific maths symbols, and it even begins to cover the auto-render extension. But it never actually states how to write maths.

How can I get the "is approximately equal to" sign displaying correctly?

Upvotes: 1

Views: 749

Answers (1)

Normajean
Normajean

Reputation: 1275

I had set the font for my entire webpage by placing it in a block like this:

* {
  font-family: myFont;
}

When I remove this, all symbols render as they should.

I had deliberately applied that font to the entire document because it also changed the Katex font, which, aside from what it does to the "is approximately equal to" sign, I liked. Unfortunately, there does not appear to be any way to apply my particular font to only some Katex and not others i.e. e.g. setting the font for a paragraph that contains Katex will not work on the Katex stuff. Although I should mention that you can change the font of particular sections of Katex using predefined fonts as set out in the documentation https://katex.org/docs/supported.html#style-color-size-and-font

Upvotes: 1

Related Questions