Coloured Git Diff to HTML

Coloured Git diff to 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/.

How can I convert the output of `git diff --color-words` to HTML?

This question asks about converting ANSI escape sequences into HTML color directives, and the accepted answer is a link to the Perl module HTML::FromANSI, in CPAN.

How to output git diff result side by side with code line numbers to embed in webpage?

Use the following process:

Wrap the openTag in a table column:
```
<td>
```
Replace nbsp with an end tag for the column:
```
</td>
```
Put the result of the loop in a table
```
<table><tr>%s</tr></table>
```
Wrap each line in an ol tag
Each line number would be a li tag

References

Generate pretty diff html in Python
Character Entity Reference Chart

Git: post-receive email hook to show an html formatted color diff?

You can format your code using a syntax highlighter like Pygments. Using their commandline tool it should be easy to pipe your output into an html doc which can be embedded in the body of an email. I would figure you could do something like this but replace the command with your custom Pygments command.

How do I prettily print out a git-diff output?

Use aha. You can install it in ubuntu with sudo apt-get install aha. Also see https://github.com/theZiz/aha.

$ git diff --color-words | aha > index.html
$ firefox index.html

Firefox should then be able to print it in color. Check out aha --help for some other cool options.

How to improve git's diff highlighting?

You could use the --word-diff[=<mode>] option to make it easier to see which words have changed within a line. This is described in the man page as

Show a word diff, using the <mode> to delimit changed words. By default, words are delimited by whitespace; see --word-diff-regex below.
The <mode> defaults to plain, and must be one of:

color – Highlight changed words using only colors. Implies --color.

plain – Show words as [-removed-] and {+added+}. Makes no attempts to escape the delimiters if they appear in the input, so the output may be ambiguous.

porcelain – Use a special line-based format intended for script consumption. Added/removed/unchanged runs are printed in the usual unified diff format, starting with a +/-/` ` character at the beginning of the line and extending to the end of the line. Newlines in the input are represented by a tilde ~ on a line of its own.

none – Disable word diff again.

Note that despite the name of the first mode, color is used to highlight the changed parts in all modes if enabled.

Coloring white space in git-diff's output

With with Git 2.11 (Q4 2016) and after, you can do:

git config diff.wsErrorHighlight all

See doc on git diff and on git config.

For versions older than that, you can set the color.diff.whitespace config setting, e.g. with:

git config color.diff.whitespace "red reverse"

(I'm assuming that you already have color.diff or color.ui set to auto since you say that you see coloured patches from git diff anyway.)

If you want to fine tune the type of whitespace errors that are highlighted in red, you can then change core.whitespace, but blank-at-eol is enabled by default so you probably won't need to change that for the example you mention.

A possible source of confusion is that in the output of git diff, whitespace errors are only highlighted in the lines that are introduced, not those that are removed. (Update: as Paul Whittaker points out in his answer, which you should up-vote :), you can see these by reversing the sense of the diff with git diff -R.)

You can find more documentation on these config options in the git config man page

If you don't want to use the -R kludge you can use the WhiteSpace Error Highlight option from the diff man page.

--ws-error-highlight=
Highlight whitespace errors on lines specified by in the color specified by color.diff.whitespace.
is a comma
separated list of old, new, context. When this option is not given,
only whitespace errors in new lines are highlighted. E.g.
--ws-error-highlight=new,old highlights whitespace errors on both deleted and added lines. all can be used as a short-hand for
old,new,context.

git diff --ws-error-highlight=new,old <file>

git diff --ws-error-highlight=all <file>

With versions older than 2.11, there’s no way to permanently turn this on and store this in config aside from using an alias:

git config alias.df 'diff --ws-error-highlight=all'

Now you can use:

git df <file>

To see the changes in red.

Coloured Git Diff to HTML