problem with rendering MathML tags inside asp.net core view

Question

hi everybody i want to render MathMl tags inside view but they dont render properly these are my javascript libraries

@section Styles
{
 <script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

this is rendered tag

<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>2</mn><msqrt><mn>2</mn></msqrt></math>

this is tag in inspect element

any help will be highly appreciated

Answer 1

For a more elegant approach, avoid rendering script tags directly above the @section because sometimes they won't execute at all. Instead, include your scripts directly within your view.

remove @section area and render script element in your chelid view

Answer 2

Following code sample works well on my side:

<h1>MathJax Demo</h1>

<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>2</mn><msqrt><mn>2</mn></msqrt></math>

@section Scripts{
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
}

Test Result

To troubleshoot the issue, please check:

1. if all required mathjax js files are loaded successfully from browser Network tab

2. if any error/exception occurs from browser Console tab

3. if any conflict with other js library (can create a new view page without using layout to test mathjax feature only)

4. try to use other browser to test if it can work well