What library does GitHub use to render diffs between Markdown documents?

Viewed 721

GitHub supports visualizing diffs between two versions of a Markdown:

enter image description here

What library are they using? Is there any open-source equivalent to this library?

2 Answers

You can achieve the same thing with git diff alone:

git diff --word-diff
git diff --word-diff-regex

and configuring it further to get it colored, checking diff between different branches/commits as well. Save the diff as Markdown, render it to HTML, then simply parse the output from HTML and add coloring via CSS.

If your Markdown renderer is causing troubles (e.g. trying to parse or failing to parse git symbols), simply add backticks (`) around the text, let it render as <code> or <pre> tags, then parse the HTML and replace with tags of your choosing with appropriate CSS to color it.

Related article (source of the image): https://blog.ipspace.net/2020/04/git-tip-word-diff.html

Regarding whether they have the lib somewhere openly I couldn't find any mention about it so it's probably directly embedded in some of their GUI/backend code (proprietary) or simply not public.

GitHub documents how they process markup (from Markdown, textile, rst, asciidoc, etc.) on their site at github/markup. While that only involves rendering the source text to HTML (not diffing), it tells us that they use github/linguist for syntax highlighting. As it turns out, diff is a language which can be highlighted.

While this doesn't tell us how GitHub generates its diffs, it does suggest how they apply highlighting of diffs on their site. As another answer already demonstrates how to generate the style of diff (word-diff) that GitHub uses, you should be able to replicate the same behaviors by passing the text of a word-diff through linguist.

Related