Github上的README.md中的乳胶渲染


133

有什么方法可以在GitHub存储库中的README.md中呈现LaTex?我已经用谷歌搜索并搜索了堆栈溢出,但是所有相关的答案似乎都不可行。


1
无法直接进行。您认为需要LaTex进行某些处理吗?例如,如果您想要数学方程式,则可以使用一些特定的技巧来实现。告诉我们您要渲染的内容,也许有人可以为您提供解决方法。
Waylan,2016年

1
是的,我想要数学方程式和对齐的方程式,以及内联的数学符号。就是这样。
user90593 '16



1
您考虑过使用Jupyter笔记本吗?您甚至可以立即插入python代码;)
Charlie Parker

Answers:


42

对于较短的表达式而不是那么花哨的数学,您可以使用内联HTML将您的乳胶渲染的数学运算放到代码齿轮上,然后嵌入结果图像。这里是一个例子:

- <img src="https://latex.codecogs.com/gif.latex?O_t=\text { Onset event at time bin } t " /> 
- <img src="https://latex.codecogs.com/gif.latex?s=\text { sensor reading }  " /> 
- <img src="https://latex.codecogs.com/gif.latex?P(s | O_t )=\text { Probability of a sensor reading value when sleep onset is observed at a time bin } t " />

这应该导致类似下一个

更新:不幸的是,这在eclipse中很好用,但在github中却不行。唯一的解决方法是下一个:

使用您的乳胶方程式,并转到http://www.codecogs.com/latex/eqneditor.php,在显示方程式区域的底部,有一个很小的下拉菜单,选择已编码的URL,然后将其粘贴到您的github markdown的下一种方式:

![equation](http://latex.codecogs.com/gif.latex?O_t%3D%5Ctext%20%7B%20Onset%20event%20at%20time%20bin%20%7D%20t)
![equation](http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D) 
![equation](http://latex.codecogs.com/gif.latex?P%28s%20%7C%20O_t%20%29%3D%5Ctext%20%7B%20Probability%20of%20a%20sensor%20reading%20value%20when%20sleep%20onset%20is%20observed%20at%20a%20time%20bin%20%7D%20t)

4
我建议使用latex.codecogs.com/png.latex而不是latex.codecogs.com/gif.latex ; 它返回质量更好的图像!
Steffo

9
您可以使用latex.codecogs.com/svg.latex,它与分辨率无关。
lizardfireman

28

我将带有公式的存储库上传到Gitlab,因为它对.md文件中的LaTeX具有本机支持:

```math
SE = \frac{\sigma}{\sqrt{n}}
```

内联乳胶的语法为$`\sqrt{2}`$

Gitlab在浏览器中使用JavaScript渲染方程式,而不是显示图像,从而提高了方程式的质量。

更多信息在这里

希望Github将来也能实现这一点。


惊人!感谢您的提示:)
Jonathan H

您知道GitHub是否已实现吗?
Rylan Schaeffer

21

自述文件

我一直在研究一个脚本,该脚本可以自动完成大部分任务,而无需将LaTeX排版好地放入Github风格的markdown中:https : //github.com/leegao/readme2tex

为Github渲染LaTeX面临一些挑战。首先,Github风格的markdown会删除大多数标签和大多数属性。这意味着没有基于Javascript的库(如Mathjax),也没有任何CSS样式。

那么自然的解决方案似乎是嵌入预编译方程的图像。但是,您很快就会意识到,LaTeX所做的不仅仅是将带美元符号的公式转换为图像。

在此处输入图片说明

简单地嵌入在线编译器中的图像会使您的文档看起来非常不自然。实际上,我认为在您日常的x ^ 2数学语中,它比jumpy更易读

我认为确保以自然且可读的方式排版文档很重要。这就是为什么我编写了一个脚本的原因,该脚本除了将公式编译为图像外,还可以确保生成的图像正确地适合并与文本的其余部分对齐。

例如,以下是.md文件摘录,其中涉及使用设置的正则表达式的一些枚举属性readme2tex

在此处输入图片说明

如您所料,只需启动相应的align*环境即可指定顶部的方程组

**Theorem**: The translation $[\![e]\!]$ given by
\begin{align*}
...
\end{align*}
...

请注意,当嵌入式方程式($ ... $)与文本一起运行时,显示方程式(由\begin{ENV}...\end{ENV}或分隔的方程式$$...$$)居中。这使已经习惯了LaTeX的人们容易保持生产力。

如果这听起来可能有帮助,请确保将其签出。https://github.com/leegao/readme2tex


14
基于这项工作,我创建了一个GitHub应用程序,该应用程序可自动执行渲染过程,并在每次进行推送时触发它。我认为这很有用,因此我为那些想尝试一下的人分享了该链接:github.com/agurz/github-texify
agurodriguez

3
真好!实际上,您的工作真是太棒了:)
李(Lee)

当包含Markdown枚举项目的内联mathjax时,TeXify应用程序似乎不起作用。
user32882 '19



13

我测试了其他人提出的解决方案,我想推荐agurodriguez在评论中创建和提出的TeXify,并由Tom Hale进一步描述-我想提出他的答案,并给出为什么这是一个很好的解决方案的原因:

  • TeXify是包装Readme2Tex(中提及李回答)。要使用Readme2Tex,您必须在本地计算机上安装很多软件(python,latex等)-但TeXify是github插件,因此您无需在本地计算机上安装任何软件 -您只需要在线安装即可按下一个按钮,在github帐户中插入一个插件,然后选择TeXify将对其具有读/写访问权限的存储库,以解析您的tex公式并生成图片。
  • 当您在存储库中创建或更新*.tex.md文件时,TeXify将检测更改并生成*.md文件,其中乳胶配方将通过保存在tex回购目录中的图片交换乳胶配方。因此,如果您创建README.tex.md文件,则TeXify将生成带有图片而不是tex公式的README.md。因此,在每次commit&push时,都会自动完成tex公式的解析并生成文档:)
  • 因为您所有的公式都被更改为tex目录中的图片,并且README.md文件使用了指向这些图片的链接,所以您甚至可以卸载TeXify,并且所有旧文档仍然可以使用 :)。该tex目录和*.tex.md文件将留在库中,所以你必须访问原始乳胶配方和图片(你也可以安全地存储tex目录下的“手工制作”的其他文档图片- TeXify不会去碰它们)。
  • 您可以在README.tex.md文件中直接使用方程式乳胶语法(不松动.md markdown语法),这非常方便朱莉(Julii)在他的回答中建议使用特殊链接(带有公式)到外部服务,例如。http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D但这很好,但是有一些缺点:链接中的公式不容易(方便)阅读和更新,并且如果该第三方服务有问题,您的旧文档将停止工作...在TeXify中,您的旧文档即使您卸载了该插件,它也将始终有效(因为从乳胶配方生成的所有图片都保留在tex目录中的存储库中)。
  • 宇超江在他的回答,建议使用Jupyter笔记本电脑,这也是不错的但是有索姆缺点:不能在README.md文件中直接使用公式,您需要到其他文件的链接有* .ipynb在回购其中包含胶乳(MathJax)公式。* .ipynb文件格式为JSON,不便于维护(例如,当您忘记将逗号放在适当位置时,Gist不会在* .ipynb文件中显示行号的详细错误...)。

这是指向我的一些存储库的链接,在这些存储库中,我使用了TeXify,该文件是从README.tex.md文件生成的文档。


@Royi我不知道
KamilKiełczewski19年

很好,但是您如何处理/ tex文件夹中的大量未使用的垃圾svg图像?
Serge P.

@SergeP。奉献一切并推动?
卡米尔·基列夫斯基(KamilKiełczewski),

6

要在推送到GitHub时进行自动转换,请查看TeXify应用程序:

GitHub App,查找您带有扩展名* .tex.md的文件并将其TeX表达式呈现为SVG图像

工作原理(来自源存储库):

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


1
这项工作是由@agurodriguez在上面的评论中提及的
icc97

1
@ icc97是的,但是agurodriguez无法创建答案(我可能永远不会注意到他的评论)。因为Tom创建了答案(agurodriguez之后约1年),所以我注意到TeXify存在,这使我可以使用TeXify并在此基础上编写自己的答案。太好了:)
卡米尔(KamilKiełczewski)

3
@KamilKiełczewski这个答案没有错,我只是说TeXify是由SO用户创建的,因为这个线程非常酷。
icc97

我在自述文件上使用TeXify,但是由于某种原因,几乎每次$...$在文本中出现时,渲染效果都会跳行。有什么线索吗?这是仓库
Bruno Conte Leite

3

我的快速解决方案是这样的:

步骤1.将乳胶添加到.md文件中

$$x=\sqrt{2}$$

注意:数学等式必须使用$$ ... $$或\\(... \\)

步骤2.将以下内容添加到您的scripts.html或主题文件中(在此代码末尾附加)

<script type="text/javascript" async

src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">

完成!见你的等式。通过加载页面。


1
什么scripts.html文件 我找不到作为github功能对此的任何引用。
杰·莱蒙

你有主题文件(Jeykyll主题文件)吗?此代码用于在git页面中显示乳胶。
CKM

2
应该阐明,这仅适用于git页面,不适用于常规存储库中的README.md。

1

您可以获得持续集成服务(例如Travis CI)来渲染LaTeX并将结果提交到github。在每次新提交后,CI都会部署一个“云”工作者。工作人员将您的文档编译为pdf,然后要求ImageMagick将其转换为图像,或者使用PanDoc尝试进行LaTeX-> HTML转换,但成功取决于您的文档而有所不同。然后,Worker将图像或html提交到您的自述文件中可以在其中显示的位置。

下面粘贴了示例TravisCi配置,该配置可生成PDF,将其转换为PNG并将其提交到存储库中的静态位置。您将需要添加一行以获取pdf并将PDF转换为图像的行。

sudo: required
dist: trusty
os: linux
language: generic
services: docker
env:
  global:
  - GIT_NAME: Travis CI
  - GIT_EMAIL: builds@travis-ci.org
  - TRAVIS_REPO_SLUG: your-github-username/your-repo
  - GIT_BRANCH: master
# I recommend storing your GitHub Access token as a secret key in a Travis CI environment variable, for example $GH_TOKEN.
  - secure: ${GH_TOKEN}
script:
- wget https://raw.githubusercontent.com/blang/latex-docker/master/latexdockercmd.sh
- chmod +x latexdockercmd.sh
- "./latexdockercmd.sh latexmk -cd -f -interaction=batchmode -pdf yourdocument.tex -outdir=$TRAVIS_BUILD_DIR/"
- cd $TRAVIS_BUILD_DIR
- convert -density 300 -quality 90 yourdocument.pdf yourdocument.png
- git checkout --orphan $TRAVIS_BRANCH-pdf
- git rm -rf .
- git add -f yourdoc*.png
- git -c user.name='travis' -c user.email='travis' commit -m "updated PDF"
# note we are again using GitHub access key stored in the CI environment variable
- git push -q -f https://your-github-username:$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG $TRAVIS_BRANCH-pdf
notifications:
  email: false

这个Travis Ci配置启动Ubuntu工作者下载乳胶docker映像,将您的文档编译为pdf并将其提交到一个名为branchanme-pdf的分支。

更多的例子看到这GitHub库与之配套的SX讨论PanDoc例如https://dfm.io/posts/travis-latex/,和这个职位上中等



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.