Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display Git diff on client side in javascript as html [closed]

So, in short, I'm basically looking for some info on:

  1. a way to convert Git's diff format (that it gives you with the github api) into some kind of html format, like on the actual github website. If there's nothing like that,
  2. I would like to have some information on the format of git's diff file, so I can write my own.
like image 234
Alexis Dumas Avatar asked Sep 28 '22 22:09

Alexis Dumas


1 Answers

Update 2017 (2 years later)

Jaybeecave mentions in the comments the tool diff2html.xyz, a diff parser and pretty html generator.


The git diff format is inspired by the diff -p unix command.
(with -p being for --show-c-function: Show which C function each change is in.)

As I explain in "Where does the excerpt in the git diff hunk header come from?", that feature ("Show which C function") has evolved to take into account other language.

This is similar to what you see in the patch field of the JSON answer when you compare two commits with the GitHub API.
That feature was introduced in December 2012

Simply use the same resource URL and send either application/vnd.github.diff or application/vnd.github.patch in the Accept header:

curl -H "Accept: application/vnd.github.diff" https://api.github.com/repos/pengwynn/dotfiles/commits/aee60a4cd56fb4c6a50e60f17096fc40c0d4d72c

Result:

diff --git a/tmux/tmux.conf.symlink b/tmux/tmux.conf.symlink
index 1f599cb..abaf625 100755
--- a/tmux/tmux.conf.symlink
+++ b/tmux/tmux.conf.symlink
@@ -111,6 +111,7 @@ set-option -g base-index 1
 ## enable mouse
 set-option -g mouse-select-pane on
 set-option -g mouse-select-window on
+set-option -g mouse-resize-pane on
 set-window-option -g mode-keys vi
 set-window-option -g mode-mouse on
 # set-window-option -g monitor-activity off

The format follows the classic diff unified format (also detailed here).
You can see an example in cubicdaiya/node-dtl (an dtl(diff template library) binding for node.js)

like image 181
VonC Avatar answered Oct 02 '22 14:10

VonC