SkillAgentSearch skills...

Readme2tex

Renders TeXy Math for Github Readme - No longer needed with official MathTex support on GH

Install / Use

/learn @leegao/Readme2tex
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

readme2tex

Renders LaTeX for Github Readmes

<p align="center"><img alt="$$&#10;\huge\text{Hello \LaTeX}&#10;$$" src="svgs/d27ecd9d6334c7a020001926c8000801.png?invert_in_darkmode" align=middle width="159.690135pt" height="30.925785pt"/></p> <p align="center"><img alt="\begin{tikzpicture}&#10;\newcounter{density}&#10;\setcounter{density}{20}&#10; \def\couleur{blue}&#10; \path[coordinate] (0,0) coordinate(A)&#10; ++( 60:6cm) coordinate(B)&#10; ++(-60:6cm) coordinate(C);&#10; \draw[fill=\couleur!\thedensity] (A) -- (B) -- (C) -- cycle;&#10; \foreach \x in {1,...,15}{%&#10; \pgfmathsetcounter{density}{\thedensity+10}&#10; \setcounter{density}{\thedensity}&#10; \path[coordinate] coordinate(X) at (A){};&#10; \path[coordinate] (A) -- (B) coordinate[pos=.15](A)&#10; -- (C) coordinate[pos=.15](B)&#10; -- (X) coordinate[pos=.15](C);&#10; \draw[fill=\couleur!\thedensity] (A)--(B)--(C)--cycle;&#10; }&#10;\end{tikzpicture}" src="svgs/a00f34be6b1ce8e4820c9852c5e6163e.png" align=middle width="281.2887pt" height="243.69345pt"/></p>

<sub>Make sure that pdflatex is installed on your system.</sub>


readme2tex is a Python script that "texifies" your readme. It takes in Github Markdown and replaces anything enclosed between dollar signs with rendered <img alt="$\text{\LaTeX}$" src="svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode" align=middle width="42.05817pt" height="22.407pt"/>.

In addition, while other Github TeX renderers tend to give a jumpy look to the compiled text,

<p align="center"> <img src="http://i.imgur.com/XSV1rPw.png?1" width=500/> </p>

readme2tex ensures that inline mathematical expressions are properly aligned with the rest of the text to give a more natural look to the document. For example, this formula <img alt="$\frac{dy}{dx}$" src="svgs/24a7d013bfb0af0838f476055fc6e1ef.png?invert_in_darkmode" align=middle width="14.297415pt" height="30.58869pt"/> is preprocessed so that it lines up at the correct baseline for the text. This is the one salient feature of this package compared to the others out there.

Installation

Make sure that you have Python 2.7 or above and pip installed. In addition, you'll need to have the programs latex and dvisvgm on your PATH. In addition, you'll need to pre-install the geometry package in <img alt="$\text{\LaTeX}$" src="svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode" align=middle width="42.05817pt" height="22.407pt"/>.

To install readme2tex, you'll need to run

sudo pip install readme2tex

or, if you want to try out the bleeding edge,

git clone https://github.com/leegao/readme2tex
cd readme2tex
python setup.py develop

To compile INPUT.md and render all of its formulas, run

python -m readme2tex --output README.md INPUT.md

If you want to do this automatically for every commit of INPUT.md, you can use the --add-git-hook command once to set up the post-commit hook, like so

git stash --include-untracked
git branch svgs # if this isn't already there

python -m readme2tex --output README.md --branch svgs --usepackage tikz INPUT.md --add-git-hook

# modify INPUT.md

git add INPUT.md
git commit -a -m "updated readme"

git stash pop

and every git commit that touches INPUT.md from now on will allow you to automatically run readme2tex on it, saving you from having to remember how readme2tex works. The caveat is that if you use a GUI to interact with git, things might get a bit wonky. In particular, readme2tex will just assume that you're fine with all of the changes and won't prompt you for verification like it does on the terminal.

<p align="center"> <a href="https://asciinema.org/a/2am62r2x2udg1zqyb6r3kpm1i"><img src="https://asciinema.org/a/2am62r2x2udg1zqyb6r3kpm1i.png" width=600/></a> </p>

You can uninstall the hook by deleting .git/hooks/post-commit. See python -m readme2tex --help for a list of what you can do in readme2tex.

Examples:

Here's a display level formula

<p align="center"><img alt="$$&#10;\frac{n!}{k!(n-k)!} = {n \choose k}&#10;$$" src="svgs/32737e0a8d5a4cf32ba3ab1b74902ab7.png?invert_in_darkmode" align=middle width="127.89183pt" height="39.30498pt"/></p>

The code that was used to render this formula is just

$$
\frac{n!}{k!(n-k)!} = {n \choose k}
$$

<sub>Note: you can escape $ so that they don't render.</sub>

Here's an inline formula.

It is well known that if <img alt="$ax^2 + bx + c =0$" src="svgs/162f63774d8a882cc15ae1301cfd8ac0.png?invert_in_darkmode" align=middle width="119.01186pt" height="26.70657pt"/>, then <img alt="$x = \frac{-b \pm \sqrt{b^2- 4ac}}{2a}$" src="svgs/584fa2612b78129d140fb208e9d76ae9.png?invert_in_darkmode" align=middle width="112.3584pt" height="33.20526pt"/>.

The code that was used to render this is:

It is well known that if $ax^2 + bx + c = 0$, then $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Notice that the formulas line up with the baseline of the text, even when the height of these two images are different.

Sometimes, you might run into formulas that are bottom-heavy, like <img alt="$x^2\sum\limits_{3^{n^{n^{n}}}}$" src="svgs/4cb4ead947a07837121937c807973436.png?invert_in_darkmode" align=middle width="47.639295pt" height="37.03194pt"/>. Here, readme2tex can compute the correct offset to align this formula to the baseline of your paragraph of text as well.

Tikz (Courtesy of http://www.texample.net/)

Did you notice the picture at the top of this page? That was also generated by <img alt="$\text{\LaTeX}$" src="svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode" align=middle width="42.05817pt" height="22.407pt"/>. readme2tex is capable of handling Tikz code. For reference, the picture

<p align="center"><img alt="\begin{tikzpicture}&#10;\newcounter{density}&#10;\setcounter{density}{20}&#10; \def\couleur{red}&#10; \path[coordinate] (0,0) coordinate(A)&#10; ++( 60:6cm) coordinate(B)&#10; ++(-60:6cm) coordinate(C);&#10; \draw[fill=\couleur!\thedensity] (A) -- (B) -- (C) -- cycle;&#10; \foreach \x in {1,...,15}{%&#10; \pgfmathsetcounter{density}{\thedensity+10}&#10; \setcounter{density}{\thedensity}&#10; \path[coordinate] coordinate(X) at (A){};&#10; \path[coordinate] (A) -- (B) coordinate[pos=.15](A)&#10; -- (C) coordinate[pos=.15](B)&#10; -- (X) coordinate[pos=.15](C);&#10; \draw[fill=\couleur!\thedensity] (A)--(B)--(C)--cycle;&#10; }&#10;\end{tikzpicture}" src="svgs/522cbfbc866df378cb95b2ef083131b2.png" align=middle width="281.2887pt" height="243.69345pt"/></p>

is given by the tikz code

\begin{tikzpicture}
\newcounter{density}
\setcounter{density}{20}
    \def\couleur{red}
    \path[coordinate] (0,0)  coordinate(A)
                ++( 60:6cm) coordinate(B)
                ++(-60:6cm) coordinate(C);
    \draw[fill=\couleur!\thedensity] (A) -- (B) -- (C) -- cycle;
    \foreach \x in {1,...,15}{%
        \pgfmathsetcounter{density}{\thedensity+10}
        \setcounter{density}{\thedensity}
        \path[coordinate] coordinate(X) at (A){};
        \path[coordinate] (A) -- (B) coordinate[pos=.15](A)
                            -- (C) coordinate[pos=.15](B)
                            -- (X) coordinate[pos=.15](C);
        \draw[fill=\couleur!\thedensity] (A)--(B)--(C)--cycle;
    }
\end{tikzpicture}

We can see a few other examples, such as this graphical proof of the Pythagorean Theorem.

<p align="center"><img alt="\begin{tikzpicture}&#10;\newcommand{\pythagwidth}{3cm}&#10;\newcommand{\pythagheight}{2cm}&#10; \coordinate [label={below right:$A$}] (A) at (0, 0);&#10; \coordinate [label={above right:$B$}] (B) at (0, \pythagheight);&#10; \coordinate [label={below left:$C$}] (C) at (-\pythagwidth, 0);&#10;&#10; \coordinate (D1) at (-\pythagheight, \pythagheight + \pythagwidth);&#10; \coordinate (D2) at (-\pythagheight - \pythagwidth, \pythagwidth);&#10;&#10; \draw [very thick] (A) -- (C) -- (B) -- (A);&#10;&#10; \newcommand{\ranglesize}{0.3cm}&#10; \draw (A) -- ++ (0, \ranglesize) -- ++ (-\ranglesize, 0) -- ++ (0, -\ranglesize);&#10;&#10; \draw [dashed] (A) -- node [below] {$b$} ++ (-\pythagwidth, 0)&#10; -- node [right] {$b$} ++ (0, -\pythagwidth)&#10; -- node [above] {$b$} ++ (\pythagwidth, 0)&#10; -- node [left] {$b$} ++ (0, \pythagwidth);&#10;&#10; \draw [dashed] (A) -- node [right] {$c$} ++ (0, \pythagheight)&#10; -- node [below] {$c$} ++ (\pythagheight, 0)&#10; -- node [left] {$c$} ++ (0, -\pythagheight)&#10; -- node [above] {$c$} ++ (-\pythagheight, 0);&#10;&#10; \draw [dashed] (C) -- node [above left] {$a$} (B)&#10; -- node [below left] {$a$} (D1)&#10; -- node [below right] {$a$} (D2)&#10; -- node [above right] {$a$} (C);&#10;\end{tikzpicture}" src="svgs/e148d2d3bb31215788cc03f9b472e5ba.png?invert_in_darkmode" align=middle width="328.0695pt" height="374.83545pt"/></p>

How about a few snowflakes?

<p align="center"><img alt="\begin{center}&#10;\usetikzlibrary{lindenmayersystems}&#10;&#10;\pgfdeclarelindenmayersystem{A}{&#10; \rule{F -&gt; FF[+F][-F]}&#10;}&#10;&#10;\pgfdeclarelindenmayersystem{B}{&#10; \rule{F -&gt; ffF[++FF][--FF]}&#10;}&#10;&#10;\pgfdeclarelindenmayersystem{C}{&#10; \symbol{G}{\pgflsystemdrawforward}&#10; \rule{F -&gt; F[+F][-F]FG[+F][-F]FG}&#10;}&#10;&#10;\pgfdeclarelindenmayersystem{D}{&#10; \symbol{G}{\pgflsystemdrawforward}&#10; \symbol{H}{\pgflsystemdrawforward}&#10; \rule{F -&gt; H[+HG][-HG]G}&#10; \rule{G -&gt; HF}&#10;}&#10;&#10;\tikzset{&#10; type/.style={l-system={#1, axiom=F,order=3,step=4p
View on GitHub
GitHub Stars912
CategoryCustomer
Updated8d ago
Forks191

Languages

Python

Security Score

100/100

Audited on Apr 2, 2026

No findings