Coloured Git diff to HTML

HtmlGitColorsDiffTerminal

Html Problem Overview


I enjoy using git diff --color-words to clearly see the words that have changed in a file:

Screenshot

However I want to share that diff with someone without git or a colour terminal for that matter. So does anyone know of a tool or trick that can convert colour escaped terminal output into HTML?

Html Solutions


Solution 1 - Html

wget "http://www.pixelbeat.org/scripts/ansi2html.sh" -O /tmp/ansi2html.sh
chmod +x /tmp/ansi2html.sh
git diff --color-words --no-index orig.txt edited.txt | \
/tmp/ansi2html.sh > 2beshared.html

What I really needed was an ANSI to HTML converter. And I found a very decent one on <http://www.pixelbeat.org/>;.

NOTE: You might not see any coloration unless you include --color or --color-words, probably because piping causes git diff to exclude colors.

NOTE 2: You may need to install gnu sed and awk, especially if you're on a Mac. Do so with brew install gnu-sed gawk. You may need to add them to your path manually, too, e.g. with ln -s /usr/local/Cellar/gnu-sed/4.2.2/bin/gsed /usr/local/bin/.

Solution 2 - Html

download diff2html, extract it and convert diff to html with this command:

$ diff2html file1.txt file2.txt > diff-demo1.htm

There is more ... take a look at this question.

Or after gitting:

git diff --color-words --no-index orig.txt /tmp/edited.txt > myfile

download both ansifilter from this location. and use this command to convert myfile to html format

ansifilter -i myfile -H -o myfile2.html

so ... this is exactly what you want ;)

Solution 3 - Html

If you want to see clean diffs with line similarity matching, better word comparison, syntax highlight and more check out diff2html which is very customizable git diff to HTML presenter.

To use it on the command line you can check diff2html-cli which is a simple CLI written in Node.js.

So you can share your diffs with colleagues it integrates with diffy.org.

Check out a diff sample here.

Solution 4 - Html

Don't know any tool to do exactly what you want. But here's a piece of code I often use to output html formatted colored diff: simplediff

It's available in PHP and Python. The output tags the differences using <del> and <ins> tags so you can easily color them using CSS.

Solution 5 - Html

I just found aha in debian repositories; it's trivial:

git diff --color | aha > white.html          # white background
git diff --color | aha --black > black.html  # black background
git diff --color | aha --pink > pink.html    # pink background

Its tiny download size (<20KB) got me curious, so I peeked at its source: it is a self-contained C file with only 4 includes: errno.h, stdlib.h, stdio.h and string.h, and depends on only libc. Beauty!

Solution 6 - Html

You may want to checkout the github project rmed, which provides a command line tool, that generates static shareable html diffs using vimdiff.

Solution 7 - Html

I have created a perl script to generate html table for the git diff. To use this script first you have to collect the diff by using git diff sha1s... > diff.file, then run diff2html.pl diff.file. Visit:

http://kernel-demystified.com/forum/index.php/topic,23.msg28.html#new

Solution 8 - Html

when I use git bash, if you use git show you only need to copy and paste what is shown in the console and it copies the colours correctly.

Solution 9 - Html

I know this question is very old. However, if you're using PHP I've just shared a simple renderer that adds some style to the native git diff console output: https://github.com/nrctkno/git-diff-renderer .

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionhendryView Question on Stackoverflow
Solution 1 - HtmlhendryView Answer on Stackoverflow
Solution 2 - HtmlMichel Gokan KhanView Answer on Stackoverflow
Solution 3 - HtmlrtfpessoaView Answer on Stackoverflow
Solution 4 - HtmlslebetmanView Answer on Stackoverflow
Solution 5 - HtmlMotiejus JakštysView Answer on Stackoverflow
Solution 6 - HtmlroubleView Answer on Stackoverflow
Solution 7 - HtmlSamir DasView Answer on Stackoverflow
Solution 8 - HtmlPablo Daniel Estigarribia DavyView Answer on Stackoverflow
Solution 9 - HtmlNicolas CastroView Answer on Stackoverflow