万物皆有裂痕，那是光之来处
前言
1 介绍
常用方法
typeset
// 排版公式
// text or html 转化为公式
window.MathJax.typeset([el])
typesetPromise
// 异步排版公式
window.MathJax.typesetPromise([el]).then().catch()
tex2chtml
// 公式转换
// 公式字符串转化为DOM
// 仅限text,无法转换html
window.MathJax.tex2chtml(formulaStr)
tex2chtmlPromise
// 异步排版公式
window.MathJax.tex2chtmlPromise(formulaStr).then().catch()
2 使用
配置CDN vue.config.js
const undevelopment = process.env.NODE_ENV === 'development'
// 定义 Webpack 不打包资源列表
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios'
}
// 定义 CDN 资源
const CDNSources = {
dev: {
css: [],
js: [
// TODO:按需
// mathjax
'https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js?config=TeX-AMS_CHTML'
]
},
prod: {
css: [],
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
// TODO:按需
// mathjax
'https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js?config=TeX-AMS_CHTML'
]
}
}
module.exports = {
...
// 插件
chainWebpack: config => {
// 通过externals不打包CDN资源
config.set('externals', externals)
// 在html文件加载外部CDN资源
config.plugin('html').tap(args => {
args[0].CDN = CDNSources[undevelopment ? 'prod' : 'dev']
return args
})
}
...
}
引入CDN index.html
<html lang="en">
<head>
...
<% for (var i in htmlWebpackPlugin.options.CDN &&
htmlWebpackPlugin.options.CDN.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.CDN.css[i] %>" />
<% } %>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.CDN &&
htmlWebpackPlugin.options.CDN.js) { %>
<script
type="text/javascript"
src="<%= htmlWebpackPlugin.options.CDN.js[i] %>"
></script>
<% } %>
</head>
...
</html>
###渲染公式
<template>
<div class="Formula">
<p id="math"></p>
<p ref="math" class="is-scroll" v-html=“htmlStr”></p>
</div>
</template>
<script>
export default {
name: 'Formula',
data() {
return {
htmlStr: ''
}
},
computed: {
moment() {
return moment()
}
},
mounted() {
this.$nextTick(() => {
// typesetPromise 需要 [] 包裹
this.htmlStr = '\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]'
window.MathJax.typesetPromise([this.$refs.math]).catch(err => err)
// tex2chtml 不需要 [] 包裹
const htmlStr = `x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}`
document
.querySelector('#math')
.appendChild(window.MathJax.tex2chtml(htmlStr))
})
}
}
</script>
<style>
.MathJax {
// 去除外边框
outline: 0;
}
.is-scroll {
// 溢出横向滚动
max-width: 100vw;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
<style>
3.注意
1.使用国内cdn资源，npm install 加载较慢
2.typeset可渲染html结构，tex2chtml只能转换文本
3.公式使用单斜杠\标识，html会自动转换，渲染时需要加两个斜杆 \\sqrt
尾声
今夜吹着风，格外的温柔，乌龟慢慢跑，兔子睡着了
晚安 ^_^
