Monaca Onsen UI Discord Chat Github Repo

KaTex and OnsenUi

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


    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">
          <div class="left">
            <ons-toolbar-button onclick="">
              <ons-icon icon="md-menu"></ons-icon>
          <div class="center">
    <script src="js/app.js" type="text/javascript"></script>

    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.

  • administrators


    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.