如何在GitHub Pages通过Jekyll实现含LaTeX公式的Markdown页面的MathJax渲染？

最简解决方案：单文件直接渲染公式 #

如果你只需要一个能正常渲染LaTeX公式的index.md，不需要修改任何额外配置文件，最直接的方法是把MathJax的脚本直接嵌入到Markdown文件的末尾。这样GitHub Pages生成HTML时会自动包含这段脚本，MathJax会负责渲染所有公式。

直接创建或修改你的index.md为以下内容：

---
title: MathJax Demo on GitHub Pages
---

# LaTeX Formula Demo

Here's an inline formula: $E=mc^2$

And a block-level formula:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

<!-- MathJax Script - Automatically renders LaTeX formulas -->
<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>

为什么你的之前配置可能没生效？ #

你提到的usemathjax: true配置，其实是某些自定义Jekyll主题的特定设置——默认的GitHub Pages主题（比如Minima）并不会识别这个字段，所以即使你在_config.yml和Markdown前置区添加了，也不会自动注入MathJax脚本。直接在Markdown里加脚本是最可靠的极简方案。

进阶：全局生效（所有页面自动渲染公式） #

如果你有多个Markdown文件，不想每个文件都加一遍脚本，可以修改Jekyll的默认布局文件，让所有生成的页面自动包含MathJax：

1. 在你的仓库根目录创建_layouts/default.html文件（如果还没有），内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ page.title | default: site.title }}</title>
</head>
<body>
  {{ content }}
  <!-- Global MathJax Script -->
  <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>
</body>
</html>

2. 现在所有的Markdown文件都会使用这个布局，生成的HTML页面都会自动加载MathJax，你只需要在Markdown里正常写公式即可：
   • 行内公式：用$包裹内容$，比如$E=mc^2$
   • 块级公式：用$$包裹内容$$，比如上面的积分例子

关于移动端缩放问题 #

你提到本地生成的HTML移动端缩放不佳，而GitHub Pages自动生成的页面会更友好——这是因为上面的布局里添加了<meta name="viewport" content="width=device-width, initial-scale=1">标签，这个标签会让浏览器根据设备屏幕宽度调整页面显示，解决移动端缩放问题。只要用GitHub Pages的Jekyll生成页面，带上这个标签就没问题了。

最后，把这些文件推送到你的GitHub仓库（确保设置了正确的Pages分支，比如main或gh-pages），等待1-2分钟，GitHub就会自动生成并部署带公式渲染的网页了。

内容的提问来源于stack exchange，提问作者Alexander Laut