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.

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


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


Log in to reply