Clever Geek Handbook

Using MathJax inside a Typescript / Angular2 component

I am having trouble calling MathJax.Hub functions in my angular2 component. I fought for this for many hours last night. I need to call the MathJax API to re-render the InnerHTML string that is dynamically bound. The problem is, no matter how I import the MathJax module or npm install it, I cannot access the global MathJax variable in my .ts component. I checked this with MathJax.version and the compiler is complaining that it cannot find the undefined version.

I ran npm install MathJax on my module. Run npm install @typings mathjax. Have tried importing mathjaxdirective. In the HTML example provided when installing mathjax, I can see that the formatting is being applied correctly. What's the correct way to access the global MathJax variable inside my typescript?

+3


source to share


2 answers


I found a simple solution. It looks like this:



  • Add the following code to index.html

        <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async
            src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
    </script>

  • Add this line to your typescript file as an import:

        declare var MathJax:any;

  • Use mathjax:

        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+2


source


I actually found a solution to this. http://ruinshe.moe/2016/05/31/support-mathjax-in-angular2/ was very helpful. I've almost implemented it this way. Only the difference in directives in @components is depreciated, so I declared that in my app.module.



+1


source






More articles:


All Articles