vincentdoerig/latex-css · 上手攻略

仓库：vincentdoerig/latex-css
链接：https://github.com/vincentdoerig/latex-css
分类：academic-writing
作者：Jay
更新：2026-08-19

它是什么

LaTeX.css 是一个极简 CSS 库（自称"almost class-less"），只需在 HTML 页面中引入一行样式链接，就能让任意网站呈现出 LaTeX 文档的排版风格。项目基于 David Zollikofer 的 latexCSS，遵循 MIT 许可证开源。

它不是 JavaScript 框架，不是 React 组件库，不是静态站点生成器——只是一层 CSS，轻量、无依赖、适合任何 HTML 页面。

解决什么问题

当你需要写技术博客、论文笔记、学术网站或个人简历时，默认的浏览器样式（或 Tailwind / Bootstrap 等框架）往往与「严肃学术风格」格格不入。LaTeX.css 解决：

让任意 HTML 页面看起来像 LaTeX 排版的 PDF
无需学习 LaTeX 编译器，即可获得 LaTeX 的「学术严肃感」
配合 MathJax 使用时，数学公式渲染与页面风格完全融合
对技术博主、学术文档、个人简历等场景，比 WordPress/Notion 的主题更可控、更专业

快速安装

CDN 引入（最简方式，3 选 1）

<!-- Vercel CDN（推荐） -->
<link rel="stylesheet" href="https://latex.vercel.app/style.min.css" />

<!-- Unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />

NPM

npm install latex.css

Yarn

yarn add latex.css

NPM/Yarn 安装后，将 node_modules/latex.css/style.min.css 引入 HTML，或直接用 CDN 链接。

核心用法

基础页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Paper</title>
  <!-- 引入 LaTeX.css -->
  <link rel="stylesheet" href="https://latex.vercel.app/style.min.css" />
  <!-- （可选）MathJax 数学公式支持 -->
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <!-- （可选）代码高亮（Prism） -->
  <link href="https://prismjs.com/themes/prism-latex.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</head>
<body>
  <article class="indent-pars">
    <h1>论文标题</h1>
    <p class="author">John Doe<br>December 7, 2020</p>
    <div class="abstract">
      <h2>Abstract</h2>
      <p>论文摘要内容……</p>
    </div>
    <!-- 正文内容 -->
  </article>
</body>
</html>

特殊样式用法（Class-based Elements）

LaTeX.css 提供一组可选的 class，用于实现 LaTeX 特有的排版元素。

作者与摘要

<p class="author">John Doe <br> December 7, 2020</p>
<div class="abstract">
  <h2>Abstract</h2>
  <p>...</p>
</div>

定理 / 定义 / 引理 / 证明

<div class="theorem">
  <p>若 $S$ 是可数的且无限的，则存在 $S$ 与 $\mathbb{N}$ 之间的双射。</p>
</div>

<div class="definition">
  <p>定义是说明一个词或词组意义的陈述。</p>
</div>

<div class="lemma">
  <p>偶数加偶数仍得偶数。</p>
</div>

<div class="proof">
  <p>证明内容……</p>
</div>

段落缩进控制

默认不自动首行缩进
<article class="indent-pars">：开启类似 LaTeX article 的自动首行缩进
<p class="no-indent">：指定某个段落不缩进

文字两端对齐

<body class="text-justify">

⚠️ 长 URL 或内联代码可能导致单词间距不均匀，可用 break-all class 解决。

表格边框

<table class="borders-custom border-top-thin border-right-thin border-bottom-thin border-left-thin">
  ...
</table>

典型适用场景

学术博客 / 论文笔记：配合 MathJax 渲染数学公式，页面风格严肃、专注内容
个人简历（Resume / CV）：比 Word 模板更可控，导出 PDF 后样式一致
技术文档 / API 文档：无需引入重型文档框架，一行 CSS 即可改善阅读体验
学位论文/项目主页：作为项目 README 的 HTML 版本呈现页
幻灯片备注文档：配合 reveal.js 等幻灯片框架使用

暗色模式

<html class="latex-dark-auto">

根据系统偏好自动切换暗色主题，无需媒体查询配置。

多语言支持

目前支持以下语言的主题样式（定理、引理等标签翻译）：

西班牙语（es.css）
其他语言可参考 GitHub 仓库 lang/ 目录

引入方式：

<link rel="stylesheet" href="https://latex.vercel.app/lang/es.css" />
<html lang="es">

坑与注意

坑点	说明
纯 CSS，无 JavaScript	LaTeX.css 本身不处理任何交互或动态内容；MathJax / Prism 等需另行引入
MathJax 版本选择	建议使用 MathJax v3（`@3/es5/tex-mml-chtml.js`），v2 与部分现代浏览器存在兼容问题
Prism 语法高亮主题	LaTeX.css 仓库提供了一个 Prism 主题（`prism-latex.css`），但非必须；其他 Prism 主题均可正常使用
PDF 导出样式	浏览器打印为 PDF 时，建议在 `@media print` 中手动调整字号（LaTeX.css 未内置打印优化）
不支持 IE	仅面向现代浏览器，不考虑 IE 兼容
class-less 的局限	默认样式完全依赖 HTML 标签语义；如果 HTML 结构不规范，排版效果可能偏差

与同类对比

维度	LaTeX.css	Tufte CSS	vanilla CSS
核心目标	让网站像 LaTeX 文档	书籍/讲义风格（Edward Tufte）	自由控制
依赖	无（纯 CSS）	无（纯 CSS）	无
数学公式支持	需配 MathJax	需配 MathJax	需配 MathJax
Class 用量	少量可选 class	少量可选 class	全部自定义
定理/证明环境	✅ 内置	❌ 无	❌ 无
侧边注（Margin notes）	✅ 基于 Tufte CSS	✅ 核心功能	❌ 无
暗色模式	✅ latex-dark-auto	❌ 无	需自写
多语言定理标签	✅ 部分语言	❌ 无	❌ 无
维护活跃度	一般（个人维护）	低（非活跃）	N/A

⚠️ Tufte CSS 在「边注」功能上更强大，适合需要大量 margin note 的书籍风格页面；LaTeX.css 更适合「纯文字论述+数学公式」的学术文章风格。

一句话推荐结论

技术博主写数学密集的博客、学术个人主页、或需要 LaTeX 风格简历的人，只需一行 link 标签即可获得完整 LaTeX 排版气质，无需学习 LaTeX 编译器本身——轻量、零依赖、中文友好，是 Tailwind 之外的「学术风」好选择。

注意它不是完整的排版系统（没有复杂的浮动体、交叉引用、目录生成），如果你需要的是「真正在写 LaTeX 论文」，请用 SJTUThesis 或 pandoc 等方案；如果你只需要「页面看起来像 LaTeX」，LaTeX.css 是最省事的解法。