0

I'm attempting to construct a minimal working example of KaTeX rendering a bunch of math on a web page. I've put together the following HTML file for this purpose:

$(".inline-math").each(
  function(element) {
    console.log("Rivimatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);

$(".display-math").each(
  function(element) {
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);
<p>Tässä on näyttömuotoinen yhtälö:</p>
<div class="display-math">
  F(b) - F(a) = \int_a^b f(x) \,\mathrm d x
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

The mathematics is not being rendered, but KaTeX was downloaded successfully, so that is not the cause:

KaTeX downloaded successfully.

However, jQuery is not discovering the actual elements containing the math: enter image description here

Why is this? I'd expect the div containing the math to be printed to console at least. Why isn't it beign printed, though?

P.S.

I'm not using the automatic rendering feature provided by the addon just yet. I want to get this working on a very basic level, before I complicate things more.

Community
  • 1
  • 1
sesodesa
  • 1,473
  • 2
  • 15
  • 24
  • It was the `defer` in the script attrivbutes that was postponing the retrieval and/or execution of the katex-script. I need to modify the question a bit. – sesodesa Mar 20 '19 at 09:14

1 Answers1

1

Explanation

It's simply you are using jQuery's $(selector).each() function incorrectly.

From the documentation:

Type: Function( Integer index, Element element )

Instead of following the native Array.prototype.forEach implementation, jQuery's .each's callback function will have index as first argument, and element as second argument.

What you need to do is simply:

$(".display-math").each(
  function(i, element) {
    // ----^ -^
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML,element);
  }
);

Or, you can just use VanillaJS:

document.querySelectorAll('.display-math').forEach(function(element){
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML,element);
});

Working Code

$(".inline-math").each(
  function(i, element) {
    console.log("Rivimatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);

$(".display-math").each(
  function(i, element) {
    console.log("Näyttömatikkaa: " + element.innerHTML);
    katex.render(element.innerHTML, element);
  }
);
<p>Tässä on näyttömuotoinen yhtälö:</p>
<div class="display-math">
  F(b) - F(a) = \int_a^b f(x) \,\mathrm d x
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
yqlim
  • 6,898
  • 3
  • 19
  • 43