Question

我使用jekyll编写帖子并在github-pages中显示它。我的源文件是用markdown写的。

如何将公式插入markdown文件？

我不想将公式保存到图像中并将图像加载到markdown文件中。我实际上想直接在markdown文件中编写乳胶公式。

Answer 1

由于有关此问题的在线资源已发生变化，此处有关于使用GitHub页面支持LateX的更新。

请注意，最接近Latex渲染而不导出为图像并在Jekyll网站上原生支持它将使用MathJax。

MathJax实际上是推荐 in Jekyllrb docs用于数学支持，使用Kramdown，它还将它从LaTeX转换为PNG，更多详细信息请点击Kramdown documentation

选项1：在MathURL中编写等式并嵌入。

您可以使用MathURL编写等式，然后生成永久指向等式的网址，并将其显示在<iframe>标记中。但是，如果MathURL脱机，这将停止工作。

选项2：实施jsMath

jsMath将允许几乎类似LateX的语法，并且如果您已正确设置，则会在您的博客中支持extensive documentation on this。

选项3： Mathjax（到目前为止，我认为最简单）

许多网站都提到Mathjax被认为是jsMath的继承者，并且使用Jekyll更容易实现。 MathJax is also used by mathematics.stackexchange.com too!

第1步：让您的网站在要显示数学的网站中加载脚本。（通常在标题中完成）
可选：检查_config.yml中的降价分析器。此示例中建议使用redcarpet或kramdown。像discount这样的某些解析器会干扰语法，但我在下面有一个解决方案。
第2步：写下你的方程式。

Gaston Sanchez引用本教程：

MathJax与LaTeX没有完全相同的行为。默认情况下， tex2jax预处理器定义了LaTeX数学分隔符，它们是 \（... \）用于内联数学，\ [... \]用于显示的方程式。它还为显示的方程定义了TeX分隔符$$ ... $$，但是它没有将$ ... $定义为内联数学分隔符。

阅读语法documentation以获取更多详细信息。

注意：使用raw液体标签确保Markdown解析器不会干扰MathJax语法。
虽然您可以将反斜杠（例如\\[ \frac{1}{n^{2}} \\]）转义为确保它们被正确解析，as described by Chistopher Poole's tutorial，这并不总是直观且看起来很复杂。一个更简单的解决方案是使用原始液体标签来确保 Markdown处理器忽略文本并直接输出为静态HTML。这是通过{% raw %}和{% endraw %}

以下是代码示例：

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

最后还要确保字体支持显示LateX，因为有些字体尺寸太小会出现问题。另外，这里是乳胶StackExchange姊妹网站中讨论的一些additional methods like Google Charts and MathML。

Answer 2

如果您在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

Answer 3

现在最简单的方法是使用KaTeX auto-render extension。

只需将以下内容放入您的<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分隔符来解决此问题。

Answer 4

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

编辑：我认为这是上述问题的一种解决方案：

最终对我有用的是基于 PeaShooter 的回应。我在我的 _includes 文件夹中创建了一个文件夹 _posts，然后用包含 PeaShooter 答案中的代码的文件 head.html 填充它。然后，在 YAML 前端内容下方的帖子的第一行（即第二个 --- 行下方），我将代码 {% include_relative _includes/head.html %}

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

Answer 5

目前，IMO的最佳方法是使用MathJax后端（这是kramdown的一部分，即在GitHub Pages上可用），然后在前端使用KaTeX进行渲染。 KaTeX比MathJax更轻巧，更快，这使其更适合博客主题。

在我的Jekyll主题Hydejack中，我正在成功地使用这项技术。通过执行以下操作，可以在您自己的网站上随意使用它：

在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",
  });
});

我正在使用的实际代码稍微复杂一些。您可以check it out on GitHub。

如何在github页面中支持latex？

5 个答案: