使用latex优雅地编辑数学公式离线版

一枚程序圆

已于 2024-01-03 20:17:01 修改

阅读量501

点赞数 8

分类专栏：笔记前端 codemirror 文章标签： javascript

于 2024-01-03 12:52:24 首次发布

本文链接：https://blog.csdn.net/weixin_45634056/article/details/135360807

版权

笔记同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

codemirror

1 篇文章 0 订阅

订阅专栏

阅读事件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$

$$\lim_{x \to \infty} \frac{1}{n(n+1)}$$

$\lim_{x \to \infty} \frac{1}{n(n+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$$

$\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$

$$
f(x)=2x+1 \\
=2+1 \\
=3
$$

$\\ =2+1 \\ =3$
$3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)$

$$f(x,y,z) = 3y^2z \left( 3+\frac{7x+5}{1+y^2} \right)$$

$\left. \frac{ {\rm d}u}{ {\rm d}x} \right| _{x=0}$

$$\left. \frac{ {\rm d}u}{ {\rm d}x} \right| _{x=0}$$

$\left\{ \begin{aligned} a+b+c&=2 \\ a-b&=4 \\ \end{aligned} \right.$

一枚程序圆

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
使用latex优雅地编辑数学公式离线版

使用katex.js在线编辑latex
复制链接

扫一扫

专栏目录

使用latex优雅地编辑数学公式 离线版

先放效果图

界面实现部分

更多latex测试案例

“相关推荐”对你有帮助么？

使用latex优雅地编辑数学公式离线版