3. KaTex and OnsenUi

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

KaTex and OnsenUi

  • J

    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.

    0
    E
     1 Reply
  • E
    administrators

    @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.

    0