UNIAPP使用MathJax解析数学公式

已于 2022-04-20 11:13:59 修改
阅读量2.9k 收藏 3
点赞数
文章标签： 前端
于 2022-04-20 11:07:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011628993/article/details/124292628
版权
本文档介绍了如何将后台录入的MathJax公式在安卓APP中展示，通过引入MathJax.js并配置相关设置，实现了公式的正确渲染。遇到的问题包括公式匹配符错误和缺少config参数，解决方案是调整公式格式和确保加载MathJax库时携带config参数。目前仅测试了安卓APP，H5和苹果APP未测试。
摘要由CSDN通过智能技术生成

近期有个需求，将之前后台录入的MathJax公式解析展示到APP中，研究了一下论坛里的代码，最终实现了需求，将代码和遇到的问题整理一下发出来，分享一下经验。

实现的效果图在下面附件中，目前**只测试过安卓APP，H5和苹果APP未测试**


核心代码如下：
因为目前只有一个页面使用数学公式，所以未封装，多个页面需要的话可以自行封装一个JS。
将代码完整的复制到vue页面里即可使用

HTML代码：

此时可以不用v-html，我用v-html是因为公式中还含有html元素,execQuestionContent方法的作用是处理斜杠，如果公式正确可以不用,方法代码在下方图中,有需要的可以参考


<view class="problem-content-title" v-html="execQuestionContent(item.questionDto.question.question)"> </view>

此处script代码块需要单独另写一个，不需要跟原来的script重合，复制到vue页面最下方即可。

<script module="MathJax" lang="renderjs">
  
最低0.47元/天 解锁文章
我的天空blog
关注
mathjax
易天海
12-17 630
Mathjax官网 Mathjax中文文档
uniapp 引用MathJax.js 动态 渲染latex 公式
huxiying001的专栏
10-30 2749
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解析数学公式
Y00010010的博客
03-15 2711
需求来源 最近开发一款做题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/Y0001
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程
最新发布
weixin_42100033的博客
11-08 3070
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程,Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
uniapp常见有效函数库
博客不一定要自己做
12-13 489
/** 转换rpx和px @paramrpxNum @returns {number} */ export const translateRpx2Px = (rNum) => { var {windowWidth} = uni.getSystemInfoSync() var phoneScale = windowWidth / 750 return rNum * phoneScale }
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-2.7.1.zip
07-06
官网太慢，我下载了大约一小时。自己折腾jekyll博客写数学公式需要，分享给大家。
前端Js显示数学公式插件(MathJax最新源码)
09-26
MathJax官网总是下载失败，亲测可用，放一个2.3版本的源码在这里。MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
MathJax最新版本
11-01
MathJax最新版本，完美解决复杂数学公式在页面上的显示问题
使用mathjax解析公式
weixin_42407989的博客
02-02 505
【代码】使用mathjax解析公式。
uniapp那点事
lemon94924的博客
05-22 199
获取位置uni.getLocation 1.type、circle、makers 默认为type: ‘wgs84’ 如想获取地址信息，需设置为geocode:true,type:‘gcj02’ 【只在app端有效，且打包需正确方可使用】 circle、makers用于在地图上显示圆形范围及标记图标等信息 2.打包 高德创建的应用PackageName和uniapp打包时候的Android包名一致，不然app端getLocation无法获取位置 生成keystore证书 https://www.yuned
uni-app学习笔记之Math内建对象
紫微斗数学习交流
12-29 795
//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 画布 Canvas 用法小练之画个五角星
七月七日晴52000的博客
11-07 794
Uni-App 画布 Canvas 用法小练之画个五角星
uniapp工作笔记
qq_41206597的博客
06-23 315
uniapp 接口开通 申请不通过， uniapp 小程序发布配置 笔记记录
CmdMarkdown使用MathJax公式教程
"Cmd Markdown 公式指导手册，主要介绍了如何在Cmd Markdown环境中使用MathJax来编写和显示 LaTeX 数学公式。" Cmd Markdown编辑器提供了对LaTeX数学公式的支持，这使得用户能够轻松地在文档中插入复杂的数学表达式...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值