การเรนเดอร์ลาเท็กซ์ใน README.md บน Github


136

มีวิธีใดในการแสดง LaTex ใน README.md ในที่เก็บ GitHub หรือไม่ ฉัน googled และค้นหาใน stack overflow แต่ไม่มีคำตอบที่เกี่ยวข้องใด ๆ ที่เป็นไปได้


1
เป็นไปไม่ได้โดยตรง มีบางสิ่งที่เฉพาะเจาะจงที่คุณคิดว่าคุณต้องการ LaTex หรือไม่? ตัวอย่างเช่นหากคุณต้องการสมการคณิตศาสตร์นั่นอาจทำได้ด้วยเทคนิคเฉพาะบางอย่าง บอกเราว่าคุณต้องการแสดงผลอะไรและใครบางคนอาจชี้ให้คุณทราบวิธีแก้ปัญหาชั่วคราว
Waylan

1
ใช่ฉันต้องการสมการทางคณิตศาสตร์และสมการจัดแนวพร้อมด้วยสัญลักษณ์ทางคณิตศาสตร์แบบอินไลน์ มันสวยมาก
user90593



1
คุณเคยพิจารณาใช้สมุดบันทึก Jupyter หรือไม่? คุณสามารถใส่รหัสหลามได้เลย;)
Charlie Parker

คำตอบ:


43

สำหรับการขยายตัวอย่างสั้น ๆ และไม่ใช่คณิตศาสตร์แบบแฟนซีคุณสามารถใช้ 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

29

ฉันอัปโหลดที่เก็บที่มีสมการไปยัง Gitlab เนื่องจากมีการสนับสนุนดั้งเดิมสำหรับ LaTeX ในไฟล์. md:

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

$`\sqrt{2}`$ไวยากรณ์สำหรับน้ำยางข้นแบบอินไลน์คือ

Gitlab แสดงสมการด้วย JavaScript ในเบราว์เซอร์แทนที่จะแสดงภาพซึ่งจะช่วยปรับปรุงคุณภาพของสมการ

ข้อมูลเพิ่มเติมที่นี่

หวังว่า Github จะใช้สิ่งนี้เช่นกันในอนาคต


! ที่น่าตื่นตาตื่นใจ ขอบคุณสำหรับเคล็ดลับ :)
Jonathan H

1
คุณรู้หรือไม่ว่า GitHub ได้ใช้สิ่งนี้หรือไม่?
Rylan Schaeffer

22

เคล็ดลับของฉันคือการใช้ Jupyter Notebook

GitHub รองรับการแสดงผลไฟล์. ipynb ในตัว คุณสามารถเขียนแบบอินไลน์และแสดงโค้ด LaTeX ในโน้ตบุ๊กจากนั้น GitHub จะแสดงผลให้คุณ

นี่คือไฟล์สมุดบันทึกตัวอย่าง: https://gist.github.com/cyhsutw/d5983d166fb70ff651f027b2aa56ee4e


21

Readme2Tex

ฉันได้ทำงานกับสคริปต์ที่ทำให้ส่วนใหญ่เป็นไปโดยอัตโนมัติเพื่อไม่ให้ LaTeX เรียงพิมพ์ลงในมาร์กดาวน์รส Github: https://github.com/leegao/readme2tex

มีความท้าทายเล็กน้อยในการเรนเดอร์ LaTeX สำหรับ Github อันดับแรกมาร์กดาวน์แบบ Github จะดึงแท็กส่วนใหญ่และแอตทริบิวต์ส่วนใหญ่ ซึ่งหมายความว่าไม่มีไลบรารีที่ใช้ Javascript (เช่น Mathjax) หรือสไตล์ CSS ใด ๆ

วิธีการแก้ปัญหาตามธรรมชาติดูเหมือนจะเป็นการฝังภาพของสมการที่คอมไพล์ไว้แล้ว อย่างไรก็ตามในไม่ช้าคุณจะรู้ว่า LaTeX ทำมากกว่าแค่การเปลี่ยนสูตรที่มีเครื่องหมายดอลลาร์ให้เป็นรูปภาพ

ใส่คำอธิบายภาพที่นี่

เพียงแค่ฝังรูปภาพจากคอมไพเลอร์ออนไลน์ก็ทำให้เอกสารของคุณดูไม่เป็นธรรมชาติ ในความเป็นจริงฉันจะยืนยันว่ามันเป็นมากยิ่งขึ้นสามารถอ่านได้ในชีวิตประจำวัน x ^ 2 สแลงทางคณิตศาสตร์ของคุณมากกว่าน่ากลัว

ฉันเชื่อว่าการตรวจสอบให้แน่ใจว่าเอกสารของคุณเป็นแบบเรียงพิมพ์อย่างเป็นธรรมชาติและอ่านง่ายเป็นสิ่งสำคัญ นี่คือเหตุผลที่ฉันเขียนสคริปต์ที่นอกเหนือจากการรวบรวมสูตรลงในรูปภาพแล้วยังช่วยให้มั่นใจได้ว่ารูปภาพที่ได้จะได้รับการติดตั้งอย่างเหมาะสมและสอดคล้องกับส่วนที่เหลือของข้อความ

ตัวอย่างเช่นต่อไปนี้เป็นข้อความที่ตัดตอนมาจาก.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
ดี! นั่นเป็นสิ่งที่ยอดเยี่ยมจริงๆที่คุณทำได้ :)
ลี

ดูเหมือนว่าแอป TeXify จะไม่ทำงานเมื่อรวม Mathjax แบบอินไลน์สำหรับรายการที่แจกแจงมาร์กดาวน์
user32882

15

นอกจากนี้คุณยังสามารถใช้โปรแกรมแก้ไขออนไลน์นี้: https://www.codecogs.com/latex/eqneditor.phpซึ่งสร้างSVGไฟล์ได้ทันที คุณสามารถใส่ลิงค์ในเอกสารของคุณเช่นนี้ ซึ่งจะส่งผลใน:![](https://latex.codecogs.com/svg.latex?y%3Dx%5E2)


13

ฉันทดสอบวิธีแก้ปัญหาบางอย่างที่เสนอโดยผู้อื่นและฉันอยากจะแนะนำTeXify ที่สร้างและเสนอในความคิดเห็นโดยagurodriguezและอธิบายเพิ่มเติมโดยTom Hale - ฉันต้องการพัฒนาคำตอบของเขาและให้เหตุผลว่าทำไมจึงเป็นทางออกที่ดีมาก:

  • TeXify เป็นกระดาษห่อหุ้มของReadme2Tex (พูดถึงในคำตอบของ Lee ) ในการใช้ Readme2Tex คุณต้องติดตั้งซอฟต์แวร์จำนวนมากในเครื่องของคุณ (python, latex, ... ) - แต่ TeXify เป็นปลั๊กอิน github ดังนั้นคุณไม่จำเป็นต้องติดตั้งอะไรในเครื่องของคุณ - คุณต้องติดตั้งออนไลน์เท่านั้น ปลั๊กอินในตัวคุณ GitHub บัญชีโดยการกดหนึ่งปุ่มและเลือกที่เก็บที่ TeXify จะได้อ่าน / เขียนการเข้าถึงแยกสูตร tex ของคุณและสร้างภาพ
  • เมื่ออยู่ในที่เก็บของคุณที่คุณสร้างหรืออัปเดต*.tex.mdไฟล์ TeXify จะตรวจจับการเปลี่ยนแปลงและสร้าง*.mdไฟล์ที่จะแลกเปลี่ยนสูตรน้ำยางด้วยรูปภาพที่บันทึกไว้ในtexไดเร็กทอรีใน repo ของคุณ ดังนั้นหากคุณสร้างไฟล์ README.tex.md TeXify จะสร้าง README.md พร้อมรูปภาพแทนสูตร tex ดังนั้นการแยกวิเคราะห์สูตร 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 เอกสารเก่าของคุณ จะใช้งานได้เสมอแม้ว่าคุณจะถอนการติดตั้งปลั๊กอินนั้น (เนื่องจากรูปภาพทั้งหมดของคุณที่สร้างจากสูตร latex จะยังคงอยู่ใน repo ในtexไดเรกทอรี)
  • Yuchao เจียงในคำตอบของเขาเสนอให้ใช้Jupyter โน๊ตบุ๊คซึ่งยังเป็นที่ที่ดี แต่มีข้อบกพร่องส้ม: คุณไม่สามารถใช้สูตรโดยตรงในไฟล์ README.md คุณต้องการที่จะทำให้การเชื่อมโยงที่จะมีไฟล์อื่น ๆ * .ipynb ใน repo ของคุณซึ่งมีน้ำยาง (MathJax) สูตร รูปแบบไฟล์ * .ipynb เป็น JSON ซึ่งไม่สะดวกในการดูแลรักษา (เช่น Gist ไม่แสดงข้อผิดพลาดโดยละเอียดพร้อมหมายเลขบรรทัดในไฟล์ * .ipynb เมื่อคุณลืมใส่ลูกน้ำในตำแหน่งที่เหมาะสม ... )

นี่คือลิงค์ไปยัง repo บางส่วนของฉันที่ฉันใช้ TeXify ซึ่งสร้างเอกสารจากไฟล์README.tex.md


@Royi ฉันไม่รู้
Kamil Kiełczewski

เป็นเรื่องดี แต่คุณจะจัดการกับภาพ svg ขยะที่ไม่ได้ใช้จำนวนมากในโฟลเดอร์ / tex ได้อย่างไร?
เสิร์จพี

@SergeP เบี่ยงประเด็นทั้งหมดและผลักดัน?
Kamil Kiełczewski

6

สำหรับการแปลงอัตโนมัติเมื่อกดไปที่ GitHub ให้ดูที่แอปTeXify :

แอป GitHub ที่มองหาไฟล์ที่มีนามสกุล * .tex.md และแสดงผลเป็นนิพจน์ TeX เป็นรูปภาพ SVG

วิธีการทำงาน (จากที่เก็บซอร์ส ):

เมื่อใดก็ตามที่คุณกด TeXify จะเรียกใช้และค้นหาไฟล์ * .tex.md ในคอมมิตสุดท้ายของคุณ สำหรับแต่ละรายการจะเรียกใช้ readme2tex ซึ่งจะใช้นิพจน์ LaTeX ที่อยู่ระหว่างเครื่องหมายดอลลาร์แปลงเป็นภาพ SVG ธรรมดาจากนั้นบันทึกผลลัพธ์เป็นไฟล์นามสกุล. md (นั่นหมายความว่าไฟล์ชื่อ README.tex.md จะถูกประมวลผลและผลลัพธ์จะถูกบันทึกเป็น README.md) หลังจากนั้นไฟล์เอาต์พุตและภาพ SVG ใหม่จะถูกส่งกลับไปที่ repo ของคุณ


1
งานนี้โดย @agurodriguez ที่กล่าวถึงในความคิดเห็นด้านบน
icc97

1
@ icc97 ใช่ แต่agurodriguezไม่ได้สร้างคำตอบ (และฉันอาจจะไม่สังเกตเห็นความคิดเห็นของเขา) เนื่องจาก Tom สร้างคำตอบ (ประมาณ 1 ปีหลังจาก agurodriguez) ฉันสังเกตเห็นว่ามี TeXify อยู่และทำให้ฉันสามารถใช้ TeXify และเขียนฐานคำตอบของตัวเองในเรื่องนี้ได้ มันดีมาก :)
Kamil Kiełczewski

3
@ KamilKiełczewskiคำตอบนี้ไม่มีอะไรผิดฉันแค่พูดถึงว่า TeXify สร้างขึ้นโดยผู้ใช้ SO เนื่องจากเธรดนี้ซึ่งค่อนข้างดี
icc97

ฉันใช้ TeXify ใน readme ของฉัน แต่ด้วยเหตุผลบางประการการเรนเดอร์เป็นเส้นกระโดดเกือบทุกครั้งที่มี$...$ข้อความในข้อความ เบาะแสทำไม? นี่คือ repo: github.com/brunoconteleite/Spatial-Model-Solver
Bruno Conte Leite

3

วิธีแก้ปัญหาอย่างรวดเร็วของฉันคือ:

ขั้นตอนที่ 1. เพิ่มลาเท็กซ์ลงใน.mdไฟล์ของคุณ

$$x=\sqrt{2}$$

หมายเหตุ: eqns ทางคณิตศาสตร์ต้องอยู่ใน $$ ... $$ หรือ\\(... \\).

ขั้นตอนที่ 2. เพิ่มสิ่งต่อไปนี้ในscripts.htmlไฟล์หรือธีมของคุณ(ต่อท้ายรหัสนี้ในตอนท้าย)

<script type="text/javascript" async

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

!. เสร็จสิ้น ดู eq ของคุณ โดยการโหลดหน้า


1
scripts.htmlไฟล์อะไร? ฉันไม่พบการอ้างอิงใด ๆ เกี่ยวกับสิ่งนี้ในฐานะคุณลักษณะ github
Jay Lemmon

คุณมีไฟล์Jeykyllธีม( ไฟล์ธีม) หรือไม่? รหัสนี้ใช้สำหรับแสดงลาเท็กซ์ในหน้าคอมไพล์
CKM

2
ควรชี้แจงว่าสิ่งนี้ใช้ได้กับหน้า git เท่านั้นไม่ใช่สำหรับ README.md ใน repo ปกติ
เจอร์เมเนียม

1

คุณสามารถรับบริการรวมแบบต่อเนื่อง (เช่นTravis CI ) เพื่อแสดงผล LaTeX และส่งผลลัพธ์ไปยัง github CI จะปรับใช้ผู้ปฏิบัติงาน "คลาวด์" หลังจากการคอมมิตใหม่แต่ละครั้ง พนักงานรวบรวมเอกสารของคุณเป็น PDF และใช้ ImageMagick เพื่อแปลงเป็นรูปภาพหรือใช้ PanDoc เพื่อพยายามแปลง LaTeX-> HTML ซึ่งความสำเร็จอาจแตกต่างกันไปขึ้นอยู่กับเอกสารของคุณ จากนั้นผู้ปฏิบัติงานกำหนดอิมเมจหรือ html ไปยังที่เก็บของคุณจากจุดที่สามารถแสดงใน readme ของคุณ

ตัวอย่างการกำหนดค่า TravisCi ที่สร้าง PDF แปลงเป็น PNG และกำหนดให้เป็นตำแหน่งคงที่ใน repo ของคุณจะถูกวางไว้ด้านล่าง คุณจะต้องเพิ่มบรรทัดที่ดึงไฟล์ 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 ดาวน์โหลดภาพนักเทียบท่าลาเท็กซ์รวบรวมเอกสารของคุณเป็น pdf และส่งไปยังสาขาที่เรียกว่า branchanme-pdf

สำหรับตัวอย่างเพิ่มเติมโปรดดูที่นี้ repo GitHubและมาพร้อมกับการอภิปรายของ SX , ตัวอย่าง PanDoc , https://dfm.io/posts/travis-latex/และโพสต์นี้ในสื่อ


0

คุณสามารถใช้ markdowns เช่น

![equ](https://latex.codecogs.com/gif.latex?log(y)=\beta_0&space;&plus;&space;\beta_1&space;x&space;&plus;&space;u)

รหัสสามารถพิมพ์ที่นี่: https://www.codecogs.com/latex/eqneditor.php


0

หากคุณประสบปัญหาเกี่ยวกับhttps://www.codecogs.com/latex/eqneditor.phpฉันพบว่าhttps://alexanderrodin.com/github-latex-markdown/ใช้ได้กับฉัน มันสร้างรหัส Markdown ที่คุณต้องการดังนั้นคุณเพียงแค่ตัดและวางลงในเอกสาร README.md ของคุณ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.