type
status
date
slug
summary
tags
category
icon
password
MathJax 简介
MathJax 是一个开源的 JavaScript 库，专门用于在网页上渲染高质量的数学公式。它支持 LaTeX、MathML 和 AsciiMath 语法，能够将这些数学表达式转换为美观、清晰的可视化公式。
主要特点：
- 跨浏览器兼容性
- 高质量渲染
- 多种输入格式
- 可访问性
- 可配置性
MathJax 的基本使用
1. 在网页中引入 MathJax
在 HTML 文件的 <head> 标签中引入 MathJax 库：
2. MathJax 配置选项
基本配置示例：
3. 基本数学公式语法
行内公式：使用单个美元符号 $ 或者 \( 和 \) 包围公式。
块级公式：使用双美元符号 $$ 或者 \[ 和 \] 包围公式。
高级 MathJax 功能
1. 自定义宏
2. 颜色和样式设置
3. 动态渲染
MathJax 性能优化
1. 延迟加载
使用 async 属性加载 MathJax 脚本，避免阻塞页面渲染。
2. 预渲染
在服务器端预先渲染数学公式，将结果直接嵌入 HTML 中。
3. 缓存策略
利用 MathJax 的内置缓存功能和浏览器的本地存储来提高性能。
MathJax 资源和工具
1. 官方文档和教程
2. 在线 MathJax 编辑器
- MathJax Live Demo：https://www.mathjax.org/#demo
- CodeCogs Equation Editor：https://www.codecogs.com/latex/eqneditor.php
3. MathJax 社区支持
- GitHub 仓库：https://github.com/mathjax/MathJax
- MathJax 用户组：https://groups.google.com/g/mathjax-users
项目实战
上面出自Notion AI，用来辅助写作还是不错的，但是干货是有点少的，所以下面记录一下我在项目中的具体实现
mathjax.tsx
index.tsx
MathJaxScroll组件，因为有的公式很长，页面又很窄的情况下，得出现滚动
global
我们做的事把js文件放到我们的项目都cdn上，当然也可以考虑使用npm包
- 作者:Leon
- 链接:https://notion-next-e0s7m7o5n-dawns-projects-8e91a603.vercel.app//article/11bac790-fa8c-80fa-84dd-daaca038b60a
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。