{"id":13869921,"url":"https://github.com/leegao/readme2tex","last_synced_at":"2025-04-08T10:24:42.044Z","repository":{"id":47612702,"uuid":"75763295","full_name":"leegao/readme2tex","owner":"leegao","description":"Renders TeXy Math for Github Readmes","archived":false,"fork":false,"pushed_at":"2021-08-21T21:17:58.000Z","size":959,"stargazers_count":904,"open_issues_count":32,"forks_count":194,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-29T17:26:14.179Z","etag":null,"topics":["equation","formula","github","latex","markdown"],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leegao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-06T19:19:28.000Z","updated_at":"2024-10-26T09:15:32.000Z","dependencies_parsed_at":"2022-09-01T20:22:29.876Z","dependency_job_id":null,"html_url":"https://github.com/leegao/readme2tex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegao%2Freadme2tex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegao%2Freadme2tex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegao%2Freadme2tex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leegao%2Freadme2tex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leegao","download_url":"https://codeload.github.com/leegao/readme2tex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247821566,"owners_count":21001693,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["equation","formula","github","latex","markdown"],"created_at":"2024-08-05T20:01:22.003Z","updated_at":"2025-04-08T10:24:42.024Z","avatar_url":"https://github.com/leegao.png","language":"Python","funding_links":[],"categories":["Python","Git","\u003ca name=\"Python\"\u003e\u003c/a\u003ePython"],"sub_categories":["GitHub extensions"],"readme":"# readme2tex\nRenders LaTeX for Github Readmes\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"$$\u0026#10;\\huge\\text{Hello \\LaTeX}\u0026#10;$$\" src=\"svgs/d27ecd9d6334c7a020001926c8000801.png?invert_in_darkmode\" align=middle width=\"159.690135pt\" height=\"30.925785pt\"/\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"\\begin{tikzpicture}\u0026#10;\\newcounter{density}\u0026#10;\\setcounter{density}{20}\u0026#10;    \\def\\couleur{blue}\u0026#10;    \\path[coordinate] (0,0)  coordinate(A)\u0026#10;                ++( 60:6cm) coordinate(B)\u0026#10;                ++(-60:6cm) coordinate(C);\u0026#10;    \\draw[fill=\\couleur!\\thedensity] (A) -- (B) -- (C) -- cycle;\u0026#10;    \\foreach \\x in {1,...,15}{%\u0026#10;        \\pgfmathsetcounter{density}{\\thedensity+10}\u0026#10;        \\setcounter{density}{\\thedensity}\u0026#10;        \\path[coordinate] coordinate(X) at (A){};\u0026#10;        \\path[coordinate] (A) -- (B) coordinate[pos=.15](A)\u0026#10;                            -- (C) coordinate[pos=.15](B)\u0026#10;                            -- (X) coordinate[pos=.15](C);\u0026#10;        \\draw[fill=\\couleur!\\thedensity] (A)--(B)--(C)--cycle;\u0026#10;    }\u0026#10;\\end{tikzpicture}\" src=\"svgs/a00f34be6b1ce8e4820c9852c5e6163e.png\" align=middle width=\"281.2887pt\" height=\"243.69345pt\"/\u003e\u003c/p\u003e\n\n\u003csub\u003e**Make sure that pdflatex is installed on your system.**\u003c/sub\u003e\n\n----------------------------------------\n\n`readme2tex` is a Python script that \"texifies\" your readme. It takes in Github Markdown and\nreplaces anything enclosed between dollar signs with rendered \u003cimg alt=\"$\\text{\\LaTeX}$\" src=\"svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode\" align=middle width=\"42.05817pt\" height=\"22.407pt\"/\u003e.\n\nIn addition, while other Github TeX renderers tend to give a jumpy look to the compiled text, \n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://i.imgur.com/XSV1rPw.png?1\" width=500/\u003e\n\u003c/p\u003e\n\n`readme2tex` ensures that inline mathematical expressions\nare properly aligned with the rest of the text to give a more natural look to the document. For example,\nthis formula \u003cimg alt=\"$\\frac{dy}{dx}$\" src=\"svgs/24a7d013bfb0af0838f476055fc6e1ef.png?invert_in_darkmode\" align=middle width=\"14.297415pt\" height=\"30.58869pt\"/\u003e is preprocessed so that it lines up at the correct baseline for the text.\nThis is the one salient feature of this package compared to the others out there.\n\n### Installation\n\nMake sure that you have Python 2.7 or above and `pip` installed. In addition, you'll need to have the programs `latex` \nand `dvisvgm` on your `PATH`. In addition, you'll need to pre-install the `geometry` package in \u003cimg alt=\"$\\text{\\LaTeX}$\" src=\"svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode\" align=middle width=\"42.05817pt\" height=\"22.407pt\"/\u003e.\n\nTo install `readme2tex`, you'll need to run\n\n```bash\nsudo pip install readme2tex\n```\n\nor, if you want to try out the bleeding edge,\n\n```bash\ngit clone https://github.com/leegao/readme2tex\ncd readme2tex\npython setup.py develop\n```\n\nTo compile `INPUT.md` and render all of its formulas, run\n\n```bash\npython -m readme2tex --output README.md INPUT.md\n```\n\nIf you want to do this automatically for every commit of INPUT.md, you can use the `--add-git-hook` command once to\nset up the post-commit hook, like so\n\n```bash\ngit stash --include-untracked\ngit branch svgs # if this isn't already there\n\npython -m readme2tex --output README.md --branch svgs --usepackage tikz INPUT.md --add-git-hook\n\n# modify INPUT.md\n\ngit add INPUT.md\ngit commit -a -m \"updated readme\"\n\ngit stash pop\n```\n\nand every `git commit` that touches `INPUT.md` from now on will allow you to automatically run `readme2tex` on it, saving\nyou from having to remember how `readme2tex` works. The caveat is that if you use a GUI to interact with git, things\nmight get a bit wonky. In particular, `readme2tex` will just assume that you're fine with all of the changes and won't\nprompt you for verification like it does on the terminal.\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://asciinema.org/a/2am62r2x2udg1zqyb6r3kpm1i\"\u003e\u003cimg src=\"https://asciinema.org/a/2am62r2x2udg1zqyb6r3kpm1i.png\" width=600/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nYou can uninstall the hook by deleting `.git/hooks/post-commit`. See `python -m readme2tex --help` for a list\nof what you can do in `readme2tex`.\n\n### Examples:\n\nHere's a display level formula\n\u003cp align=\"center\"\u003e\u003cimg alt=\"$$\u0026#10;\\frac{n!}{k!(n-k)!} = {n \\choose k}\u0026#10;$$\" src=\"svgs/32737e0a8d5a4cf32ba3ab1b74902ab7.png?invert_in_darkmode\" align=middle width=\"127.89183pt\" height=\"39.30498pt\"/\u003e\u003c/p\u003e\n\nThe code that was used to render this formula is just\n\n    $$\n    \\frac{n!}{k!(n-k)!} = {n \\choose k}\n    $$\n\n\u003csub\u003e*Note: you can escape \\$ so that they don't render.*\u003c/sub\u003e\n\nHere's an inline formula. \n\n\u003e It is well known that if \u003cimg alt=\"$ax^2 + bx + c =0$\" src=\"svgs/162f63774d8a882cc15ae1301cfd8ac0.png?invert_in_darkmode\" align=middle width=\"119.01186pt\" height=\"26.70657pt\"/\u003e, then \u003cimg 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\"/\u003e.\n\nThe code that was used to render this is:\n\n    It is well known that if $ax^2 + bx + c = 0$, then $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.\n\nNotice that the formulas line up with the baseline of the text, even when the height of these two images are different.\n\nSometimes, you might run into formulas that are bottom-heavy, like \u003cimg alt=\"$x^2\\sum\\limits_{3^{n^{n^{n}}}}$\" src=\"svgs/4cb4ead947a07837121937c807973436.png?invert_in_darkmode\" align=middle width=\"47.639295pt\" height=\"37.03194pt\"/\u003e. Here, `readme2tex`\ncan compute the correct offset to align this formula to the baseline of your paragraph of text as well.\n\n#### Tikz (Courtesy of http://www.texample.net/)\n\nDid you notice the picture at the top of this page? That was also generated by \u003cimg alt=\"$\\text{\\LaTeX}$\" src=\"svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode\" align=middle width=\"42.05817pt\" height=\"22.407pt\"/\u003e. `readme2tex` is capable of\nhandling Tikz code. For reference, the picture\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"\\begin{tikzpicture}\u0026#10;\\newcounter{density}\u0026#10;\\setcounter{density}{20}\u0026#10;    \\def\\couleur{red}\u0026#10;    \\path[coordinate] (0,0)  coordinate(A)\u0026#10;                ++( 60:6cm) coordinate(B)\u0026#10;                ++(-60:6cm) coordinate(C);\u0026#10;    \\draw[fill=\\couleur!\\thedensity] (A) -- (B) -- (C) -- cycle;\u0026#10;    \\foreach \\x in {1,...,15}{%\u0026#10;        \\pgfmathsetcounter{density}{\\thedensity+10}\u0026#10;        \\setcounter{density}{\\thedensity}\u0026#10;        \\path[coordinate] coordinate(X) at (A){};\u0026#10;        \\path[coordinate] (A) -- (B) coordinate[pos=.15](A)\u0026#10;                            -- (C) coordinate[pos=.15](B)\u0026#10;                            -- (X) coordinate[pos=.15](C);\u0026#10;        \\draw[fill=\\couleur!\\thedensity] (A)--(B)--(C)--cycle;\u0026#10;    }\u0026#10;\\end{tikzpicture}\" src=\"svgs/522cbfbc866df378cb95b2ef083131b2.png\" align=middle width=\"281.2887pt\" height=\"243.69345pt\"/\u003e\u003c/p\u003e\n\nis given by the tikz code\n\n    \\begin{tikzpicture}\n    \\newcounter{density}\n    \\setcounter{density}{20}\n        \\def\\couleur{red}\n        \\path[coordinate] (0,0)  coordinate(A)\n                    ++( 60:6cm) coordinate(B)\n                    ++(-60:6cm) coordinate(C);\n        \\draw[fill=\\couleur!\\thedensity] (A) -- (B) -- (C) -- cycle;\n        \\foreach \\x in {1,...,15}{%\n            \\pgfmathsetcounter{density}{\\thedensity+10}\n            \\setcounter{density}{\\thedensity}\n            \\path[coordinate] coordinate(X) at (A){};\n            \\path[coordinate] (A) -- (B) coordinate[pos=.15](A)\n                                -- (C) coordinate[pos=.15](B)\n                                -- (X) coordinate[pos=.15](C);\n            \\draw[fill=\\couleur!\\thedensity] (A)--(B)--(C)--cycle;\n        }\n    \\end{tikzpicture}\n\nWe can see a few other examples, such as this graphical proof of the Pythagorean Theorem.\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"\\begin{tikzpicture}\u0026#10;\\newcommand{\\pythagwidth}{3cm}\u0026#10;\\newcommand{\\pythagheight}{2cm}\u0026#10;  \\coordinate [label={below right:$A$}] (A) at (0, 0);\u0026#10;  \\coordinate [label={above right:$B$}] (B) at (0, \\pythagheight);\u0026#10;  \\coordinate [label={below left:$C$}] (C) at (-\\pythagwidth, 0);\u0026#10;\u0026#10;  \\coordinate (D1) at (-\\pythagheight, \\pythagheight + \\pythagwidth);\u0026#10;  \\coordinate (D2) at (-\\pythagheight - \\pythagwidth, \\pythagwidth);\u0026#10;\u0026#10;  \\draw [very thick] (A) -- (C) -- (B) -- (A);\u0026#10;\u0026#10;  \\newcommand{\\ranglesize}{0.3cm}\u0026#10;  \\draw (A) -- ++ (0, \\ranglesize) -- ++ (-\\ranglesize, 0) -- ++ (0, -\\ranglesize);\u0026#10;\u0026#10;  \\draw [dashed] (A) -- node [below] {$b$} ++ (-\\pythagwidth, 0)\u0026#10;            -- node [right] {$b$} ++ (0, -\\pythagwidth)\u0026#10;            -- node [above] {$b$} ++ (\\pythagwidth, 0)\u0026#10;            -- node [left]  {$b$} ++ (0, \\pythagwidth);\u0026#10;\u0026#10;  \\draw [dashed] (A) -- node [right] {$c$} ++ (0, \\pythagheight)\u0026#10;            -- node [below] {$c$} ++ (\\pythagheight, 0)\u0026#10;            -- node [left]  {$c$} ++ (0, -\\pythagheight)\u0026#10;            -- node [above] {$c$} ++ (-\\pythagheight, 0);\u0026#10;\u0026#10;  \\draw [dashed] (C) -- node [above left]  {$a$} (B)\u0026#10;                     -- node [below left]  {$a$} (D1)\u0026#10;                     -- node [below right] {$a$} (D2)\u0026#10;                     -- node [above right] {$a$} (C);\u0026#10;\\end{tikzpicture}\" src=\"svgs/e148d2d3bb31215788cc03f9b472e5ba.png?invert_in_darkmode\" align=middle width=\"328.0695pt\" height=\"374.83545pt\"/\u003e\u003c/p\u003e\n\nHow about a few snowflakes?\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"\\begin{center}\u0026#10;\\usetikzlibrary{lindenmayersystems}\u0026#10;\u0026#10;\\pgfdeclarelindenmayersystem{A}{\u0026#10;    \\rule{F -\u0026gt; FF[+F][-F]}\u0026#10;}\u0026#10;\u0026#10;\\pgfdeclarelindenmayersystem{B}{\u0026#10;    \\rule{F -\u0026gt; ffF[++FF][--FF]}\u0026#10;}\u0026#10;\u0026#10;\\pgfdeclarelindenmayersystem{C}{\u0026#10;    \\symbol{G}{\\pgflsystemdrawforward}\u0026#10;    \\rule{F -\u0026gt; F[+F][-F]FG[+F][-F]FG}\u0026#10;}\u0026#10;\u0026#10;\\pgfdeclarelindenmayersystem{D}{\u0026#10;    \\symbol{G}{\\pgflsystemdrawforward}\u0026#10;    \\symbol{H}{\\pgflsystemdrawforward}\u0026#10;    \\rule{F -\u0026gt; H[+HG][-HG]G}\u0026#10;    \\rule{G -\u0026gt; HF}\u0026#10;}\u0026#10;\u0026#10;\\tikzset{\u0026#10;    type/.style={l-system={#1, axiom=F,order=3,step=4pt,angle=60},\u0026#10;      blue, opacity=0.4, line width=.5mm, line cap=round   \u0026#10;    },\u0026#10;}\u0026#10;\u0026#10;\\newcommand\\drawsnowflake[2][scale=0.2]{\u0026#10;    \\tikz[#1]\u0026#10;    \\foreach \\a in {0,60,...,300}  {\u0026#10;    \\draw[rotate=\\a,#2] l-system;\u0026#10;    };\u0026#10;}\u0026#10;\u0026#10;\\foreach \\width in {.2,.4,...,.8} \u0026#10;{  \\drawsnowflake[scale=0.3]{type=A, line width=\\width mm} }\u0026#10;\u0026#10;\\foreach \\width in {.2,.4,...,.8} \u0026#10;{  \\drawsnowflake[scale=0.38]{type=A, l-system={angle=90}, line width=\\width mm} }    \u0026#10;\u0026#10;\\foreach \\width in {.2,.4,...,.8} \u0026#10;{  \\drawsnowflake[scale=0.3]{type=B, line width=\\width mm} }\u0026#10;\u0026#10;\\foreach \\width in {.2,.4,...,.8} \u0026#10;{  \\drawsnowflake{type=B, l-system={angle=30}, line width=\\width mm} }\u0026#10;\u0026#10;\\drawsnowflake[scale=0.24]{type=C, l-system={order=2}, line width=0.2mm}\u0026#10;\\drawsnowflake[scale=0.25]{type=C, l-system={order=2}, line width=0.4mm}\u0026#10;\\drawsnowflake[scale=0.25]{type=C, l-system={order=2,axiom=fF}, line width=0.2mm}\u0026#10;\\drawsnowflake[scale=0.32]{type=C, l-system={order=2,axiom=---fff+++F}, line width=0.2mm}\u0026#10;\u0026#10;\\drawsnowflake[scale=0.38]{type=D, l-system={order=4,angle=60,axiom=GF}, line width=0.7mm}\u0026#10;\\drawsnowflake[scale=0.38]{type=D, l-system={order=4,angle=60,axiom=GfF}, line width=0.7mm}\u0026#10;\\drawsnowflake[scale=0.38]{type=D, l-system={order=4,angle=60,axiom=FG}, line width=0.7mm}\u0026#10;\\drawsnowflake[scale=0.38]{type=D, l-system={order=4,angle=60,axiom=FfG}, line width=0.7mm}\u0026#10;\\end{center}\" src=\"svgs/eb57748cb91d08bfc997b0d70f7f2774.png?invert_in_darkmode\" align=middle width=\"284.7009pt\" height=\"343.2924pt\"/\u003e\u003c/p\u003e\n\n### Usage\n\n    python -m readme2tex --output README.md [READOTHER.md]\n\nIt will then look for a file called `readother.md` and compile it down to a readable Github-ready\ndocument.\n\nIn addition, you can specify other arguments to `render.py`, such as:\n\n* `--readme READOTHER.md` The raw readme to process. Defaults to `READOTHER.md`.\n* `--output README.md` The processed readme.md file. Defaults to `README_GH.md`.\n* `--usepackage tikz` Addition packages to use during \u003cimg alt=\"$\\text{\\LaTeX}$\" src=\"svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode\" align=middle width=\"42.05817pt\" height=\"22.407pt\"/\u003e compilation. You can specify this multiple times.\n* `--svgdir svgs/` The directory to store the output svgs. The default is `svgs/`\n* `--branch master` *Experimental* Which branch to store the svgs into, the default is just master.\n* `--username username` Your github username. This is optional, and `render.py` will try to infer this for you.\n* `--project project` The current github project. This is also optional.\n* `--nocdn` Ticking this will use relative paths for the output images. Defaults to False.\n* `--htmlize` Ticking this will output a `md.html` file so you can preview what the output looks like. Defaults to False.\n* `--valign` Ticking this will use the `valign` trick (detailed below) instead. See the caveats section for tradeoffs.\n* `--rerender` Ticking this will force a recompilation of all \u003cimg alt=\"$\\text{\\LaTeX}$\" src=\"svgs/c068b57af6b6fa949824f73dcb828783.png?invert_in_darkmode\" align=middle width=\"42.05817pt\" height=\"22.407pt\"/\u003e formulas even if they are already cached.\n* `--bustcache` Ticking this will ensure that Github renews its image cache. Github may sometimes take up to an hour for changed images to reappear. This is usually not necessary unless you've made stylistic changes.\n* `--add-git-hook` Ticking this will generate a post-commit hook for git that runs readme2tex with the rest of the specified arguments after each `git commit`.\n* `--pngtrick` Ticking this will generate `png` files instead of `svgs` for the formulas.\n\nMy usual workflow is to create a secondary branch just for the compiled svgs. You can accomplish this via\n\n    python -m readme2tex --branch svgs --output README.md\n\nHowever, be careful with this command, since it will switch over to the `svgs` branch without any input from you.\n\n#### Relative Paths\n\nIf you're on a private repository or you want to, for whatever reason, use relative paths to resolve your images, you can\ndo so by using the combination\n\n    python -m readme2tex --branch master --nocdn --pngtrick ...\n\nwhich will output `pngs` relative to your `README.md`.\n\nDue to security considerations, Github will not resolve `svgs` relatively, which means that private repositories will\nbe locked out of the usual `svg` workflow. Using the `--branch master --nocdn --pngtrick` combination will get around\nthis restriction.\n\n### Troubleshooting\n\n#### Tikz\n\nIf your Tikz drawings don't show up, there's a good chance that you either don't have Ghostscript installed or\n`dvisvgm` isn't picking it up for whatever reason. This is most likely to happen on some installations of TexLive\non OSX.\n\nCheck to see if `ps` is included in the list when you run\n\n```bash\n# dvisvgm -l\nbgcolor    background color special\ncolor      complete support of color specials\ndvisvgm    special set for embedding raw SVG snippets\nem         line drawing statements of the emTeX special set\nhtml       hyperref specials\npdf        pdfTeX font map specials\nps         dvips PostScript specials \u003c\u003c\u003c\ntpic       TPIC specials\n```\n\nIf not, try installing it (either `apt-get`, `yum`, or `brew`). Furthermore, if you are on OSX, make sure to add the\nfollowing to your `~/.bash_profile`\n\n```bash\nexport LIBGS=/usr/local/lib/libgs.dylib\n```\n\nwhere `/usr/local/lib/libgs.dylib` is the location where `libgs.dylib` is installed.\n\n#### I'm seeing weird formatting from time to time.\n\nMake sure that if you have a `\u003cp\u003e...\u003c/p\u003e` tag somewhere, you leave at least one blank line after the closing tag.\n\n#### I ran `--add-git-hook`, but the post-commit hook isn't running after committing.\n\n```bash\nchmod +x .git/hooks/post-commit\n```\n\n#### I raw `readme2tex` and got strange image srcs or got images that won't resolve\n\nTry running `readme2tex` with\n\n```bash\npython -m readme2tex ... --username GITHUB_USERNAME  --project PROJECT_NAME\n```\n\n#### I ran `readme2tex` and got a traceback somewhere.\n\nUnfortunately, this script still has a few kinks and bugs that I need to iron out. In the mean time, if the `pypi` releases\naren't working for you, you should switch over to the development version to see if the bugs have been squashed:\n\n```bash\ngit clone https://github.com/leegao/readme2tex\ncd readme2tex\npython setup.py develop\n```\n\n### Technical Tricks\n\n#### How can you tell where the baseline of an image is?\n\nBy prepending every inline formula with an anchor. During post-processing, we can isolate the anchor, which\nis fixed at the baseline, and crop it out. It's super clowny, but it does the job.\n\n#### Caveats\n\nGithub does not allow you to pass in custom style attributes to your images. While this is useful for security purposes,\nit makes it incredibly difficult to ensure that images will align correctly to the text. `readme2tex` circumvents this\nusing one of two tricks:\n\n1. In Chrome, the attribute `valign=offset` works for `img` tags as well. This allows us to shift the image directly.\nUnfortunately, this is not supported within any of the other major browsers, therefore this mode is not enabled by\ndefault.\n2. In every (reasonably modern) browser, the `align=middle` attribute will vertically center an image. However, the\ndefinition of the vertical \"center\" is different. In particular, for Chrome, Firefox, (and probably Safari), that center\nis the exact middle of the image. For IE and Edge however, the center is about 5 pixels (the height of a lower-case character)\nabove the exact center. Since this looks great for non-IE browsers, and reasonably good on Edge, this is the default\nrendering method. The trick here is to pad either the top or the bottom of the image with extra spaces until the\nbaseline of the formula is at the center. For most formulas, this works great. However, if you have a tall formula,\nlike \u003cimg alt=\"$\\frac{~}{\\sum\\limits_{x^{x^{x^{x}}}}^{x^{x^{x^{x}}}} f(x)}$\" src=\"svgs/bdd0f9b91b7fff7fe5a2b1b7684a96ef.png?invert_in_darkmode\" align=middle width=\"56.16666pt\" height=\"71.68953pt\"/\u003e, you'll notice that there might be a lot\nof slack vertical spacing between these lines. If this is a deal-breaker for you, you can always try the `--valign True`\nmode. For most inline formulas, this is usually a non-issue.\n\n#### How to compile this document\nMake sure that you have the `tikz` and the `xcolor` packages installed locally.\n\n    python -m readme2tex --usepackage \"tikz\" --usepackage \"xcolor\" --output README.md --branch svgs\n\nand of course\n\n    python -m readme2tex --usepackage \"tikz\" --usepackage \"xcolor\" --output README.md --branch svgs --add-git-hook\n\nFor the `png` relative mode, use\n\n    python -m readme2tex --usepackage \"tikz\" --usepackage \"xcolor\" --output README.md --branch master --nocdn --pngtrick\n\n----------------------------------------\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"\\begin{tikzpicture}[scale=0.25, line join=bevel]\u0026#10;% \\a and \\b are two macros defining characteristic\u0026#10;% dimensions of the Penrose triangle.\u0026#9;\u0026#9;\u0026#10;\\pgfmathsetmacro{\\a}{2.5}\u0026#10;\\pgfmathsetmacro{\\b}{0.9}\u0026#10;\u0026#10;\\tikzset{%\u0026#10;  apply style/.code     = {\\tikzset{#1}},\u0026#10;  triangle_edges/.style = {thick,draw=black}\u0026#10;}\u0026#10;\u0026#10;\\foreach \\theta/\\facestyle in {%\u0026#10;    0/{triangle_edges, fill = gray!50},\u0026#10;  120/{triangle_edges, fill = gray!25},\u0026#10;  240/{triangle_edges, fill = gray!90}%\u0026#10;}{\u0026#10;  \\begin{scope}[rotate=\\theta]\u0026#10;    \\draw[apply style/.expand once=\\facestyle]\u0026#10;      ({-sqrt(3)/2*\\a},{-0.5*\\a})                     --\u0026#10;      ++(-\\b,0)                                       --\u0026#10;        ({0.5*\\b},{\\a+3*sqrt(3)/2*\\b})                -- % higher point\u0026#9;\u0026#10;        ({sqrt(3)/2*\\a+2.5*\\b},{-.5*\\a-sqrt(3)/2*\\b}) -- % rightmost point\u0026#10;      ++({-.5*\\b},-{sqrt(3)/2*\\b})                    -- % lower point\u0026#10;        ({0.5*\\b},{\\a+sqrt(3)/2*\\b})                  --\u0026#10;      cycle;\u0026#10;    \\end{scope}\u0026#10;  }\u0026#9;\u0026#10;\\end{tikzpicture}\" src=\"svgs/48ab6ba0b4263d6ecddedfd213f66ff5.png?invert_in_darkmode\" align=middle width=\"104.567595pt\" height=\"90.73581pt\"/\u003e\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleegao%2Freadme2tex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleegao%2Freadme2tex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleegao%2Freadme2tex/lists"}