katex里哪些文件是有用的？

abababa · 2020-6-4 10:31

我下载了katex，里面有一些文件和文件夹：
文件夹：contrib, fonts
文件：katex.mjs, katex.min.js, katex.js……
然后刚开始，是直接用浏览器打开的，结果没显示公式，后来下载了一个apache服务器，安装之后把这些文件放到服务器里了，公式这才显示出来。
现在想问一下，如果不使用服务器，能不能正常显示公式。还有这些文件我在引用时，也没都用上，我用的是下面几个：
katex.min.js
autorender.js(这个是在网站上的提示里找到的，下载的里面没发现这个文件)
katex.min.css
然后我觉得那个fonts也有用，但是contrib文件夹是干什么的呢？还有katex.mjs是干什么的呢？是不是有什么配置我没弄对？

hbghlyj · 2025-5-18 13:04

为什么直接用 file:// 打开不行？
现代浏览器出于安全策略（同源策略、CORS、文件系统访问限制）会阻止网页去读本地的 webfont（.woff2/.ttf 等），这就导致了公式渲染所依赖的字体加载失败。只要 webfont 无法加载，KaTeX 就会退回到空白或打出 Unicode 占位符。

“不用服务器”有没有解？
最简单的做法是继续用一个本地小型 HTTP 服务器（例如 VS Code 的 Live Server、Python –m http.server、Node 的 http-server），它们都只是在本地起一个端口，不需要真正部署到线上。

hbghlyj · 2025-5-18 13:07

katex.js：开发版，包含未压缩代码，便于调试；
katex.min.js：生产版压缩脚本，直接 <script> 引入；
katex.mjs 是给模块化打包／ESM 用的，供现代打包工具（Webpack/Rollup/Vite）或浏览器 <script type="module"> 直接按模块加载。

fonts/
存放 KaTeX 渲染时需要的 webfont（.woff2、.ttf、.svg），必须保证相对路径能被网页加载到。

contrib/
收录社区贡献的脚本和插件示例，不是渲染引擎的核心。
像 auto-render 的示例、copy-tex 插件、一些扩展宏包和 demo 代码

autorender.js
KaTeX 官方提供的“自动扫描页面并渲染 LaTeX 片段”插件，默认并不包含在 core 包里，需要单独下载或从 npm 安装：

npm install katex
# 在代码里：
import renderMathInElement from "katex/contrib/auto-render";

Copy the Code

引用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./katex.min.css">
</head>
<body>
<p>行内公式：\\(a^2 + b^2 = c^2\\)</p>
<p>块级公式：\\[ \int_0^1 x^2 \,dx = \tfrac13 \\]</p>
<script src="./katex.min.js"></script>
<script src="./contrib/auto-render.min.js"></script>
<script>
renderMathInElement(document.body, {
// custom options
delimiters: [
{left: "\\\\(", right: "\\\\)", display: false},
{left: "\\\\[", right: "\\\\]", display: true}
]
});
</script>
</body>
</html>

Copy the Code

确保 fonts/ 目录与 HTML 同级，CSS 里默认会按相对路径 (../fonts/...) 去找字体。
contrib/auto-render.min.js 放在 contrib 里；如果你下载的包里没有，就可以从 npm、GitHub Releases 或 CDN（unpkg、jsDelivr）单独拉取。

Account		Remember me	Forgot password?
Password			Register account

katex里哪些文件是有用的？

Viewed boards