如何在Github的Markdown中显示数学公式(不是Github博客)?

250

经过调查,我发现MathJax可以实现这个功能。但是当我在Markdown文件中写一些示例时,它没有显示正确的方程式:

我已经在Markdown文件的头部添加了以下内容:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

然后输入 MathJax 语句:

\(E=mc^2\),$$x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2b}.$$

但是在 Github 上没有显示数学符号!请帮忙,谢谢! 告诉我如何在 Github 的 markdown 页面中显示数学符号。


2
它并不能解决一般用户的问题,但这个答案提供了一个浏览器脚本,至少可以让你看到方程式:https://dev59.com/vmXWa4cB1Zd3GeqPN4qX - Jeromy Anglim
GitLab使用KaTeX。 - Foad S. Farimani
GitHub自2022年5月起支持Latex/MathJax。 - VonC
@VonC 但这做得不好。 :( https://nschloe.github.io/2022/05/20/math-on-github.html - Nico Schlömer
1
@NicoSchlömer 很好的观点。我在我的回答中包含了对你的文章的引用,以增加其可见性。链接 - VonC
18个回答

199

但是 GitHub 并未显示任何数学符号!请帮帮我,谢谢!

GitHub 的 Markdown 解析是通过 SunDown(曾名 libUpSkirt)库执行的。

这个库的座右铭是“在 C 语言中实现标准兼容、快速、安全的 Markdown 处理库”。关键词是“安全”,考虑到你的问题 :)

事实上,允许执行 JavaScript 会偏离 MarkDown 标准文本到 HTML 转换的契约。

此外,所有看起来像 HTML 标签的东西都被转义或剥离了。

告诉我如何在 GitHub 中显示数学符号。

您最好找一个类似于 yuml.me 的网站,该网站可以通过解析提供的 URL 查询字符串来实时生成图像。

更新

我发现一些网站为用户提供了此类服务:codedogs.com(似乎不再支持嵌入)或 iTex2Img。您可以尝试它们。当然,可能还有其他网站可以满足您的需要,请使用谷歌搜索帮助您找到它们。

给出以下 Markdown 语法:

![equation](http://www.sciweavers.org/tex2img.php?eq=1%2Bsin%28mc%5E2%29&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=)

它将显示以下图片

equation

注意:为了正确显示图片,您必须确保URL的查询字符串部分进行百分号编码 。您可以轻松找到在线工具来帮助您完成此任务,例如www.url-encode-decode.com


6
@nultoken,感谢您的帮助回答。我使用了您上面提到的iTex2Img网站,并在我的文档中添加了两个公式。但我有一个问题,在GitHub打开文档页面时,两个公式都显示相同,实际上它们是不同的。您知道发生这种情况的原因吗? - Sam
3
如果你需要生成图像,http://mathurl.com/ 是一个值得注意的网站。 - Martin Thoma
2
这似乎在 Github 上无法运行。图片没有渲染出来。有人知道原因吗? - OganM
1
@OganM 语法已经改变。链接已在GitHub上修复并测试过。 - nulltoken
1
iTex2Img网站似乎对我来说工作不稳定。在Github上,图像似乎无法呈现。 - timbram
显示剩余2条评论

190

Markdown支持行内HTML。 行内HTML可用于快速简单的行内方程,以及使用外部工具进行更复杂的呈现。

快速且简单的行内方程

对于快速简单的行内项,请使用HTML和符号 实体代码。 将此想法与markdown中的下标文本结合使用的示例是:hθ(x) = θo x + θ1x,其代码如下所示。

    h<sub>&theta;</sub>(x) = &theta;<sub>o</sub> x + &theta;<sub>1</sub>x

常见数学符号的HTML安普符实体代码可以在这里找到。希腊字母的代码可以在这里找到。一个包含大量HTML实体代码和Unicode字符的列表可以在这里找到。

虽然这种方法有其局限性,但它适用于几乎所有Markdown,并且不需要任何外部库。

使用LaTeX和Codecogs进行复杂可扩展的内联渲染

如果您有更大的需求,请使用外部LaTeX渲染器,如CodeCogs。使用CodeCogs编辑器创建方程式。选择SVG进行呈现,HTML用于嵌入代码。SVG在缩放时呈现效果良好。HTML允许在查看源代码时轻松阅读LaTeX。从页面底部复制嵌入代码并将其粘贴到您的Markdown中。

<img src="https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" title="\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" />
![\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}](https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}) 

\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

这个公式结合了这个答案和这个答案

GitHub支持使用上面的原始html语法进行可读的LaTeX,但有时会出现问题。如果上述方法对您无效,另一种选择是选择URL编码渲染,并使用该输出手动创建链接,例如:

\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

![\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}](https://latex.codecogs.com/svg.latex?x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D)

这个方法将LaTex手动包含在图片的alt文本中,并使用编码的URL进行GitHub上的呈现。

多行渲染

如果您需要多行渲染,请查看此答案


1
这个很好用。我需要将一个jupyter笔记本(.ipynb)转换为.md,而方程式基本上是多行latex代码。 - Marc Maxmeister
2
这应该是被接受的答案。对我来说,R<sup>-1</sup>正确地呈现了R^-1。 - tash
3
SVG(以及其他基于图片的)方法在非白色主题(如使用Dark Reader)中使用时会出现问题。 - Ruslan
1
@Ruslan 的确如此,尽管有定义背景颜色的能力。我已将我的图像设置为白色背景,但 SVG 渲染仍然显示为透明(在 GitHub 的深色模式下难以阅读)。 - Fuhrmanator
1
@Ruslan,干得好。这可以通过使用CSS来反转图像来解决:filter: invert(100%); - Viktor Soroka
显示剩余2条评论

34

现在是2020年,让我总结一下源代码仓库托管平台的数学公式渲染支持进展。

GitHub和Bitbucket

无论是默认定界符还是其他定界符,GitHub和Bitbucket仍然不支持数学公式的渲染。

Bitbucket Cloud / BCLOUD-11192 -- 在MarkDown文档中添加LaTeX支持(BB-12552)

GitHub / markup -- 渲染数学方程

GitHub / markup -- 支持latex

GitHub Community Forum -- [FEATURE REQUEST] LaTeX Math in Markdown

talk.commonmark.org -- Can math formula added to the markdown

近年来,GitHub几乎没有取得任何实质性进展。

GitLab

GitLab已经支持,但不是最常见的方式。它使用自己的定界符。

This math is inline $`a^2+b^2=c^2`$.

This is on a separate line

```math
a^2+b^2=c^2
```

GitLab Flavored Markdown -- 数学公式

谁支持通用分界符?

Hugo使用的Markdown解析器

其他渲染方式


我只喜欢黑客,给我更多的黑客食品。 - Timo

27

它自2022年5月起正式受支持(内联表达式自2023年5月起支持,详见末尾):

Render mathematical expressions in Markdown

You can now use LaTeX style syntax to render math expressions within Markdown inline (using $ delimiters) or in blocks (using $$ delimiters).

Writing expressions as blocks

To add math as a multiline block displayed separately from surrounding text, start a new line and delimit the expression with two dollar symbols $$.

**The Cauchy-Schwarz Inequality**
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Displayed math markdown rendering

Writing inline expressions

To include a math expression inline with your text, delimit the expression with a dollar symbol $.

This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$

Inline math markdown rendering

GitHub's math rendering capability uses MathJax; an open source, JavaScript-based display engine.
MathJax supports a wide range of LaTeX macros and a number of useful accessibility extensions.
For more information, see the MathJax documentation and the MathJax Accessibility Extensions documentation.

Some users have previously used a workaround to generate images of mathematical expressions through API requests.
Images generated this way will remain viewable, but this technique will no longer work.
Going forward, expressions should be written directly in Markdown using LaTeX syntax as described above.

For more information about authoring content with advanced formatting, see Working with advanced formatting in the GitHub documentation.


这仍然是beta版本,并受到了批评。
请查看Nico Schlömer的"Math on GitHub: The Good, the Bad and the Ugly" 。
语法引入了以下内容:

  • 竞争的Markdown和数学渲染器
  • 数学块难以解释

正如brc-dd评论中所指出的

2022年6月:

Fenced block syntax for mathematical expressions

Users can now delineate mathematical expressions using ```math fenced code block syntax in addition to the already supported delimiters.
Two dollar sign $$ delimiters are not required if this method is used.

**Here is some math!**

```math
\sqrt{3}
.```

becomes:

math-expression-as-a-fenced-code-block -- https://i0.wp.com/user-images.githubusercontent.com/7219923/175109268-ee329b99-c2dc-4589-a5be-0a4eee31d916.png?ssl=1

Read more about working with advanced formatting.


内联数学表达式的新分隔符语法(2023年5月)

我们正在引入一种新方法,以在Markdown中内联包含基于LaTeX的数学表达式。
除了现有的分隔符之外,我们现在还支持使用美元符号和反引号来分隔类似LaTeX样式的数学语法(例如,$\sqrt{3}$)。
如果您编写的数学表达式包含与Markdown语法重叠的字符,则此新语法特别有用。

要了解有关在GitHub上使用Markdown中的数学表达式的更多信息,请查看GitHub文档中的"编写数学表达式"


1
关于这个的另一个更新:https://github.blog/changelog/2022-06-28-fenced-block-syntax-for-mathematical-expressions/ - brc-dd
2
@brc-dd 谢谢。我已经在答案中包含了您的评论和相关链接内容。 - VonC
耶,科技进步的伟大日子终于到来了!尽管我觉得有些奇怪,SpaceX在开发人员最终能够直接在GitHub上编写数学方程之前已经成功地发射了多次可重复使用的火箭飞行(https://en.wikipedia.org/wiki/SpaceX#Summary_of_achievements)。 - Quan Bui

22

另一种可能性是依靠GitHub自己的笔记本渲染器。这甚至在SO中也可以使用。

要呈现x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2b},请使用以下HTML img标签:

<img src="https://render.githubusercontent.com/render/math?math=x_{1,2} = \frac{-b \pm \sqrt{b^2-4ac}}{2b}">

演示:

这种方法的优点在于,您可以直接在Markdown中编辑公式,预览将相应更新。
您可以通过编辑此答案来尝试它。(如果你的编辑没有为答案增添什么内容,请放弃你的编辑;)

来源:https://gist.github.com/a-rodin/fef3f543412d6e1ec5b6cf55bf197d7b


9
任何使用此方法的人,因为+在URI中是转义字符,所以请使用%2B来呈现+ - Jishan

16

另一个解决方法是使用jupyter笔记本并在单元格中使用Markdown模式来呈现方程式。

基本的东西似乎完美地工作,比如居中对齐的方程式。

\begin{equation}
...
\end{equation}

或者行内公式

$ \sum_{\forall i}{x_i^{2}} $

尽管在GitHub上我真正想要的一个函数\mbox{}根本没有渲染出来,这让我很失望。但总的来说,这是在GitHub上呈现公式最成功的方式了。


3
谢谢你的提问,但是还有这个问题:我已经成功在Jupyter Notebook的Markdown模式下使用了公式,它看起来没问题。不过,现在该怎样将这个Jupyter Markdown转移到GitHub上的readme.md文件呢? - DavidC.
2
方程式无法直接在Markdown文件中呈现。为了在readme.md上显示方程式,它们几乎必须是图像。但是,您可以将file.ipynb放在GitHub上,GitHub会很好地呈现它。 - hexicle

16

如果只是想在浏览器中为自己展示数学内容,您可以尝试Chrome扩展程序GitHub with MathJax,非常方便。


1
当我尝试安装时,icon16.png出现错误。 - Homero Esmeraldo
您可以手动安装MathJax扩展程序。
  1. 克隆存储库:https://github.com/orsharir/github-mathjax.git
  2. 在Chrome扩展中启用开发者模式。
  3. 将“github-mathjax.crx”文件拖到Chrome扩展程序中。
- rizz

6

虽然 GitHub 无法解释 MathJax 公式,但您可以自动生成一个新的 Markdown 文档,其中公式被替换为图像。

我建议您查看 GitHub 应用程序 TeXify

GitHub 应用程序会在您的推送中查找扩展名为 *.tex.md 的文件,并将其 TeX 表达式呈现为 SVG 图像

它是如何工作的(来自 源代码存储库):

每当您进行推送时,TeXify 将运行并搜索您最后一次提交中的 *.tex.md 文件。对于其中的每个文件,它都将运行 readme2tex,该程序将取出括在美元符号之间的 LaTeX 表达式,将其转换为纯 SVG 图像,然后将输出保存到 .md 扩展名文件中(这意味着名为 README.tex.md 的文件将被处理,并且输出将保存为 README.md)。此后,输出文件和新的 SVG 图像将被提交并推回您的仓库。


4
我使用以下步骤将方程转换为markdown格式。这对我非常有效且非常简单!

假设我要代表矩阵乘法方程式

第一步:

从此处获取您的公式脚本- https://csrgxtu.github.io/2015/03/20/Writing-Mathematic-Fomulars-in-Markdown/

我的例子:我想表示Z(i,j)=X(i,k) * Y(k, j); k=1 to n为总和公式。

enter image description here

引用网站,所需脚本是 => Z_i_j=\sum_{k=1}^{10} X_i_k * Y_k_j

第二步:

使用URL编码器- https://www.urlencoder.org/ 将脚本转换为有效的url。

我的例子:

enter image description here

第三步: 使用此网站生成图像,将Step 2的输出复制并粘贴到“eq”请求参数中 - http://www.sciweavers.org/tex2img.php? eq = < b><i> paste-output-here </i></b>&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=

- 我的示例:
http://www.sciweavers.org/tex2img.php?eq = Z_i_j = \ sum_ {k = 1} ^ {10} X_i_k * Y_k_j & bc = White & fc = Black & im = jpg & fs = 12 & ff = arev & edit =

输入图像描述

步骤4:

使用markdown语法引用图像 - ![alt text](enter url here)

- 将此复制到您的markdown中,然后您就可以开始了:

![Z(i,j)= X(i,k)* Y(k,j); k = 1到n](http://www.sciweavers.org/tex2img.php?eq=Z_i_j%3D%5Csum_%7Bi%3D1%7D%5E%7B10%7D%20X_i_k%20%2A%20Y_k_j&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit=)

下面的图像是markdown的输出。万岁!!


输入图像描述


任何阅读这段话的人,“Typora”是我新喜欢的 Markdown 应用程序。就是这样。 - Dexter
Typora的公式能在Github的README.md中正确显示吗? - Jaden
这些基本上是图片,所以是的! - Dexter

4

我刚发布了一个小的Chrome扩展程序,xhub,可以让您在GitHub页面中使用LaTeX公式(和更多内容)。

enter image description here

优点:

  • You don't have to set up anything in your repo, just use math in your Markdown (sytax from GitLab):
    Some display math:
    ```math
    e^{i\pi} + 1 = 0
    ```
    and some inline math, $`a^2 + b^2 = c^2`$.
    
  • It works on light and dark backgrounds alike.
  • You can copy-and-paste the math

缺点:

  • 你需要安装一个浏览器扩展程序。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接