vue项目中数学公式的展示
在这里有个mathjax的插件,可以将dom中的数学公式展示。
第一步安装mathjax
npm install mathjax
安装完之后,你会在index.html中发现,已经引用了js文件,并且有相关配置
<script type="text/javascript"
src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/MathML","output/SVG"],
extensions: ["mml2jax.js","MathEvents.js"]
}); </script>
并且在utils中多了一个文件MathJax.js
MathJax文件内容
export default {
MathConfig () {
if (window.MathJax) {
console.log('rendering mathjax')
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => console.log('done'))
}
}
}
再来说一个npm通用的问题,怎么配置,怎么导入
通过在网上半天查询,终于找到
将MathJax.js的配置文件改为如下
let isMathjaxConfig = false// 用于标识是否配置
const initMathjaxConfig = () => {
if (!window.MathJax) {
return
}
window.MathJax.Hub.Config({
showProcessingMessages: false, // 关闭js加载过程信息
messageStyle: 'none', // 不显示信息
jax: ['input/TeX', 'output/HTML-CSS'],
tex2jax: {
inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式选择符
displayMath: [['$$', '$$'], ['\\[', '\\]']], // 段内公式选择符
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'] // 避开某些标签
},
'HTML-CSS': {
availableFonts: ['STIX', 'TeX'], // 可选字体
showMathMenu: false // 关闭右击菜单显示
}
})
isMathjaxConfig = true // 配置完成,改为true
} const MathQueue = function (elementId) {
if (!window.MathJax) {
return
}
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, document.getElementById('app')])
} export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue
}
这里做一个简单说明,Hub.Config中是做一些基本配置,再通过调用Hub.Queue这个方法对dom树进行渲染。
基本配置搞定,然后将文件导入到main.js中
import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax
接下来就可以使用了
watch: {
list: function () {
this.$nextTick(function () {
if (this.MathJax.isMathjaxConfig) { // 判断是否初始配置,若无则配置。
this.MathJax.initMathjaxConfig()
}
this.MathJax.MathQueue()// 传入组件id,让组件被MathJax渲染
})
}
}
监听list是否发生变化,发生变化之后,就在dom渲染完之后,生成试题的正确展示形式
vue项目中数学公式的展示的更多相关文章
- vue项目中要实现展示markdown文件[转载]
转载 版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/nihaoa5 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- dom元素的tabindex属性介绍及在vue项目中的应用
dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...
- vue项目中使用组件化开发
最近在使用vue-cli结合webpack打包工具开发一个后台管理系统,使用vue难免需要运用组件化思想,而这也正是vue的一大特点. 在之前做的vue项目中,稍微有一点组件化的思想,可能是对组件化不 ...
- vue项目中使用bpmn-节点篇
前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...
- vue项目中使用bpmn-自定义platter
前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...
- vue项目中使用bpmn-流程图xml文件中节点属性转json结构
内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- P1439 【模板】最长公共子序列(LCS)
先来看一看普通的最长公共子序列 给定字符串A和B,求他们的最长公共子序列 DP做法: 设f[i][j]表示A[1~i]和B[1~j]的最长公共子序列的长度 那么f[i][j]=max(f[i-1][j ...
- ReentrantLock 源码分析
ReentrantLock 1)ReentrantLock 类实现了和 synchronized 一样的内存语义,同时该类提供了更加灵活多样的可重入互斥锁定操作. 2)ReentrantLock 实例 ...
- Android studio 不能创建Activity等文件
这是我之前安装Android studio的一系列问题:http://tieba.baidu.com/p/5921373177 1. 不能创建Activity等许多文件: 2. 工程运行不了: 3. ...
- ELK Stack 企业级日志收集平台
ELK Stack介绍 大型项目,多产品线的日志收集 ,分析平台 为什么用ELK? 1.开发人员排查问题,服务器上查看权限 2.项目多,服务器多,日志类型多 ELK 架构介绍 数据源--->lo ...
- AngleSharp 网络数据采集 -- 使用AngleSharp做html解析
AngleSharp AngleSharp is a .NET library that gives you the ability to parse angle bracket bas ...
- Linux 下在后台运行进程:nohup,setsid,& 以及 tmux
参考: Linux 技巧:让进程在后台可靠运行的几种方法 ssh 登录了远程服务器时,如果在前台运行耗时较长的任务, 当 ssh 掉线或关闭窗口时会导致命令停止运行. hup 与 nohup 当用户注 ...
- Linux-档案权限概念
第一欄代表這個檔案的類型與權限(permission): 這個地方最需要注意了!仔細看的話,你應該可以發現這一欄其實共有十個字元:(圖5.2.1及圖5.2.2內的權限並無關係) 圖5.2.2.檔案的類 ...
- 【Linux】limits.conf 不重启就生效或者不生效的原因
前阵子,我要用到使LInux的文件打开数为65534个,而且需要永久生效,于是将配置写到了: vim /etc/security/limits.conf * soft nofile 65534* ha ...
- VGA时序及其原理(转载)
显示器扫描方式分为逐行扫描和隔行扫描:逐行扫描是扫描从屏幕左上角一点开始,从左像右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT对电子束进行消隐,每行结束时,用行同步信 ...
- JMeter性能测试入门-不同类型线程组的使用
jmeter不同线程组的详解 在做性能测试之前,我们来了解一下JMeter多个不同线程组的应用.首先,JMeter提供了三个基本的线程组,分别为: Thread Group setUp Thread ...