KaTex and OnsenUi

Johannes Almer

Hi,

I’am new to Onsen UI and want to create an app with mathematical formula. Therefore I’ve choosen KaTex javascript library.
I included the javascript and css files before the body-tag with

<link rel="stylesheet" href="katex/katex.min.css">
<script src="katex/katex.min.js" type="text/javascript"></script>
<script src="katex/contrib/auto-render.min.js" type="text/javascript"></script>

and at the end of the body i included the function.

<script>
renderMathInElement(document.body);
</script>
</body>

If i try to use it, it works perfect with the sample app from the website
But if i try to use it inside e.g. the Splitter JS Code from the Playground, it doesn’t render the formulas inside the templates, just inside the body e.g.

<template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
	$$a^2$$
  </ons-page>
</template>						
$$a^2$$
<script src="js/app.js" type="text/javascript"></script>
<script>
renderMathInElement(document.body);
</script>
</body>

Inside the template about.html this is not rendered as math, but the text just before <script… is rendered as a².

What can i do?

Thanks for your help.

emccorson

@Johannes-Almer

It looks like this problem is to do with the way auto-render works and not a problem with OnsenUI.

renderMathInElement walks through the child nodes of the element argument (in this case document.body) and renders the maths in any text nodes it finds. Before a template is activated it doesn’t have any child nodes so katex doesn’t see its contents.

I think in this case you will need to call katex once you have loaded the template.