Github의 README.md에서 라텍스 렌더링


134

GitHub 리포지토리의 README.md에서 LaTex를 렌더링하는 방법이 있습니까? 나는 그것을 구글 검색하고 스택 오버플로를 검색했지만 관련 답변 중 어느 것도 실현 가능하지 않은 것으로 보입니다.


1
직접 불가능합니다. LaTex가 필요하다고 생각되는 것이 있습니까? 예를 들어, 수학 방정식을 원한다면 특정 트릭으로 가능할 수 있습니다. 무엇을 렌더링하고 싶은지 알려 주시면 누군가가 해결 방법을 알려줄 수 있습니다.
Waylan

1
예, 수학 방정식과 정렬 된 방정식 및 인라인 수학 기호를 원합니다. 거의 다됐다.
user90593


또한 이것은 : github wikis의 LaTeX math .
Waylan

1
Jupyter 노트북 사용을 고려 했습니까? 이제 파이썬 코드를 삽입 할 수도 있습니다.;)
Charlie Parker

답변:


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 " />

다음과 같은 결과가 나올 것입니다

업데이트 : 이것은 일식에서는 훌륭하지만 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

.md 파일에서 LaTeX를 기본적으로 지원하기 때문에 방정식이있는 리포지토리를 Gitlab에 업로드합니다.

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

인라인 라텍스의 구문은 $`\sqrt{2}`$입니다.

Gitlab은 이미지를 표시하는 대신 브라우저에서 JavaScript로 방정식을 렌더링하여 방정식의 품질을 향상시킵니다.

자세한 내용은 여기를 참조하십시오 .

Github이 앞으로도이를 구현하기를 바랍니다.


놀랄 만한! 팁 주셔서 감사합니다 :)
Jonathan H

GitHub가이를 구현했는지 알고 있습니까?
Rylan Schaeffer


21

Readme2Tex

LaTeX 조판을 Github 풍미있는 마크 다운으로 멋지게 만드는 스크립트를 작성했습니다 : https://github.com/leegao/readme2tex

Github 용 LaTeX를 렌더링하는 데는 몇 가지 과제가 있습니다. 먼저, Github 풍미 마크 다운은 대부분의 태그와 대부분의 속성을 제거합니다. 이는 Javascript 기반 라이브러리 (예 : Mathjax) 나 CSS 스타일이 없음을 의미합니다.

자연스러운 해결책은 미리 컴파일 된 방정식의 이미지를 포함시키는 것 같습니다. 그러나 곧 LaTeX는 달러 기호로 둘러싸인 수식을 이미지로 변환하는 것 이상의 역할을한다는 것을 곧 알게 될 것입니다.

여기에 이미지 설명을 입력하십시오

온라인 컴파일러의 이미지를 간단히 임베드하면 문서에 자연스러운 느낌을 줄 수 있습니다. 사실, 나는 그것이 일상적인 x ^ 2 수학 속어에서 jumpy보다 훨씬 더 읽기 쉽다고 주장합니다 .

문서를 자연스럽고 읽을 수있는 방식으로 조판하는 것이 중요하다고 생각합니다. 그렇기 때문에 수식을 이미지로 컴파일하는 것 외에도 결과 이미지가 텍스트의 나머지 부분에 올바르게 맞춰 지도록 스크립트를 작성했습니다.

예를 들어, 다음은 다음을 .md사용하여 정규 표현식 typeset의 열거 속성에 관한 파일 에서 발췌 한 것입니다 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

마크 다운 열거 항목에 인라인 mathjax를 포함하면 TeXify 앱이 작동하지 않는 것 같습니다.
user32882


13

나는 다른 사람들이 제안한 솔루션을 테스트하고 agurodriguez가 작성한 의견으로 TeXify 를 추천 하고 Tom Hale이 더 자세히 설명하고 싶습니다.

  • TeXify는 Readme2Tex ( Lee 응답 의 인용문)의 래퍼입니다 . Readme2Tex를 사용하려면 로컬 컴퓨터에 많은 소프트웨어를 설치해야합니다 (python, latex 등). 그러나 TeXify는 github 플러그인이므로 로컬 컴퓨터에 아무것도 설치할 필요가 없습니다. 온라인 설치 만하면 됩니다. 하나의 버튼 을 눌러 github 계정에 플러그인하고 TeXify가 tex 수식을 구문 분석하고 그림을 생성하기 위해 읽기 / 쓰기 액세스 권한을 가질 저장소를 선택하십시오.
  • 저장소에서 *.tex.md파일 을 생성하거나 업데이트 할 때 TeXify는 변경 사항을 감지하고 리포지토리의 디렉토리에 *.md저장된 그림으로 라텍스 수식을 교환 할 파일을 생성 합니다 tex. 따라서 README.tex.md 파일을 생성하면 TeXify는 텍스 공식 대신 그림과 함께 README.md를 생성합니다. 따라서 tex 공식을 파싱하고 문서를 생성하는 것은 각 commit & push에서 자동적으로 수행됩니다 :)
  • 모든 공식이 tex디렉토리의 그림으로 변경되고 README.md 파일은 해당 그림에 대한 링크를 사용 하므로 TeXify를 제거해도 모든 기존 문서는 여전히 작동합니다 . :) tex디렉토리와 *.tex.md당신이 원래 라텍스 수식과 그림 (당신은 또한 안전에 저장할 수에 액세스 할 수 있도록 파일 저장소에 남아있을 것입니다 tex- TeXify이 그들을 터치하지 않습니다 디렉토리 "손으로 만든"다른 문서 사진).
  • README.tex.md 파일에서 직접 방정식 라텍스 구문을 사용할 수 있습니다 (.md 마크 다운 구문을 잃지 않고) . 매우 편리합니다 . Julii는 그의 답변 에서 외부 서비스에 대한 공식 링크 (공식 포함)를 사용할 것을 제안했습니다. http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D그러나 좋은 점은 몇 가지 단점이 있습니다. 링크의 수식은 읽고 업데이트하기가 쉽지 않고 (제휴가), 타사 서비스에 문제가있는 경우 이전 문서가 작동을 멈출 것입니다 ... TeXify에서 이전 문서 해당 플러그인을 제거하더라도 항상 작동합니다 (라텍스 공식에서 생성 된 모든 그림이 tex디렉토리의 저장소에 있기 때문에 ).
  • Yuchao 지앙 사용하는 제안 그의 대답에 Jupyter의 노트북 도 좋은 그러나 솜 단점이있다 : 당신이 README.md 파일에 직접 수식을 사용할 수 없습니다, 당신이 다른 파일에 대한 링크가를 확인해야합니다 * 당신의 repo에 .ipynb 라텍스를 포함하는 (MathJax) 공식. 파일 * .ipynb 형식은 유지 관리가 쉽지 않은 JSON입니다 (예 : Gist는 쉼표를 올바른 위치에 놓지 않은 경우 * .ipynb 파일의 행 번호에 자세한 오류를 표시하지 않습니다 ...).

다음은 README.tex.md 파일 에서 문서가 생성 된 TeXify를 사용하는 일부 리포지토리에 대한 링크 입니다.


@Royi 모르겠다
Kamil Kiełczewski

멋지지만 / tex 폴더에있는 사용되지 않은 쓰레기 svg 이미지를 어떻게 처리합니까?
Serge P.

@SergeP. 모두를 지배하고 밀어?
Kamil Kiełczewski

6

GitHub로 푸시시 자동 변환을하려면 TeXify 앱을 살펴보십시오 .

확장명이 * .tex.md 인 파일을 찾아보고 SVG 이미지로 TeX 표현식으로 렌더링하는 GitHub 앱

작동 방식 ( 소스 리포지토리에서 ) :

푸시 할 때마다 TeXify는 마지막 커밋에서 * .tex.md 파일을 실행하고 검색합니다. 각각에 대해 readme2tex를 실행하여 달러 기호로 묶인 LaTeX 표현식을 가져 와서 일반 SVG 이미지로 변환 한 다음 출력을 .md 확장자 파일에 저장합니다 (즉, README.tex.md 파일 처리되고 출력은 README.md로 저장됩니다). 그런 다음 출력 파일과 새로운 SVG 이미지가 커밋되어 다시 리포지토리로 푸시됩니다.


1
이 작품은 위 의 코멘트 에서 언급 한 @agurodriguez의 작품입니다.
icc97

1
@ icc97 예, 그러나 agurodriguez는 답변을 만들지 않습니다 (아마도 그의 의견은 눈에 띄지 않을 것입니다). Tom은 agurodriguez로부터 ~ 1 년 후 답변을 생성하기 때문에 TeXify가 있으며 TeXify를 사용하고 이에 대한 자체 답변을 작성할 수 있습니다 . 그래서 그것은 좋았다 :)
Kamil Kiełczewski

3
@ KamilKiełczewski이 답변에는 아무런 문제가 없습니다. TeXify는이 스레드 때문에 SO 사용자가 만든 것으로 언급되어 있습니다.
icc97

readme에서 TeXify를 사용하고 있지만 어떤 이유로 $...$텍스트에 텍스트 가있을 때마다 렌더링이 거의 줄을 뛰고 있습니다. 왜 단서가 있습니까? 이것은 repo입니다 : github.com/brunoconteleite/Spatial-Model-Solver
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 기능으로 이것에 대한 참조를 찾을 수 없습니다.
Jay Lemmon

테마 파일 ( Jeykyll테마 파일)이 있습니까? 이 코드는 자식 페이지에 라텍스를 표시하기위한 것입니다.
CKM

2
이것은 정규 리포지토리의 README.md가 아닌 git 페이지에서만 작동한다는 것을 분명히해야합니다.
게르마늄

1

LaTeX를 렌더링하고 결과를 github에 커밋하기 위해 지속적인 통합 서비스 (예 : Travis CI )를 얻을 수 있습니다 . CI는 각각의 새로운 커밋 후에 "클라우드"작업자를 배포합니다. 작업자는 문서를 pdf로 컴파일하고 ImageMagick을 이미지로 변환하여 이미지로 변환하거나 PanDoc을 사용하여 성공 여부가 문서에 따라 LaTeX-> HTML 변환을 시도합니다. 그런 다음 Worker는 이미지 또는 HTML을 readme에 표시 될 수있는 저장소로 커밋합니다.

PDF를 작성하고 PNG로 변환하여 리포지토리의 정적 위치로 커밋하는 샘플 TravisCi 구성은 아래에 붙여 넣습니다. pdfconverts 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 작업자가 라텍스 도커 이미지를 다운로드하고 문서를 pdf로 컴파일 한 다음 branchanme-pdf라는 브랜치에 커밋합니다.

더 많은 예제는 이 github repo함께 제공되는 sx 토론 , PanDoc 예제 , https://dfm.io/posts/travis-latex/이 게시물은 Medium에 있습니다.



당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.