uniapp中使用mathJax解析数学公式

最新推荐文章于 2025-01-17 11:19:25 发布

原创最新推荐文章于 2025-01-17 11:19:25 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #mathjax

uniapp项目开发问题记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在uniapp和普通网页中集成MathJax库来解析数学公式，包括在uniapp模板和HTML页面中设置MathJax配置，并提供了一个使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求来源

最近开发一款做题app的时候，遇到了需要解析数学公式的需求，无疑我们应该选择简单而又强大的mathJax。github地址：https://github.com/mathjax/MathJax，截止目前最新版为3.2.0，下面采用3.2.0演示。3.2.0下载地址：https://github.com/mathjax/MathJax/releases/tag/3.2.0

一、uniapp中使用mathJax

项目下载：https://download.csdn.net/download/Y00010010/84989721

<template>
	<view class="content">
		<view>极限$\lim\limits _{x \rightarrow 1} \frac{x^{2}-1}{x-1} $的值为：（）</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>
<script module="test" lang="renderjs">
	export default {
		mounted() {
			window.MathJax = {
			  tex: {
			    inlineMath: [['$', '$'], ['\\(', '\\)']],
			  },
			  svg:{
				  scale: 1.2
			  }
			};
			(function () {
			  var script = document.createElement('script')
			  script.id = 'MathJax-script'
			  script.async = true
			  // script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js' // cdn引入比较慢
			  script.src = 'static/tex-svg.js'; // 下载源码导入比较快，svg比chtml视觉上比较好
			  // script.src = 'static/tex-chtml.js';
			  document.head.appendChild(script)
			})();
		}
	}
</script>

二、普通网页中使用mathJax

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MathJax数学公式</title>
  </head>
  <body>
    <div>
      极限$\lim\limits _{x \rightarrow 1} \frac{x^{2}-1}{x-1} $的值为：（）
    </div>
    <script>
      MathJax = {
        tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
        svg: {fontCache: 'global'}
      };
      </script>
    <script
      id="MathJax-script"
      async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
    ></script>
  </body>
</html>