How to display mathml correctly with vue?

问题

I have a lot of html snippets which embeds some mathml tag like below:

<span lang="EN-US" style='font-size:10.5pt;font-family:等线;position:relative;'><mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math"><mml:mi>a</mml:mi><mml:mo>&gt;</mml:mo><mml:mn>2</mml:mn></mml:math></span>

If I retrieve it from the server and display it in Home.vue, the math equation not shown correctly, just plain text.

If place it inside a standalone html file, browser can display it correctly, the standalone html file looks like:

<html xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body lang="ZH-CN">
<div class="WordSection1" style='layout-grid:15.6pt'>

<p class="MsoNormal"><span lang="EN-US" style='font-size:10.5pt;font-family:等线;position:relative;'><mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math"><mml:mi>a</mml:mi><mml:mo>&gt;</mml:mo><mml:mn>2</mml:mn></mml:math></span>
</p>
</div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>
</html>

Note: I placed xmlns:mml and xmlns:m inside the index.html of the vue project, and add two script tag at the end of the body section just like above, but when run the project with "npm run start", there are some errors like:

[Vue warn]: Unknown custom element: <mml:math> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Home> at src/main/webapp/app/core/home/home.vue
       <App> at src/main/webapp/app/app.vue
         <Root>

Any idea? I don't want to change the html snippet because the number is huge.

来源：https://stackoverflow.com/questions/59852556/how-to-display-mathml-correctly-with-vue

标签

vuejs2

mathml