Install

一、核心功能

✅ 极速数学公式渲染：专为Web优化的LaTeX渲染引擎
✅ 零依赖：不依赖任何外部库，最小化资源加载
✅ 服务器端渲染支持：可在Node.js环境中直接生成公式HTML
✅ 化学方程式扩展：通过mhchem包支持\ce{}化学符号
✅ 按需字体加载：自动根据目标环境选择最优字体格式（WOFF2/WOFF）

二、安装指南

npm
# 本地安装
npm install katex

# 全局安装
npm install -g katex

三、从源码构建

  1. 环境要求：

    • Git
    • Node.js 10+
    • Yarn

  2. 构建流程：

git clone https://github.com/KaTeX/KaTeX
cd KaTeX
yarn  # 安装依赖
yarn build  # 执行构建
  1. 环境变量控制：
# 示例：针对Chrome 68环境优化
BROWSERSLIST="Chrome 68" yarn build

# 强制包含/排除字体
USE_FONTNAME="true" yarn build  # 替换FONTNAME为实际字体名

📌 构建过程自动根据https://browsersl.ist/配置优化输出

四、在项目中引用

CommonJS方式

const katex = require('katex');  // 导入核心库

// 使用mhchem扩展
require('katex/contrib/mhchem');  // ⚠️ 此调用会修改katex对象

// 渲染化学方程式
const html = katex.renderToString('\\ce{CO2 + C -> 2 CO}');  
console.log(html);

ES Module方式

import katex from 'katex';  // ES6导入语法
import 'katex/contrib/mhchem';  // 加载化学扩展

// 使用示例同CommonJS

⚠️ ES模块含ES6语法，旧环境需使用Babel等工具转译

五、客户端集成要点

  1. 必须资源：
    <!DOCTYPE html>  <!-- 要求HTML5文档类型 -->
<link rel="stylesheet" href="path/to/katex.min.css">  <!-- 核心CSS -->
  2. 字体部署：需将fonts/目录部署到服务器可访问路径
  3. 服务端渲染优势：无需在客户端加载katex.js，直接输出预渲染HTML

🔗 完整浏览器端用法见：https://katex.org/docs/browser.html

六、工作流程示意

KaTeX 浏览器支持与引入方式

🌐 浏览器兼容性

KaTeX 支持所有主流浏览器，包括：

  • Chrome
  • Safari
  • Firefox
  • Opera
  • Edge
  • IE 11

🚀 基础模板

<!DOCTYPE html>
<!-- KaTeX 必须使用 HTML5 文档类型，否则可能渲染异常 -->
<html>
<head>
  <!-- 引入 KaTeX 核心样式 -->
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" 
    integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" 
    crossorigin="anonymous"
  >
  
  <!-- 延迟加载 KaTeX 核心库以提升页面性能 -->
  <script 
    defer 
    src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js" 
    integrity="sha384-cMkvdD8LoxVzGF/RPUKAcvmm49FQ0oxwDF3BGKtDXcEc+T1b2N+teh/OJfpU0jr6" 
    crossorigin="anonymous"
  ></script>
  
  <!-- 自动渲染页面中的数学公式 -->
  <script 
    defer 
    src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/auto-render.min.js" 
    integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" 
    crossorigin="anonymous"
    onload="renderMathInElement(document.body);"  // 页面加载后自动渲染公式
  ></script>
</head>
...
</html>

🔮 全局变量加载

直接引入 katex.js 时，katex 对象将作为全局变量使用：

<!-- 标准版 -->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.css" 
  integrity="sha384-o3WH+1yEhq+grOgz1BVYTZPyTlMXrDxnjN1By9/ba94JqJhva6wFm2Hb+URQX53v" 
  crossorigin="anonymous"
>
<script 
  defer 
  src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.js" 
  integrity="sha384-C5yZTsgLOfuizO9kb+hrB8uSBwwvZ4yenKWU0KmWl+7bkL6Tph/KbcOa3S4zdoRE" 
  crossorigin="anonymous"
></script>

<!-- 压缩版（推荐生产环境使用） -->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
>
<script 
  defer 
  src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"
></script>

⏳ 异步加载方案

非关键场景可通过异步加载优化性能：

<!-- 动态加载所需字体 -->
<script>
  window.WebFontConfig = {
    custom: {
      families: [
        'KaTeX_AMS',
        'KaTeX_Caligraphic:n4,n7',
        'KaTeX_Fraktur:n4,n7',
        'KaTeX_Main:n4,n7,i4,i7',
        'KaTeX_Math:i4,i7',
        'KaTeX_Script',
        'KaTeX_SansSerif:n4,n7,i4',
        'KaTeX_Size1',
        'KaTeX_Size2',
        'KaTeX_Size3',
        'KaTeX_Size4',
        'KaTeX_Typewriter'
      ],
    },
  };
</script>

<!-- 加载 WebFont 加载器 -->
<script 
  defer 
  src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" 
  integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" 
  crossorigin="anonymous"
></script>

<!-- 预加载 WOFF2 字体（现代浏览器支持） -->
<link 
  rel="preload" 
  href="path/to/font.woff2"  // 替换为实际字体路径
  as="font" 
  type="font/woff2" 
  crossorigin="anonymous"
>

📦 模块化加载

AMD 规范

<script type="text/javascript">
  require([
    "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.js"
  ], function(katex) {
    // KaTeX 初始化操作
  });
</script>
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.css"
>

ECMAScript 模块

<script type="module">
  // 现代浏览器直接加载 ES 模块
  import katex from 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.mjs';
  // ... 初始化代码
</script>

<!-- 旧版浏览器回退方案 -->
<script 
  nomodule 
  defer 
  src="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.js"
></script>
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.css"
>

🌟 总结

💡 核心要点总结

  1. 跨浏览器支持 - 全面兼容主流浏览器包括 IE11
  2. 多种加载方式：
    • 基础模板：包含自动渲染功能的完整 HTML 结构
    • 全局加载：通过 katex 全局变量直接调用
    • 异步优化：使用 WebFontLoader 实现字体按需加载
    • 模块化方案：支持 AMD 和 ES Modules 规范
  3. 生产优化：
    • 推荐使用 .min 压缩版本
    • 异步加载提升首屏性能
    • 预加载关键字体资源
  4. 部署灵活性：
    • 支持 CDN 快速集成
    • 提供自主托管方案

⚙️ 使用建议

📌 关键提示：对于需要 IE 支持的项目，务必测试https://katex.org/docs/issues.html页面验证兼容性

最后更新: