前言

这个比较简单,就是引用两个js文件和一个css样式库即可,然后再scrpit做改动,直接把代码放在下面吧,这是一个mathjax转texCommand到html代码的html文件。

代码

<!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">
<title>LaTeX math convert by MathJax</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="./vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }
};
</script>
<style>
#app {
max-width: 40em;
margin: auto;
}

.input {
border: 1px solid grey;
margin: 0 0 .25em;
width: 100%;
font-size: 120%;
box-sizing: border-box;
}

#output {
font-size: 120%;
margin-top: .75em;
border: 1px solid grey;
padding: .25em;
min-height: 2em;
}

#output>pre {
margin-left: 5px;
}

.left {
float: left;
}

.right {
float: right;
}
</style>
</head>

<body onload="this.convert()">
<div id="app">

<h1>MathJax v3: TeX to HTML</h1>

<!-- <textarea id="input" rows="15" cols="10">
%
% 请输入您想要的公式
%
\LaTeX
</textarea> -->
<el-input class="input" type="textarea" :rows="10" :columns="10" placeholder="请输入数学公式" v-model="textArea"
clearable @input="convert()">
</el-input>
<br />
<div class="left">
<!-- <input type="checkbox" id="display" checked onchange="convert()"> <label for="display">Display style</label> -->
<el-checkbox v-model="checked">显示公式样式</el-checkbox>
</div>
<div class="right">
<!-- <input type="button" value="Render TeX" id="render" onclick="convert()" /> -->
<el-button type="success" @click="copy()">复制$\LaTeX$公式</el-button>
<el-button type="success" @click="convert()">强制转换</el-button>
</div>
<br clear="all" />
<!-- <div id="output" v-if="this.textArea === '%请输入数学公式(本句为注释)\n'" style="opacity: 0.5;zoom: 2;">$$\LaTeX$$</div> -->
<div id="output"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
textArea: '',
checked: true
},
methods: {
convert: function () {
//
// Get the TeX input
//
// var input = document.getElementById("input").value.trim();
var input = this.textArea;
if (this.textArea === ''){
input = '\\LaTeX'
}
//
// Clear the old output
//
output = document.getElementById('output');
output.innerHTML = '';
//
// Reset the tex labels (and automatic equation numbers, though there aren't any here).
// Get the conversion options (metrics and display settings)
// Convert the input to CommonHTML output and use a promise to wait for it to be ready
// (in case an extension needs to be loaded dynamically).
//
MathJax.texReset();
var options = MathJax.getMetricsFor(output);
options.display = this.checked;
MathJax.tex2chtmlPromise(input, options).then(function (node) {
//
// The promise returns the typeset node, which we add to the output
// Then update the document to include the adjusted CSS for the
// content of the new equation.
//
output.appendChild(node);
MathJax.startup.document.clear();
MathJax.startup.document.updateDocument();
}).catch(function (err) {
//
// If there was an error, put the message into the output instead
//
output.appendChild(document.createElement('pre')).appendChild(document.createTextNode(err.message));
}).then(function () {
//
// Error or not, re-enable the display and render buttons
//
// button.disabled = display.disabled = false;
});
},
copy: function () {
var input = this.textArea;
var oInput = document.createElement('input');
oInput.value = input;
oInput.select();
document.execCommand("Copy");
this.copySuccess();

},
copySuccess: function () {
this.$message({
message: '复制成功',
type: 'success'
})
},
copyFailure: function () {
this.$message.error('复制失败');
}
}
})
</script>

</body>

</html>