uniapp中使用mathJax解析数学公式

最新推荐文章于 2024-04-07 17:14:15 发布
最新推荐文章于 2024-04-07 17:14:15 发布
阅读量2.5k 收藏 3
点赞数 2
分类专栏： uniapp项目开发问题记录 文章标签： uniapp mathjax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y00010010/article/details/123514003
版权

需求来源

最近开发一款做题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>

祝大家生活愉快。

1条粉肠
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
uniapp 引用MathJax.js 动态 渲染latex 公式
huxiying001的专栏
10-30 2640
1.uniapp 支持renderjs renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 2.在页面上写如下代码： <template> <view> <view class="content" :prop="content" :change:prop="MathJax.updateMathJax" > {{content}} <text v-html="conte...
UNIAPP使用MathJax解析数学公式
u011628993的博客
04-20 2781
近期有个需求，将之前后台录入的MathJax公式解析展示到APP中，研究了一下论坛里的代码，最终实现了需求，将代码和遇到的问题整理一下发出来，分享一下经验。 实现的效果图在下面附件中，目前**只测试过安卓APP，H5和苹果APP未测试** 核心代码如下： 因为目前只有一个页面使用数学公式，所以未封装，多个页面需要的话可以自行封装一个JS。 将代码完整的复制到vue页面里即可使用 ```javascript <script module="MathJax" lang="renderjs".
uni-app学习笔记之Math内建对象
紫微斗数学习交流
12-29 779
//Math var r = Math.ceil(1.233) //2 console.log(r); r = Math.floor(1.233) //1 console.log(r); r = Math.round(r) //1 console.log(r); r = Math.random() console.log(r); //0.0975005 //生成1个10-20之间的随机数 r = 10 + Math.round(
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程
最新发布
weixin_45283069的博客
04-07 221
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程_uniapp解析makdown字符串-CSDN博客
使用mathjax解析公式
weixin_42407989的博客
02-02 452
【代码】使用mathjax解析公式。
mathJax 数学公式插件 本地引用
05-24
在“mathJax 数学公式插件 本地引用”这个场景中，我们主要关注如何在本地环境中使用MathJax来显示数学公式。这通常是为了解决在线依赖网络服务可能导致的加载速度慢或不稳定的问题。通过本地引用，你可以将MathJax...
react-mathjax：显示数学公式的React组件
02-03
React组件以显示数学公式。 安装 $ npm i react-mathjax --save 用法 const MathJax = require ( 'react-mathjax' ) const tex = `f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x} \\,d\\...
MathJax展示数学公式
09-13
总之，“MathJax展示数学公式”涉及的关键技术包括：使用MathJax加载和渲染LaTeX字符串，H5混合开发中的客户端与服务器数据交互，以及在WebView中处理原生应用的消息。通过理解和应用这些技术，你可以在Web应用中...
MathJax（MarkdownPad 2 显示数学公式）
04-09
MarkdownPad 2 显示数学公式，使用MathJax MarkdownPad 2是不支持数学公式在编辑器内实时渲染的，但是MarkdownPad 2的好处是可以左右对比格式和效果。 这里介绍一个MarkdownPad 2 查看数学公式的方法。 使用教程：...
MathJax-2.7.1.zip
07-06
官网太慢，我下载了大约一小时。自己折腾jekyll博客写数学公式需要，分享给大家。
前端Js显示数学公式插件(MathJax最新源码)
09-26
MathJax官网总是下载失败，亲测可用，放一个2.3版本的源码在这里。MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
MathJax最新版本
11-01
MathJax最新版本，完美解决复杂数学公式在页面上的显示问题
解决“0.1 + 0.2 = 0.30000000000000004” - uniapp中JS浮点运算精度问题 - uniapp引入decimal.js、math.js等数学库
Rudon滨海渔村的博客
12-07 2639
运算很准.jpg【js】小数浮点数计算不准确问题 - 三行代码 - 博客园1）uniapp项目引入decimal.js2）在页面中使用数学库方法进行运算 uniapp使用decimal.js处理js的加减乘除的计算精度问题 - 赵永强 - 博客园npm i decimal.js import { Decimal } from 'decimal.js';//引入 let num1 = 351921.8; let num2 = 3https://www.cnblogs.com/xiaozhua
uniapp实现简易计算器
weixin_47586598的博客
03-20 1518
uniapp实现简易计算器
uniapp常见有效函数库
博客不一定要自己做
12-13 453
/** 转换rpx和px @paramrpxNum @returns {number} */ export const translateRpx2Px = (rNum) => { var {windowWidth} = uni.getSystemInfoSync() var phoneScale = windowWidth / 750 return rNum * phoneScale }
【uniapp 开发】工具类 -- MathUtil
weixin_30466421的博客
08-08 1105
获取随机数 /* ** randomWord 产生任意长度随机字母数字组合 ** randomFlag 是否任意长度 min 任意长度最小位[固定位数] max 任意长度最大位 ** ** 生成6—12位随机字符串 ：randomWord(true,6,12) ** 生成随机的6位字符串 ： randomWord(false,6) */...
mathjax
易天海
12-17 569
Mathjax官网 Mathjax中文文档
在画布上用mathjax显示数学公式，并且数学公式可以鼠标按下进行拖动，鼠标放开停止拖动
07-13
您可以使用HTML和JavaScript来在画布上显示数学公式，并实现鼠标拖动的效果。首先，您需要在HTML文件中创建一个画布元素和一个包含数学公式的元素。然后，使用MathJax库将数学公式渲染到该元素中。最后，使用JavaScript监听鼠标事件，实现拖动效果。 以下是一个示例的HTML代码： ```html <!DOCTYPE html> <html> <head> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> <style> #canvas { width: 500px; height: 300px; border: 1px solid black; } </style> </head> <body> <canvas id="canvas"></canvas> <div id="formula">\(x^2 + y^2 = r^2\)</div> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let isDragging = false; let offsetX = 0; let offsetY = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillText("Drag the formula", 10, 20); ctx.fillText("Release the mouse to stop dragging", 10, 40); // Draw the formula at the current mouse position const x = offsetX + event.clientX - canvas.getBoundingClientRect().left; const y = offsetY + event.clientY - canvas.getBoundingClientRect().top; ctx.fillText("x = " + x, 10, 80); ctx.fillText("y = " + y, 10, 100); MathJax.typesetPromise(['#formula']).then(() => { ctx.drawImage(document.getElementById('formula'), x, y); }); } canvas.addEventListener('mousedown', (event) => { isDragging = true; offsetX = canvas.width / 2; offsetY = canvas.height / 2; draw(); }); canvas.addEventListener('mousemove', (event) => { if (isDragging) { draw(); } }); canvas.addEventListener('mouseup', (event) => { isDragging = false; draw(); }); </script> </body> </html> ``` 在上面的示例中，我们创建了一个500x300像素的画布和一个包含数学公式 \(x^2 + y^2 = r^2\) 的 `<div>` 元素。当鼠标在画布上按下并拖动时，会根据鼠标位置重新绘制公式，并在公式旁边显示当前鼠标的x和y坐标。当鼠标放开时，停止拖动并保持公式的位置。 请注意，示例中使用了MathJax库来渲染数学公式。您需要在页面中引入MathJax的脚本，并使用`MathJax.typesetPromise()`方法来渲染公式。 希望这可以帮助到您！如有任何问题，请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1条粉肠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值