如何在 GitHub 页面中支持乳胶？

我使用 jekyll 写文章，并显示在 GitHub 页面。我的源文件写的标记。

如何在减价文件中插入公式？

我不想保存公式到一个图像和加载图像的标记文件。实际上我想直接在标记文件中写乳胶公式。

35618 次浏览
小开
最佳答案

由于关于这个问题的在线资源已经发生了变化，下面是关于使用 GitHub Pages 支持 LateX 的更新。

注意，最接近于 Latex 呈现的方法是使用 MathJax，而不将其作为图像导出并在 Jekyll 站点上提供本地支持。

MathJax 实际上被推荐用于数学支持，使用 Kramdown，它还可以将 LaTeX 转换为 PNG，更多详细信息请参阅 Kramdown 文档

选项1: 将方程式写入 MathURL并嵌入其中。

您可以使用 MathURL 编写方程，然后生成一个永久指向方程的 URL，并在 <iframe>标记中显示该 URL。但是，如果 MathURL 脱机，这将停止工作。

选项2: 实现 < a href = “ http://www.math.union.edu/~ dpvc/jsMath/”rel = “ noReferrer”> jsMath

JsMath 将支持几乎与 LateX 类似的语法，如果您正确设置了它，它将在您的 blog 中得到支持，这里有 关于这个的大量文件。

选项3: Mathjax (在我看来是最简单的)

许多站点都提到 Mathjax 被认为是 jsMath 的继承者，并且使用 Jekyll 更容易实现。MathJax 也被 mathematics.stackexchange.com 使用！

  • 步骤1 : 让你的站点在你想显示数学的地方加载脚本。(通常在标题中)

  • 可选项: 检查 _config.yml中的降价解析器。在这个例子中建议使用 redcarpet或 kramdown。某些像 discount这样的解析器会干扰语法，但我有一个解决方案。

  • 第二步: 写你的方程式。

引用 Gaston Sanchez 的教程:

MathJax 的行为与 LaTeX 不完全相同, Tex2jax 预处理器定义 LaTeX 数学分隔符，它们是 (...)为在线数学，和[ ... ]为显示方程。它 也为显示的方程定义了 TeX 分隔符 $$... $$，但是 它没有将 $... $定义为在线数学分隔符。

有关更多详细信息，请阅读关于语法的 文件。

  • 注意: 使用 raw液体标记确保 Markdown 解析器不会干扰 MathJax 语法。
  • 尽管可以将反斜杠(例如 \\[ \frac{1}{n^{2}} \\])转义为 确保它们被正确解析，正如 Chistopher Poole’s 所描述的 教程 ，这并不总是直观的，看起来很复杂 更简单的解决办法是使用原液标签，以确保 文本被 Markdown 处理器忽略，并直接作为 这是用 {% raw %}和 {% endraw %}完成的

下面是一个代码示例:

 {% raw %}
$$a^2 + b^2 = c^2$$ --> note that all equations between these tags will not need escaping!
{% endraw %}

最后还要确保字体支持将 LateX 显示为一些有问题的字体大小太小。另外，在乳胶 StackExchange 姐妹站点中讨论了一些 谷歌图表和 MathML 等其他方法。

小开

如果在 GitHub 页面中使用了 Jekyll，则可以添加

  <script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
inlineMath: [['$','$']]
}
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

在文件 _includes/head.html中，然后您的 GitHub 页面站点将支持 MathJax

小开

目前 IMO 的最佳方式是使用 MathJax 后端(这是 kramdown 的一部分，即可在 GitHub Pages 上获得) ，然后在前端使用 卡特斯进行渲染。KaTeX 比 MathJax 更轻量更快，这使得它更适合于博客主题。

我正在使用这种技术，我的化身博士主题 海德杰克取得了巨大的成功。你可以在自己的网站上使用它，方法如下:

在 config.yml中，将数学引擎设置为 mathjax:

kramdown:
math_engine: mathjax

将 KaTeX 添加到您的站点，并确保下面的代码在加载之后运行。

const mathBlocks = document.querySelectorAll('script[type^="math/tex"]');
Array.from(mathBlocks).forEach((el) => {
const tex = el.textContent.replace("% <![CDATA[", "").replace("%]]>", "");
el.outerHTML = window.katex.renderToString(tex, {
displayMode: el.type === "math/tex; mode=display",
});
});

我使用的实际代码稍微复杂一些。

小开

现在最简单的方法就是使用 卡特斯 自动渲染扩展。

只需将以下内容放入你的 <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

注意，这里假设 HTML 中出现以下分隔符:

$$\LaTeX code$$   (for display)
\\[\LaTeX code\\] (also for display)
\\(\LaTeX code\\) (for inline)

注意，如果使用 Jekyll，您需要在 _config.yml中包含以下内容:

markdown: kramdown
kramdown:
math_engine: katex

警告: 不要使用 math_engine: mathjax。它会自动删除 LaTeX 分隔符，从而破坏这一点。

小开

我希望这是一个评论 Daviewales 的回答，但我没有足够的名声不幸。我对这个答案的理解是将3行代码复制到文件 <your_repo>.github.io\_site\<postname>\index.html中。但是，每次编辑相应的 <postname>.md时，这个文件似乎都会更新。有没有一种更优雅的方法总是让这些代码行自动添加到 html 文件，而不必每次我想检查一个等式时手动编辑它？

编辑: 我认为这是解决上述问题的一个办法:

最后为我工作的是基于 PeaShoter 的反应。我在我的 _posts文件夹中创建了一个文件夹 _includes，然后填充了一个文件 head.html，其中包含来自 PeaShoter 答案的代码。然后，在文章的顶行 YAML 前面的事项(即下面的第二个 ---行) ，我把代码 {% include_relative _includes/head.html %}

注意，重要的是使 _includes文件夹不在基本文件夹 <your_repo>.github.io中，而是在 _posts文件夹中。虽然把 _includes放在基本文件夹中确实会自动生成方程式，但它破坏了网站其余部分的格式。

小开

不久前，我创建了 Xhub，这是一个允许在 github 页面中使用数学的浏览器扩展。

缺点:

  • 你必须安装扩展。

优点:

  • 不需要设置任何工作流。
  • 像往常一样编辑你的减价并使用 
    Display math:
```math
e^{i\pi} + 1 = 0
```
and inline math $`a^2 + b^2 = c^2`$.
    (语法和 GitLab一样)
  • 适用于明暗背景。
  • 你甚至可以复制粘贴数学！

也许值得一查。

enter image description here

小开

不幸的是，现在这里的大多数答案都已经过时了。Github 使用 Kramdown呈现您的降价文件。令人恼火的是，kramdown 对数学内容的定义与其他降价变体不同。在 kramdown 中，内联数学是使用 $$作为分隔符来编写的，就像 text $$ E = mc^2 $$ text一样。显示数学也使用 $$分隔符编写，但它必须与文本以空行分隔

text


$$\begin{aligned}
E = mc^2
\end{aligned}$$


text

Kramdown 将内联数学显示为 \( E = mc^2 \)，显示数学显示为

\[\begin{aligned}
E = mc^2
\end{aligned}\]

在输出 HTML 中。这些也是 mathjax 默认使用的分隔符。因此，为 github 页面配置 MathJax3就足够了

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

您不需要创建或修改 _config.yml文件。

我建议你使用 MathJax 3而不是 KaTeX，因为 MathJax 3并不比 KaTeX 慢多少(参见 https://www.intmath.com/cg5/katex-mathjax-comparison.php) ，并且支持更多的特性(例如，KaTex 不能处理 \label和 \eqref(参见 https://github.com/KaTeX/KaTeX/issues/2003))

如果仍然要使用 https://katex.org/docs/autorender.html，则必须添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>

您不需要创建或修改 _config.yml文件。

注意: 我试图通过在 _config.yml文件中设置 markdown: GFM来使用 github 风格的 Markdown 渲染器，而不是 github 页面的默认渲染器。这将为您提供更多的特性，如自动链接(参见 https://github.community/t/github-pages-autolinks-fail/129713/4)和更常见的用于内联数学的 $分隔符和用于显示数学的 $$分隔符(https://github.blog/2022-05-19-math-support-in-markdown/) ，因为它是由 https://pandoc.org/支持的。然而，来自 github 的 GFM 降价渲染器仍然有很多很多数学部分的问题，使其无法使用(https://nschloe.github.io/2022/05/20/math-on-github.html)。

小开

有些答案有点复杂，甚至过时了，所以这里有一个最近的解决方案，对我很有效。您可以使用 布局来解决这个问题。

创建一个文件夹 _layouts到您发布的文件夹(例如 docs/)。

创建 default.html。这将是所有页面的布局。如果您刚刚开始您的页面，您可以使用这个作为 default.html文件的模板:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>\{\{ page.title }}</title>
</head>
<body>
\{\{ content }}
</body>
</html>

然后在 </html>之前添加这个脚本:

<script
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
type="text/javascript">
</script>

我在使用 极小主题时遇到了问题。因此，如果我应用上面的变化，我失去了我的主题在我的职位。我去了 github 回购和复制 不管他们在 default.html有什么和添加脚本之前的 </html>和它的工作！

我找到了答案。


提交答案