9 ms·

Render mathematical expressions in Markdown On GitHub

524 points by robin_reala 4y ago

physicsguy 4y ago
Finally!
ofou 4y ago
Finally!
- orange3xchicken 4y ago
  I know, I've been waiting so long for this! I will not miss having to render and reference pngs of equations / api requests.
  - jeremymcanally 4y ago
    You think you waited a long time? I wrote a patch to add this to GitHub when I worked there in 2011-12! :) It was rejected at the time by some folks for various “product” reasons, but I’m glad to see it finally become a thing.
dllu 4y ago
Finally a long-awaited feature. Works nicely in dark mode too. However, it simply uses MathJax. Also there are some minor annoyances. For example you need to escape the backslashes, so it takes 4 backslashes to make a newline in your matrix. $$\begin{bmatrix} a & b \\\\ c & d\end{bmatrix}$$ I found that the inline math doesn't quite match the font size of the surrounding text too (it's smaller).
- thaumasiotes 4y ago
  > For example you need to escape the backslashes, so it takes 4 backslashes to make a newline in your matrix. > $$\begin{bmatrix} a & b \\\\ c & d\end{bmatrix}$$ This example doesn't make sense. You need to escape the backslashes in the end-of-row command \\, but you don't need to escape the backslashes in \begin and \end? The post clearly shows that backslashes in \left, \right, \sum, and \sqrt do not need to be escaped. What's different about \\?
  - dllu 4y ago
    No idea, but if you have only two backslashes instead of four, the matrix would appear as a single row, like [a bc d]. That said, \\begin renders the same as \begin.
    - thaumasiotes 4y ago
      Oh, this is an experimental result? You've found a bug in Github's parser. You should call it a "bug", not an "annoyance".
      - fn-mote 4y ago
        This is a pretty aggressive tone. I don't think it's warranted. As a data point: I have the same experience using MathJax in my own blog (Hugo, Goldmark markdown engine), so I'm assuming there's some structural reason for it, not blaming Github.
  - xigoi 4y ago
    Maybe in GitHub Markdown, backslashes have to be escaped only if they could be interpreted as an escape character?
- runarberg 4y ago
  In my opinion LaTeX is a poor fit for markdown, although it is the logical—and probably the only—choice. Markdown documents are supposed to be easy to read and quick to type. LaTeX is neither. When I include a matrix in my markdown document I want to type it something like: ## Example Matrix $$$ [a, b; c, d] $$$ Although I realize that we are probably stuck with LaTeX for the foreseeable future as the only way to type math in text files. Disclaimer, I am an author of an alternative math markup language specifically designed to be a good fit in Markdown.
  - Gimpei 4y ago
    I agree. I thought the whole point of markdown was to be simple and readable. At this point, why not just use full latex instead.
  - alanbernstein 4y ago
    I think you're right on all counts, especially on being stuck with LaTeX. What's your language? Any plans to build some sort of translator or other mechanism to allow high-quality rendering based on it?
    - runarberg 4y ago
      Thanks for asking... I mentioned it earlier in this thread, and didn’t want to spam it unprompted. But it is called Mathup (https://runarberg.github.io/mathup/ https://runarberg.github.io/mathup/) and I purposely just translated to MathML and with the intention to leave rendering to a different library (e.g. MathJax; or the browser if you’re only targeting Firefox or Safari)
  - rahimiali 4y ago
    the matrix example is a good example of latex being too verbose for its markdown host. \underbrace and \begin{cases} are two others ones that seems antithetical to markdown. and maybe the fact that \left[ and \left( are not the default versions of [ and ( respectively. i'd be interested in collecting more if you can think of them.
kaycebasques 4y ago
Big picture it's interesting how GitHub + Markdown is basically becoming a major content publishing product. Albeit for a technical niche market. Of course I'm not saying this is GitHub's main goal. More like a P1. Instant publishing, diagrams, and now math expressions.
- NmAmDa 4y ago
  Github becomes a favorite option for research and academic people to work and collaborate their projects their. That is a reasonable move from github to make it more suitable for them. I know my group and several others are relying more and more on github as git host with other products used for collaboration.
whatever1 4y ago
Finally! Gitlab had this feature for so long
romeovs 4y ago
Nice! A welcome addition! Too bad they're not using KaTeX [0] instead. It renders the maths server-side, so there's no runtime needed. An additional bonus is that the resulting math is copy-pasteable, which in the case of disply math might not be that useful (since most equations are to complex to be meaningfully copy-pasted with unicode), but it helps from inline math dissappearing when copy pasting texts. But, that being said, I'm sure they had their reasons to do so. For one, MathJax seems more well-known by quite a bit so maybe it's the safer option. 1: https://katex.org/ https://katex.org/
- powersnail 4y ago
  MathJax can do server side rendering too now!
- joppy 4y ago
  For pages with lots of mathematics markup, it is far better (in terms of download size) to send the latex markup and the katex library to the browser, and render it there. I tried rendering the mathematics server-side using katex on my own website a while ago, and the div soup generated by katex takes up loads of space. Original page (compressed): 10 kB Page with server-rendered Katex (compressed): 50 kB Katex.js (compressed): 80 kB So after two pages it’s a net win to not render the mathematics server-side.
  - dllu 4y ago
    For my blog (e.g. https://daniel.lawrence.lu/blog/y2021m09d08/ https://daniel.lawrence.lu/blog/y2021m09d08/ with tons of math), I render the math serverside using MathJax and serve them as SVG images (with alt text for the visually impaired). They get cached too which is nice especially since many symbols are duplicated. Seems fast enough for me.
    - lelandfe 4y ago
      You're being modest. This is easily the most performant option... although it means losing interactivity (right clicking equations on GitHub allows copy to clipboard, A11y features, etc). Running the JS client side, like GitHub, means blocking the thread. You're either going to be 1. delaying other JS from running, or 2. rendering late, shifting the layout – which is what GitHub has chosen: https://imgur.com/a/y47haf9 https://imgur.com/a/y47haf9 (Sending the rendered div's is a non-starter. Large document sizes delay domContentLoaded, slow down browsers, aren't shared cacheable resources, etc.) Your approach, then. On your page there are 178 SVGs. Total gzipped size is 490KB. SVGO[0] gets that down to 311KB – that's 1.74KB transferred per equation. These are non-blocking, immutable, cacheable assets. Brilliant. Upgrades: - Figure out viewbox and inline height/width values on the HTML so no layout jank (aka "Cumulative Layout Shift"/CLS) occurs. Unsure if this is possible for inline math. - Add `loading="lazy"` afterwards. Users that don't scroll the entire length of the page won't suffer unneeded downloads, and the inlined sizes will prevent late CLS for those that do. - Maybe re-add interactivity? Cheap option: just support copying alt-text in a context menu. [0] https://github.com/svg/svgo https://github.com/svg/svgo
diarrhea 4y ago
I wonder if, at all, other fonts will ever be used for MathJax max display? The 'default MathJax font' is also just the 'default LaTeX font' (CM?). There are countless other, high-quality math fonts, for example the TeX Gyre Math fonts. I'd like to see those one day, I prefer them. It would be not more out of place than the current version. There are font pairs, too, like TeX Gyre Pagella and its TeX Gyre Pagella Math accompanying font. So you have the same font for both, which is simply beautiful and even more readable I'd argue. I think most people have accepted that text and math fonts are always distinct, when in fact they needn't be.
- runarberg 4y ago
  I’m a big fan of Linux Libertine, and I was pleasantly surprised to learn that there is a fork(Libertinus; https://github.com/alerque/libertinus https://github.com/alerque/libertinus), which includes a math family (Libertinus Math). They work brilliantly together as well, and in my opinion, a little better fit for the web then TeX Gyre—which is optimized for the printed page. You can see an example on the doc for my project Mathup: https://runarberg.github.io/mathup/ https://runarberg.github.io/mathup/ (you might need firefox or safari to see the font though, as you need the native MathML to render the equations)
- cionx 4y ago
  MathJax 3 currently only supports the default font, as more general font support is still under development [1]. According to the relevant GitHub issue, font support is planned to be part of the next major release, which is supposed to arrive sometime this year [2]. This should then include Gyre Pagella out of the box (as was the case for MathJax 2), but also make it possible to use custom fonts (which apparently wasn’t possible with MathJax 2) [3]. [1]: http://docs.mathjax.org/en/latest/output/fonts.html http://docs.mathjax.org/en/latest/output/fonts.html [2]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-1125984700 https://github.com/mathjax/MathJax/issues/2503#issuecomment-... [3]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-921064185 https://github.com/mathjax/MathJax/issues/2503#issuecomment-...
JadeNB 4y ago
> **The Cauchy-Schwarz Inequality** > $$left( \sum_{k=1}^n a_k b_k \right)^2 \leq left( \sum_{k=1}^n a_k^2 \right) left( \sum_{k=1}^n b_k^2 \right)$$ I wonder why their syntax highlighting on this example highlights `left` but not `right`? (I can't seem to reproduce it here, since the HN parser tries to outsmart me.)
- yuchi 4y ago
  The reason is that their blog rendering auto-identifies that code block as SCSS and treats “left” as an attribute. Which is strange, since I cannot find something for “left” that is not defined for “right”. For example, I cannot find a “left” attribute here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
  - yuchi 4y ago
    Some more details. They are using Highlight.js, and `attribute` is what is applied to (S)CSS properties too. But both `left` and `right` are valid properties. What I think is that `\r` is treated as the special Carriage Return character and therefore doesn’t allow `right` to be identified.
ashton314 4y ago
Looks like it works with `.org` documents as well! I've been authoring my README files in org-mode for a while now (richer formatting options than Markdown) and GitHub does a great job rendering the org-mode.
- nvrspyx 4y ago
  I'll have to test AsciiDoc (my markup of choice) when I get a chance. Now, if only GitHub mobile would start rendering my AsciiDoc files, I could use it as my mobile knowledgebase/notes viewer instead of the website version.
bachmeier 4y ago
Math doesn't render inside a bullet list item. I don't know how to file an issue against Github itself, somewhat ironically.
- metadaemon 4y ago
  I feel like being in a bullet list item restricts a lot of the rendering you can do.
  - whatshisface 4y ago
    It doesn't in HTML/CSS.
- 100k 4y ago
  (I work at GitHub.) We've started using our Discussions product for feedback. You can post a discussion here: https://github.com/github/feedback/discussions/categories/general-feedback https://github.com/github/feedback/discussions/categories/ge...
  - xigoi 4y ago
    When we're at it, why isn't GitHub open source?
singularity2001 4y ago
Doesn't work on github's builtin wikis
- goerz 4y ago
  That’s very unfortunate. If anyone from GitHub is here: is that going to be rectified?
rudolfwinestock 4y ago
Looking at some of the comments in this thread, I wonder if Hacker News will ever render LaTeX.
mulmboy 4y ago
This is cute but it seems that expressions spanning multiple lines are not rendered OK: $$\|\vec{x} - \vec{p}_c\| = v(t_c-t_0)$$ -- NOT OK: $$ \|\vec{x} - \vec{p}_c\| = v(t_c-t_0) $$ This makes larger latex expressions pretty impractical e.g. https://github.com/jurasofish/multilateration/blob/master/readme.tex.md?plain=1#L57-L64 https://github.com/jurasofish/multilateration/blob/master/re...
deleted 4y ago
[deleted]
krastanov 4y ago
Funny thing is, this feature (with MathJax) used to be available in 2010ish, but got removed back then as they did not want to have "unvetted" large libraries as a dependency.
- da39a3ee 4y ago
  Right! And I've been wanting it ever since. This is big news!
MaxLeiter 4y ago
My one complaint about these new mark down features with github is the lock-in. I’m trying to build a gist compatible service and theres quite a bit to cover. MathJax is fine, but now I (and gitlab, bitbucket, etc) will need to support it
- c0balt 4y ago
  Fyi, GitLab has supported[0] this since quite a while[1]. [0]: https://gitlab.com/gitlab-org/gitlab-foss/-/blob/master/doc/user/markdown.md#math https://gitlab.com/gitlab-org/gitlab-foss/-/blob/master/doc/... [1]: https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/8003 https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/8...
  - cxcorp 4y ago
    I really like how GitLab has implemented this. Using code blocks but just with "math" as the language is so much clearer, and avoids having to do awkward dollar sign escaping.
atonalfreerider 4y ago
I'm having a Baader-Meinhof (frequency illusion) moment, because I was just Googling for equation syntax support in markdown for my Riemann Zeta Function visualization project this past week. Pluging project here if anyone is interested: https://github.com/atonalfreerider/riemann-zeta-visualization https://github.com/atonalfreerider/riemann-zeta-visualizatio...
thangalin 4y ago
KeenWrite, my desktop editor for Markdown and R Markdown documents, provides real-time rendering of TeX equations: https://github.com/DaveJarvis/keenwrite/blob/master/docs/screenshots.md#equations https://github.com/DaveJarvis/keenwrite/blob/master/docs/scr... The choice of using TeX over LaTeX is deliberate. Documents written using plain TeX can be rendered by either ConTeXt or LaTeX. I prefer ConTeXt because it makes separating content from presentation easier. One of the benefits of using Markdown, IMO, is to be agnostic as to how the documents are presented. Math could be rendered using ConTeXt, LaTeX, KaTeX, MathJax, JMathTeX, XeTeX, or any other compatible TeX typesetter. https://wiki.contextgarden.net/Installation https://wiki.contextgarden.net/Installation
RyEgswuCsn 4y ago
Wonderful news! Unfortunately they don't work on GitHub Pages yet. I still have to resort to GitHub Actions to invoke a container to render my RMarkdowns into a GitHub Pages branch --- wish one day I can retire that pipeline.
anderskaseorg 4y ago
I wonder how the grammar works and how this interacts with other Markdown syntax precedence-wise. The specification hasn’t been updated since 2019: https://github.github.com/gfm/ https://github.github.com/gfm/ This clue indicates that it might become really annoying to talk about actual dollar signs in some cases: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions#writing-dollar-signs-in-line-with-and-within-mathematical-expressions https://docs.github.com/en/get-started/writing-on-github/wor... “Outside a math expression, but on the same line, use span tags around the explicit $. To split <span>$</span>100 in half, we calculate $100/2$”
deleted 4y ago
[deleted]
dannyobrien 4y ago
I didn't know that you could also write diagrams, including maps and 3D models: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams https://docs.github.com/en/get-started/writing-on-github/wor...
Pxtl 4y ago
All these TeX-like math syntaxes seem to miss the point of markdown -- that it's as legible as possible in plain text form. I know they're very limited in how much math you can express in plain text, but using backslashes seems to be an admission of defeat. I'd expect a syntax more like OpenOffice math. https://wiki.openoffice.org/wiki/Documentation/OOoAuthors_User_Manual/Writer_Guide/Math_commands_-_Reference https://wiki.openoffice.org/wiki/Documentation/OOoAuthors_Us...
hooloovoo_zoo 4y ago
Is the renderer working for this page? Both 'renders' seem blurry on 2021 MBP in Chrome.
- jakear 4y ago
  They’re screenshots.
  - hooloovoo_zoo 4y ago
    But why can't they use their render feature for a doc that's literally written in Markdown?
joyhumin 4y ago
Waiting for this feature for too long! Really good!
chazeon 4y ago
Complex equations is still broken. Too sad. e.g., https://github.com/chazeon/notes/blob/master/docs/notes/ml-potential/deepmd-kit-embedding/index.md https://github.com/chazeon/notes/blob/master/docs/notes/ml-p...
- d4rkp4ttern 4y ago
  I wonder if aligned multi line equations would work (I mean eqnarray or aligned environments in latex)
  - chazeon 4y ago
    Kind of. See my other note here. The aligned environment work, but there should a curly braces around that are not shown, not sure the cause. https://github.com/chazeon/notes/blob/master/docs/notes/ml-potential/behler-parrinell-symmetry-function.md https://github.com/chazeon/notes/blob/master/docs/notes/ml-p...
    - cxcorp 4y ago
      I would guess that the markdown parser does some overly eager escaping before handing off the input to the latex renderer. If I change the "\left\{" into "\left\\{" and the "\," into "\\," it renders like with LaTeX.
- cxcorp 4y ago
  That first one doesn't compile in LaTeX (assuming \ce is from mhchem?). Perhaps the inline mode $'s shouldn't be in there? i.e. $$ \ce{ \underset{global coordinate}{(x,y,z)} ->[\mathcal{R}][rotation] \underset{local coordinate}{(x',y',z')} -> \underset{descriptor}{\{\mathcal{D}_{ij}\} } -> E_i } $$ There does appear to be a bug though where the LaTeX expressions don't render if they're in markdown lists or tables.
Coneylake 4y ago
Cool, it's 2022
alephnan 4y ago
Why don’t web browsers just add a tag for mathematical expressions ?
- lifthrasiir 4y ago
  Of course there it is [1], but Chrome doesn't support it and is essentially blocking its adoption. And it is not like MathML is too taxing to browsers; Firefox and Safari had a support for a long time and actually Chrome also once had a support before being dropped due to the instability! [2] The implementation is still underway but is not prioritized enough by Chrome developers. [1] https://www.w3.org/TR/MathML/ https://www.w3.org/TR/MathML/ [2] https://caniuse.com/mathml https://caniuse.com/mathml
informal007 4y ago
Good news!!!
kapv89 4y ago
This seems complementary to the lean theorem prover, being developed by Microsoft. It's package manager uses github as it's "repository". Having latex in github makes it easy to write mathematical theorems in github readme
oxff 4y ago
Seems like I can basically make GitHub repo my blogging platform and CMS now, cool!
d4rkp4ttern 4y ago
Somewhat tangential but I’ve been enjoying using HackMD for creating nice looking math notes that can be shared with selected folks. https://hackmd.io/ https://hackmd.io/

524 points by robin_reala 4y ago

physicsguy 4y ago

Finally!

ofou 4y ago

Finally!

orange3xchicken 4y ago
I know, I've been waiting so long for this! I will not miss having to render and reference pngs of equations / api requests.
- jeremymcanally 4y ago
  You think you waited a long time? I wrote a patch to add this to GitHub when I worked there in 2011-12! :) It was rejected at the time by some folks for various “product” reasons, but I’m glad to see it finally become a thing.

dllu 4y ago

Finally a long-awaited feature. Works nicely in dark mode too. However, it simply uses MathJax. Also there are some minor annoyances. For example you need to escape the backslashes, so it takes 4 backslashes to make a newline in your matrix. $$\begin{bmatrix} a & b \\\\ c & d\end{bmatrix}$$ I found that the inline math doesn't quite match the font size of the surrounding text too (it's smaller).

thaumasiotes 4y ago
> For example you need to escape the backslashes, so it takes 4 backslashes to make a newline in your matrix. > $$\begin{bmatrix} a & b \\\\ c & d\end{bmatrix}$$ This example doesn't make sense. You need to escape the backslashes in the end-of-row command \\, but you don't need to escape the backslashes in \begin and \end? The post clearly shows that backslashes in \left, \right, \sum, and \sqrt do not need to be escaped. What's different about \\?
- dllu 4y ago
  No idea, but if you have only two backslashes instead of four, the matrix would appear as a single row, like [a bc d]. That said, \\begin renders the same as \begin.
  - thaumasiotes 4y ago
    Oh, this is an experimental result? You've found a bug in Github's parser. You should call it a "bug", not an "annoyance".
    - fn-mote 4y ago
      This is a pretty aggressive tone. I don't think it's warranted. As a data point: I have the same experience using MathJax in my own blog (Hugo, Goldmark markdown engine), so I'm assuming there's some structural reason for it, not blaming Github.
- xigoi 4y ago
  Maybe in GitHub Markdown, backslashes have to be escaped only if they could be interpreted as an escape character?
runarberg 4y ago
In my opinion LaTeX is a poor fit for markdown, although it is the logical—and probably the only—choice. Markdown documents are supposed to be easy to read and quick to type. LaTeX is neither. When I include a matrix in my markdown document I want to type it something like: ## Example Matrix $$$ [a, b; c, d] $$$ Although I realize that we are probably stuck with LaTeX for the foreseeable future as the only way to type math in text files. Disclaimer, I am an author of an alternative math markup language specifically designed to be a good fit in Markdown.
- Gimpei 4y ago
  I agree. I thought the whole point of markdown was to be simple and readable. At this point, why not just use full latex instead.
- alanbernstein 4y ago
  I think you're right on all counts, especially on being stuck with LaTeX. What's your language? Any plans to build some sort of translator or other mechanism to allow high-quality rendering based on it?
  - runarberg 4y ago
    Thanks for asking... I mentioned it earlier in this thread, and didn’t want to spam it unprompted. But it is called Mathup (https://runarberg.github.io/mathup/ https://runarberg.github.io/mathup/) and I purposely just translated to MathML and with the intention to leave rendering to a different library (e.g. MathJax; or the browser if you’re only targeting Firefox or Safari)
- rahimiali 4y ago
  the matrix example is a good example of latex being too verbose for its markdown host. \underbrace and \begin{cases} are two others ones that seems antithetical to markdown. and maybe the fact that \left[ and \left( are not the default versions of [ and ( respectively. i'd be interested in collecting more if you can think of them.

kaycebasques 4y ago

Big picture it's interesting how GitHub + Markdown is basically becoming a major content publishing product. Albeit for a technical niche market. Of course I'm not saying this is GitHub's main goal. More like a P1. Instant publishing, diagrams, and now math expressions.

NmAmDa 4y ago
Github becomes a favorite option for research and academic people to work and collaborate their projects their. That is a reasonable move from github to make it more suitable for them. I know my group and several others are relying more and more on github as git host with other products used for collaboration.

whatever1 4y ago

Finally! Gitlab had this feature for so long

romeovs 4y ago

Nice! A welcome addition! Too bad they're not using KaTeX [0] instead. It renders the maths server-side, so there's no runtime needed. An additional bonus is that the resulting math is copy-pasteable, which in the case of disply math might not be that useful (since most equations are to complex to be meaningfully copy-pasted with unicode), but it helps from inline math dissappearing when copy pasting texts. But, that being said, I'm sure they had their reasons to do so. For one, MathJax seems more well-known by quite a bit so maybe it's the safer option. 1: https://katex.org/ https://katex.org/

powersnail 4y ago
MathJax can do server side rendering too now!
joppy 4y ago
For pages with lots of mathematics markup, it is far better (in terms of download size) to send the latex markup and the katex library to the browser, and render it there. I tried rendering the mathematics server-side using katex on my own website a while ago, and the div soup generated by katex takes up loads of space. Original page (compressed): 10 kB Page with server-rendered Katex (compressed): 50 kB Katex.js (compressed): 80 kB So after two pages it’s a net win to not render the mathematics server-side.
- dllu 4y ago
  For my blog (e.g. https://daniel.lawrence.lu/blog/y2021m09d08/ https://daniel.lawrence.lu/blog/y2021m09d08/ with tons of math), I render the math serverside using MathJax and serve them as SVG images (with alt text for the visually impaired). They get cached too which is nice especially since many symbols are duplicated. Seems fast enough for me.
  - lelandfe 4y ago
    You're being modest. This is easily the most performant option... although it means losing interactivity (right clicking equations on GitHub allows copy to clipboard, A11y features, etc). Running the JS client side, like GitHub, means blocking the thread. You're either going to be 1. delaying other JS from running, or 2. rendering late, shifting the layout – which is what GitHub has chosen: https://imgur.com/a/y47haf9 https://imgur.com/a/y47haf9 (Sending the rendered div's is a non-starter. Large document sizes delay domContentLoaded, slow down browsers, aren't shared cacheable resources, etc.) Your approach, then. On your page there are 178 SVGs. Total gzipped size is 490KB. SVGO[0] gets that down to 311KB – that's 1.74KB transferred per equation. These are non-blocking, immutable, cacheable assets. Brilliant. Upgrades: - Figure out viewbox and inline height/width values on the HTML so no layout jank (aka "Cumulative Layout Shift"/CLS) occurs. Unsure if this is possible for inline math. - Add `loading="lazy"` afterwards. Users that don't scroll the entire length of the page won't suffer unneeded downloads, and the inlined sizes will prevent late CLS for those that do. - Maybe re-add interactivity? Cheap option: just support copying alt-text in a context menu. [0] https://github.com/svg/svgo https://github.com/svg/svgo

diarrhea 4y ago

I wonder if, at all, other fonts will ever be used for MathJax max display? The 'default MathJax font' is also just the 'default LaTeX font' (CM?). There are countless other, high-quality math fonts, for example the TeX Gyre Math fonts. I'd like to see those one day, I prefer them. It would be not more out of place than the current version. There are font pairs, too, like TeX Gyre Pagella and its TeX Gyre Pagella Math accompanying font. So you have the same font for both, which is simply beautiful and even more readable I'd argue. I think most people have accepted that text and math fonts are always distinct, when in fact they needn't be.

runarberg 4y ago
I’m a big fan of Linux Libertine, and I was pleasantly surprised to learn that there is a fork(Libertinus; https://github.com/alerque/libertinus https://github.com/alerque/libertinus), which includes a math family (Libertinus Math). They work brilliantly together as well, and in my opinion, a little better fit for the web then TeX Gyre—which is optimized for the printed page. You can see an example on the doc for my project Mathup: https://runarberg.github.io/mathup/ https://runarberg.github.io/mathup/ (you might need firefox or safari to see the font though, as you need the native MathML to render the equations)
cionx 4y ago
MathJax 3 currently only supports the default font, as more general font support is still under development [1]. According to the relevant GitHub issue, font support is planned to be part of the next major release, which is supposed to arrive sometime this year [2]. This should then include Gyre Pagella out of the box (as was the case for MathJax 2), but also make it possible to use custom fonts (which apparently wasn’t possible with MathJax 2) [3]. [1]: http://docs.mathjax.org/en/latest/output/fonts.html http://docs.mathjax.org/en/latest/output/fonts.html [2]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-1125984700 https://github.com/mathjax/MathJax/issues/2503#issuecomment-... [3]: https://github.com/mathjax/MathJax/issues/2503#issuecomment-921064185 https://github.com/mathjax/MathJax/issues/2503#issuecomment-...

JadeNB 4y ago

> **The Cauchy-Schwarz Inequality** > $$left( \sum_{k=1}^n a_k b_k \right)^2 \leq left( \sum_{k=1}^n a_k^2 \right) left( \sum_{k=1}^n b_k^2 \right)$$ I wonder why their syntax highlighting on this example highlights `left` but not `right`? (I can't seem to reproduce it here, since the HN parser tries to outsmart me.)

yuchi 4y ago
The reason is that their blog rendering auto-identifies that code block as SCSS and treats “left” as an attribute. Which is strange, since I cannot find something for “left” that is not defined for “right”. For example, I cannot find a “left” attribute here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
- yuchi 4y ago
  Some more details. They are using Highlight.js, and `attribute` is what is applied to (S)CSS properties too. But both `left` and `right` are valid properties. What I think is that `\r` is treated as the special Carriage Return character and therefore doesn’t allow `right` to be identified.

ashton314 4y ago

Looks like it works with `.org` documents as well! I've been authoring my README files in org-mode for a while now (richer formatting options than Markdown) and GitHub does a great job rendering the org-mode.

nvrspyx 4y ago
I'll have to test AsciiDoc (my markup of choice) when I get a chance. Now, if only GitHub mobile would start rendering my AsciiDoc files, I could use it as my mobile knowledgebase/notes viewer instead of the website version.

bachmeier 4y ago

Math doesn't render inside a bullet list item. I don't know how to file an issue against Github itself, somewhat ironically.

metadaemon 4y ago
I feel like being in a bullet list item restricts a lot of the rendering you can do.
- whatshisface 4y ago
  It doesn't in HTML/CSS.
100k 4y ago
(I work at GitHub.) We've started using our Discussions product for feedback. You can post a discussion here: https://github.com/github/feedback/discussions/categories/general-feedback https://github.com/github/feedback/discussions/categories/ge...
- xigoi 4y ago
  When we're at it, why isn't GitHub open source?

singularity2001 4y ago

Doesn't work on github's builtin wikis

goerz 4y ago
That’s very unfortunate. If anyone from GitHub is here: is that going to be rectified?

rudolfwinestock 4y ago

Looking at some of the comments in this thread, I wonder if Hacker News will ever render LaTeX.

mulmboy 4y ago

This is cute but it seems that expressions spanning multiple lines are not rendered OK: $$\|\vec{x} - \vec{p}_c\| = v(t_c-t_0)$$ -- NOT OK: $$ \|\vec{x} - \vec{p}_c\| = v(t_c-t_0) $$ This makes larger latex expressions pretty impractical e.g. https://github.com/jurasofish/multilateration/blob/master/readme.tex.md?plain=1#L57-L64 https://github.com/jurasofish/multilateration/blob/master/re...

deleted 4y ago

[deleted]

krastanov 4y ago

Funny thing is, this feature (with MathJax) used to be available in 2010ish, but got removed back then as they did not want to have "unvetted" large libraries as a dependency.

da39a3ee 4y ago
Right! And I've been wanting it ever since. This is big news!

MaxLeiter 4y ago

My one complaint about these new mark down features with github is the lock-in. I’m trying to build a gist compatible service and theres quite a bit to cover. MathJax is fine, but now I (and gitlab, bitbucket, etc) will need to support it

c0balt 4y ago
Fyi, GitLab has supported[0] this since quite a while[1]. [0]: https://gitlab.com/gitlab-org/gitlab-foss/-/blob/master/doc/user/markdown.md#math https://gitlab.com/gitlab-org/gitlab-foss/-/blob/master/doc/... [1]: https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/8003 https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/8...
- cxcorp 4y ago
  I really like how GitLab has implemented this. Using code blocks but just with "math" as the language is so much clearer, and avoids having to do awkward dollar sign escaping.

atonalfreerider 4y ago

I'm having a Baader-Meinhof (frequency illusion) moment, because I was just Googling for equation syntax support in markdown for my Riemann Zeta Function visualization project this past week. Pluging project here if anyone is interested: https://github.com/atonalfreerider/riemann-zeta-visualization https://github.com/atonalfreerider/riemann-zeta-visualizatio...

thangalin 4y ago

KeenWrite, my desktop editor for Markdown and R Markdown documents, provides real-time rendering of TeX equations: https://github.com/DaveJarvis/keenwrite/blob/master/docs/screenshots.md#equations https://github.com/DaveJarvis/keenwrite/blob/master/docs/scr... The choice of using TeX over LaTeX is deliberate. Documents written using plain TeX can be rendered by either ConTeXt or LaTeX. I prefer ConTeXt because it makes separating content from presentation easier. One of the benefits of using Markdown, IMO, is to be agnostic as to how the documents are presented. Math could be rendered using ConTeXt, LaTeX, KaTeX, MathJax, JMathTeX, XeTeX, or any other compatible TeX typesetter. https://wiki.contextgarden.net/Installation https://wiki.contextgarden.net/Installation

RyEgswuCsn 4y ago

Wonderful news! Unfortunately they don't work on GitHub Pages yet. I still have to resort to GitHub Actions to invoke a container to render my RMarkdowns into a GitHub Pages branch --- wish one day I can retire that pipeline.

anderskaseorg 4y ago

I wonder how the grammar works and how this interacts with other Markdown syntax precedence-wise. The specification hasn’t been updated since 2019: https://github.github.com/gfm/ https://github.github.com/gfm/ This clue indicates that it might become really annoying to talk about actual dollar signs in some cases: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions#writing-dollar-signs-in-line-with-and-within-mathematical-expressions https://docs.github.com/en/get-started/writing-on-github/wor... “Outside a math expression, but on the same line, use span tags around the explicit $. To split <span>$</span>100 in half, we calculate $100/2$”

deleted 4y ago

[deleted]

dannyobrien 4y ago

I didn't know that you could also write diagrams, including maps and 3D models: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams https://docs.github.com/en/get-started/writing-on-github/wor...

Pxtl 4y ago

All these TeX-like math syntaxes seem to miss the point of markdown -- that it's as legible as possible in plain text form. I know they're very limited in how much math you can express in plain text, but using backslashes seems to be an admission of defeat. I'd expect a syntax more like OpenOffice math. https://wiki.openoffice.org/wiki/Documentation/OOoAuthors_User_Manual/Writer_Guide/Math_commands_-_Reference https://wiki.openoffice.org/wiki/Documentation/OOoAuthors_Us...

hooloovoo_zoo 4y ago

Is the renderer working for this page? Both 'renders' seem blurry on 2021 MBP in Chrome.

jakear 4y ago
They’re screenshots.
- hooloovoo_zoo 4y ago
  But why can't they use their render feature for a doc that's literally written in Markdown?

joyhumin 4y ago

Waiting for this feature for too long! Really good!

chazeon 4y ago

Complex equations is still broken. Too sad. e.g., https://github.com/chazeon/notes/blob/master/docs/notes/ml-potential/deepmd-kit-embedding/index.md https://github.com/chazeon/notes/blob/master/docs/notes/ml-p...

d4rkp4ttern 4y ago
I wonder if aligned multi line equations would work (I mean eqnarray or aligned environments in latex)
- chazeon 4y ago
  Kind of. See my other note here. The aligned environment work, but there should a curly braces around that are not shown, not sure the cause. https://github.com/chazeon/notes/blob/master/docs/notes/ml-potential/behler-parrinell-symmetry-function.md https://github.com/chazeon/notes/blob/master/docs/notes/ml-p...
  - cxcorp 4y ago
    I would guess that the markdown parser does some overly eager escaping before handing off the input to the latex renderer. If I change the "\left\{" into "\left\\{" and the "\," into "\\," it renders like with LaTeX.
cxcorp 4y ago
That first one doesn't compile in LaTeX (assuming \ce is from mhchem?). Perhaps the inline mode $'s shouldn't be in there? i.e. $$ \ce{ \underset{global coordinate}{(x,y,z)} ->[\mathcal{R}][rotation] \underset{local coordinate}{(x',y',z')} -> \underset{descriptor}{\{\mathcal{D}_{ij}\} } -> E_i } $$ There does appear to be a bug though where the LaTeX expressions don't render if they're in markdown lists or tables.

Coneylake 4y ago

Cool, it's 2022

alephnan 4y ago

Why don’t web browsers just add a tag for mathematical expressions ?

lifthrasiir 4y ago
Of course there it is [1], but Chrome doesn't support it and is essentially blocking its adoption. And it is not like MathML is too taxing to browsers; Firefox and Safari had a support for a long time and actually Chrome also once had a support before being dropped due to the instability! [2] The implementation is still underway but is not prioritized enough by Chrome developers. [1] https://www.w3.org/TR/MathML/ https://www.w3.org/TR/MathML/ [2] https://caniuse.com/mathml https://caniuse.com/mathml

informal007 4y ago

Good news!!!

kapv89 4y ago

This seems complementary to the lean theorem prover, being developed by Microsoft. It's package manager uses github as it's "repository". Having latex in github makes it easy to write mathematical theorems in github readme

oxff 4y ago

Seems like I can basically make GitHub repo my blogging platform and CMS now, cool!

d4rkp4ttern 4y ago

Somewhat tangential but I’ve been enjoying using HackMD for creating nice looking math notes that can be shared with selected folks. https://hackmd.io/ https://hackmd.io/