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