前言

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

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!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/mathjax@3/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>