Coloured Git diff to HTML

Question

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?

score 96 · Accepted Answer · edited Oct 02 '15 at 20:40

96

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/.

edited Oct 02 '15 at 20:40

Pat

16,515
15
95
114

answered Jan 08 '10 at 23:15

hendry

9,725
18
81
139

10

Glad you like it :) You can see some example usage here: http://www.pixelbeat.org/docs/terminal_colours/ – pixelbeat Jan 09 '10 at 00:45
Two other duplicate questions, answered by "use the HTML::FromANSI Perl module on CPAN": http://stackoverflow.com/questions/1425738/how-can-i-convert-the-output-of-git-diff-color-words-to-html , http://stackoverflow.com/questions/245121/a-library-to-convert-ansi-escapes-terminal-formatting-color-codes-to-html – Adam Monsen Aug 26 '10 at 07:15
1

I have been looking, for days, for something like this to generate automatic LaTex diffs. This is my best find of the week. Thanks! – Wynand Winterbach Feb 25 '11 at 10:12
1

Does this still work? I'm getting some sed errors: sed: 2: " s#\x1b[^\x1b]*\x1b\\## ...": bad flag in substitute command: '#' sed: 15: " # escape HTML s#\\&a ...": bad flag in substitute command: '#' sed: 43: " :ansi_to_span # replac ...": unexpected EOF (pending }'s) – annie Aug 03 '13 at 00:21
the only problem is even though you have created an HTML diff file you cannot send it in email with colour formatting using python – Ciasto piekarz Jan 25 '14 at 09:38
1

I've found that using this script I've been getting the best layout using: `git diff f0f7dfb4 43f7949 --color | ./ansi2html.sh > changes.html` – alexleonard Feb 13 '14 at 08:11
Doesn't work with BSD sed (Mac OS X), I installed GNU sed http://apple.stackexchange.com/questions/69223/how-to-replace-mac-os-x-utilities-with-gnu-core-utilities . Works great ! – Utopik May 29 '14 at 11:04
1

Latex users sometimes have very long lines. If you add | fold -w 80 -s | as part of your pipe it will wordwrap the colored lines. – Peter Rigby Sep 21 '17 at 17:55
@hendry is there any alternative to this script on windows ? – Saurabh Bhoomkar Dec 12 '17 at 20:00
Just install cygwin on Windows perhaps? – hendry Dec 13 '17 at 01:20
I can confirm this works using cygwin (well at least on my setup, but a quick look at the script I do not see it using any non-standard commands). – AJ Smith 'Smugger' Feb 23 '20 at 04:27
For dark background use : `/tmp/ansi2html.sh --bg=dark` – BlueNC Apr 25 '21 at 23:47

score 12 · Answer 2 · edited May 23 '17 at 12:18

12

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 ;)

edited May 23 '17 at 12:18

Community

1
1

answered Jan 06 '10 at 15:08

Michel Gokan Khan

2,525
3
30
54

3

http://www.flickr.com/photos/hendry/4250699527/ I am not accepting `diff2html` because it looks AWFUL. – hendry Jan 06 '10 at 16:09
That looks awful too. I want it to look like my terminal screenshot above. – hendry Jan 06 '10 at 17:57
I still don't like it. I am convince I need to write some sort of ANSI escape to HTML convertor. – hendry Jan 08 '10 at 21:05
Thanks very much for trying to help Michel. You were pipped to the post. :) – hendry Jan 13 '10 at 23:05
1

diff2html is a great script, that can be easily modified to produced any results. – Three Diag Jun 10 '16 at 00:32

score 10 · Answer 3 · answered May 16 '21 at 19:29

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!

rtfpessoa · Answer 4 · 2020-08-18T12:26:58.340

4

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.

edited Aug 18 '20 at 12:26

answered Jan 10 '16 at 19:26

rtfpessoa

521
2
16

Thanks, it is a great tool. It would be nice if it would be added support for diffs made under Windows (after the --- and +++ lines the paths are quoted). – Zsolti Jan 28 '16 at 18:20
It is possible to install diff2html in any other way than via `npm`? – dokaspar Jun 10 '20 at 06:19
@dokaspar not really. You can run the js directly but in the end npm is the only package manager supported. – rtfpessoa Aug 18 '20 at 12:27

score 3 · Answer 5 · answered Jan 06 '10 at 13:22

3

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.

answered Jan 06 '10 at 13:22

slebetman

109,858
19
140
171

It's a shame there isn't a simple wrapper around simple diff to make coloured diffs (either html or in terminal). – Andy Hayden Apr 21 '14 at 02:43

score 2 · Answer 6 · answered May 18 '16 at 14:11

2

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

answered May 18 '16 at 14:11

rouble

16,364
16
107
102

score 1 · Answer 7 · answered May 26 '16 at 14:52

1

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.

answered May 26 '16 at 14:52

Pablo Daniel Estigarribia Davy

434
3
6

score 1 · Answer 8 · edited Feb 06 '12 at 04:57

1

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

edited Feb 06 '12 at 04:57

Peter O.

32,158
14
82
96

answered Feb 06 '12 at 04:19

Samir Das

111
3

1

`Unable to determine IP address from host name kernel-demystified.com` – ArcherGodson Feb 03 '16 at 11:40

score 0 · Answer 9 · answered Jan 23 '21 at 02:25

0

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 .

answered Jan 23 '21 at 02:25

Nicolas Castro

1,436
1
14
15

Coloured Git diff to HTML

9 Answers9

Linked