How to display mathml correctly with vue?

人走茶凉 提交于 2021-01-05 12:27:42

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!