A Custom Element for typesetting math written in (La)TeX, using MathJax.
See the demo page.
Make math-tex.js and mathjax-loader.js available and load both in the head
of your page,
<script src="https://github.com/janmarthedal/math-tex/raw/master/mathjax-loader.js"></script>
<script src="https://github.com/janmarthedal/math-tex/raw/master/math-tex.js"></script>(make sure to concatenate and minify for production use). To have support for many browsers who don't yet have Custom Elements, Shadow DOM and MutationObservers available natively, download a polyfill library and insert something like
<script src="https://github.com/janmarthedal/math-tex/raw/master/node_modules/webcomponents.js/webcomponents.min.js"></script>in your page head (preferable as the first script).
To insert math inline, write something like <math-tex>x^2+2x-8</math-tex>.
To render math in display/block style, add the attribute display="block":
<math-tex display="block">\sum_{k=1}^n k = \frac{n(n+1)}{2}</math-tex>By default, the MathJax library will be loaded when the first <math-tex> element is created. To start
loading the library earlier, for instance in the head of the page, you can put
<mathjax-loader></mathjax-loader>where you would like the load to start.