阅读事件5分钟
先放效果图
界面实现部分
项目使用的组件很简单
1、codemirror 代码高亮
2、splitter.js 页面二分
3、katex.js 用于公式和图像显示
Katex.js 支持大部分latex的语法,在css不普及的年代,绝对是排版神器
<!DOCTYPE html>
<html>
<head>
<title>cm:latex live</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<link rel="stylesheet" href="js/lib/codemirror.css">
<script src="js/lib/codemirror.js"></script>
<link href="css/katex.css" rel="stylesheet">
<link href="css/splitter.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/article.css">
<script src="js/latex.js"></script>
<script src="js/base.js"></script>
<script src="js/SplitView.js"></script>
<body>
<div id="main" class="split-view horizontal">
<div style='display:flex'>
<textarea id="code-js">
\frame{
\setlength{\unitlength}{2cm}
\begin{picture}(6,5)
\thicklines
\put(1,0.5){\line(2,1){3}}
\put(4,2){\line(-2,1){2}}
\put(2,3){\line(-2,-5){1}}
\put(3.5,0.4){$\displaystyle s=\frac{a+b+c}{2}$}
\end{picture}
}
</textarea>
</div>
<div class="gutter"></div>
<div class="">
<div id='latex'></div>
</div>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
lineNumbers: true,
tabSize: 2
});
var text = document.getElementById("code-js").innerText;
var latex_id = document.getElementById("latex")
var generator = new latexjs.HtmlGenerator({ hyphenate: false })
generator = latexjs.parse(text, { generator: generator })
latex_id.appendChild(generator.domFragment())
//当左内容变化时更新右视图,不考虑效率,直接转换
editor.on("change", function (editor, change) {
generator.reset()
enerator = latexjs.parse(editor.getValue("\n"), { generator: generator })
latex_id.innerHTML = ''
latex_id.appendChild(generator.domFragment())
})
SplitView.activate(document.getElementById("main"))
</script>
</body>
</html>
这样就可以不安装latex 环境优雅地编辑公式,图像目前还不建议,因为有很多latex作图子集不能正确使用
更多latex测试案例
latex 公式以$ $ 作为标记符号
$$x+y=z$$
x + y = z x+y=z x+y=z
$$\lim_{x \to \infty} \frac{1}{n(n+1)}$$
lim x → ∞ 1 n ( n + 1 ) \lim_{x \to \infty} \frac{1}{n(n+1)} x→∞limn(n+1)1
$$dy/dx, \mathrm{d}y/\mathrm{d}x, \frac{dy}{dx}, \frac{\mathrm{d}y}{\mathrm{d}x}, \frac{\partial^2}{\partial x_1\partial x_2}y$$
d y / d x , d y / d x , d y d x , d y d x , ∂ 2 ∂ x 1 ∂ x 2 y dy/dx, \mathrm{d}y/\mathrm{d}x, \frac{dy}{dx}, \frac{\mathrm{d}y}{\mathrm{d}x}, \frac{\partial^2}{\partial x_1\partial x_2}y dy/dx,dy/dx,dxdy,dxdy,∂x1∂x2∂2y
$$
f(x)=2x+1 \\
=2+1 \\
=3
$$
f
(
x
)
=
2
x
+
1
=
2
+
1
=
3
f(x)=2x+1 \\ =2+1 \\ =3
f(x)=2x+1=2+1=3
f
(
x
,
y
,
z
)
=
3
y
2
z
(
3
+
7
x
+
5
1
+
y
2
)
f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)
f(x,y,z)=3y2z(3+1+y27x+5)
$$f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)$$
d u d x ∣ x = 0 \left. \frac{ {\rm d}u}{ {\rm d}x} \right| _{x=0} dxdu x=0
$$\left. \frac{ {\rm d}u}{ {\rm d}x} \right| _{x=0}$$
{ a + b + c = 2 a − b = 4 \left\{ \begin{aligned} a+b+c&=2 \\ a-b&=4 \\ \end{aligned} \right. {a+b+ca−b=2=4