banga / git-split-diffs

Syntax highlighted side-by-side diffs in your terminal

git-split-diffs

GitHub style split (side by side) diffs with syntax highlighting in your terminal.

Demo 1 | Demo 2

Usage

This currently requires node version 14 or newer to run.

Install globally

npm install -g git-split-diffs

git config --global core.pager "git-split-diffs --color | less -RFX"

Install locally

npm install git-split-diffs

git config core.pager "npx git-split-diffs --color | less -RFX"

Use manually

git diff | git-split-diffs --color | less -RFX

Customization

Line wrapping

By default, lines are wrapped to fit in the screen. If you prefer to truncate them, update the wrap-lines setting:

git config split-diffs.wrap-lines false

Inline changes

By default, salient changes within lines are also highlighted:

You can disable this with the highlight-line-changes setting:

git config split-diffs.highlight-line-changes false

Enable scrolling in the terminal

git config --global core.pager "git-split-diffs --color | less -+LFX"

(note the difference from the main configuration with the added + to the less command)

Syntax highlighting

Syntax highlighting is supported via shiki, which uses the same grammars and themes as vscode. Each theme specifies a default syntax highlighting theme to use, which can be overridden by:

git config split-diffs.syntax-highlighting-theme <name>

The supported syntax highlighting themes are listed at https://github.com/shikijs/shiki/blob/v0.9.3/docs/themes.md

You can disable syntax highlighting by setting the name to empty:

git config split-diffs.syntax-highlighting-theme ''

Narrow terminals

Split diffs can be hard to read on narrow terminals, so we revert to unified diffs if we cannot fit two lines of min-line-width on screen. This value is configurable:

git config split-diffs.min-line-width 40

This defaults to 80, so screens below 160 characters will display unified diffs. Set it to 0 to always show split diffs.

Themes

You can pick between several themes:

Arctic

Based on https://www.nordtheme.com/

git config split-diffs.theme-name arctic

Dark

This is the default theme.

git config split-diffs.theme-name dark

Light

git config split-diffs.theme-name light

GitHub Dark (Dim)

git config split-diffs.theme-name github-dark-dim

GitHub Light

git config split-diffs.theme-name github-light

Solarized Dark

As seen on https://github.com/altercation/solarized

git config split-diffs.theme-name solarized-dark

Solarized Light

git config split-diffs.theme-name solarized-light

Monochrome Dark

git config split-diffs.theme-name monochrome-dark

Monochrome Light

git config split-diffs.theme-name monochrome-light

Performance

Tested by measuring the time it took to pipe the output git log -p to /dev/null via git-split-diffs with the default theme:

Features enabled	ms/kloc
Everything	45
No syntax highlighting	15
No syntax highlighting, no inline change highlighting	13

Troubleshooting

Not seeing diffs side-by-side?

See #narrow-terminals

Not seeing colors, or seeing fewer colors?

Text coloring is implemented using Chalk which supports various levels of color. If Chalk is producing fewer colors than your terminal supports, try overriding Chalk's detection using a variation of the --color flag, e.g. --color=16m for true color. See Chalk's documentation or this useful gist on terminal support if issues persist.

Acknowledgements

• diff-so-fancy for showing what's possible
• shikijs for making it easy to do high quality syntax highlighting
• chalk for making it easy to do terminal styling reliably
• delta which approaches the same problem in Rust

git-split-diffs's Issues

windows terminal display is not normal

When I use less, the display will appear as follows.

`git log` breaks echo on terminal (urxvt)

Great tool! :) However it's also used to display git log, and when I do that on my urxvt terminal, which also uses gbt, I get a broken terminal:

• no echo
• pressing ENTER on an empty command line doesn't advance the prompt (it seems it's sending only a CR character without the LF one)

Probably both things are caused by the same issue.
I have to reset my terminal after each git log, which makes this beautiful tool unusable.

Tried removing the -X | --no-init parameter for less, but the problem persists. So I left it configured as README says:

$ git config --global --get core.pager
git-split-diffs --color | less -RFX

UPDATE: forgot to mention that the terminal doesn't break on git diff, so maybe that's a hint to solve the problem. Obviously git diff does something different than git log.

Other similar project

Hello,
I'm a user of another similar tool named delta: https://github.com/dandavison/delta

I just discovered your project, and as I didn't see it in the acknowledged tools, I was wondering if you knew about it (:
Maybe you can take inspiration from delta too if you want some of its featuresin this project!

No syntax highlighting in [email protected]

After updating to the latest version, I can no longer reliably see syntax highlighting. I could reproduce the issue by running git show 07e85b10b850630332aba1e4d85aa099911fe3df src/iterSideBySideDiffs.ts | git-split-diffs in this repository.

[email protected]

[email protected]

Vimdiff as an Alternative for README

I have the following in my ~/.gitconfig:

[alias]
	# already have gruvbox plugin as a really good diffing colorscheme
	vimdiff = difftool --no-prompt --extcmd 'nvim -d'

Which produces a diff like:

$ git vimdiff HEAD~1 HEAD

You can also replace nvim with vim, of course

This might be worth adding to the "Acknowledgements" section of the README

SLOW

The speed is too slow, disable syntax highlighting is also slow. Are there other ways to speed things up?

Feature request: showing moved lines differently

One thing I (and others) find sad about GitHub's diff is that it doesn't show succintly moved lines (it shows one line removed, one line added...). I was wondering if this project could improve that when using git diff locally ? WDYT ?

diff not opened in separate view & mouse scrolling not working with git v2.41.0.windows.2 in standard git bash console

After upgrading git to v2.41.0.windows.2, the diff does not open in a separate view in the standard git bash console anymore that you can quit with 'q' and scrolling with the mouse wheel doesn't also work anymore (only with the arrow keys). I came from v.2.39.0.windows.2.

Interestingly, in the normal windows cmd, the separate view is opened, however, the scrolling also doesn't work (but I can't tell if that worked before)

I checked the active git config and my setting core.pager=git-split-diffs --color | less -+LFX is still there, so scrolling should still be activated.

It looks like this now when I execute a git diff:

core.pager override doesn't work well with `git log`

I gave this a go and it works great for git show & git diff! But the core.pager override breaks git log for me.. it doesn't page anymore

Less sometimes stop working, key will print in cmd line diretly.

Less sometimes stop working, key will print in cmd line diretly without doing anything. I have no idea if it is cause by git-split-diffs. I have never meet that case before.

Often happens when press j continuously.

And can not quit less by pressing q or ctrl + c or ^]. The only way I found to quit is ctrl + z.

# less --version
less 458 (POSIX regular expressions)
Copyright (C) 1984-2012 Mark Nudelman

less comes with NO WARRANTY, to the extent permitted by law.
For information about the terms of redistribution,
see the file named README in the less distribution.
Homepage: http://www.greenwoodsoftware.com/less

Diffs are not split but linear

What I'm getting:

$ git config --global --get core.pager
git-split-diffs --color | less -RFX

What I expected:

Old Content on left side and new on right side.

ExperimentalWarning message being displayed

Hi
I'm getting the following warning displayed whenever I run git-split-diff
(node:364) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time

Functionally though all seems fine.

fyi I'm on MacOs with node v13.7.0, and I'm running the app via iTerm2 using git diff | git-split-diffs --color
(Unfortunately I'm not a node developer so can't help in trying to fix this.)

Syntax highlighting is SLOW

This tool is pretty slow when I tried piping a large diff to it, taking nearly 4 seconds. So I profiled it with perf and found that a lot of time is spent in the WASM library (https://github.com/NeekSandhu/onigasm) indirectly used by https://github.com/shikijs/shiki/.

If I comment out the usage of highlightSyntaxInLine, then it takes less than 500ms to display the previous diff. This is the perf report:

Have you considered:

1. Provide CLI flag to turn off the syntax highlighter (right now it seems to be tied to the theme setting).
2. Use a more performant syntax highlighter implementation. Anecdotally, WASM is much slower than the native, and the call between JS and WASM is also extremely expensive. This worsens when you only call the highlighter one line at a time.

For comparison, https://github.com/dandavison/delta uses https://github.com/trishume/syntect and is very fast.

Diff not using the full width of Git Bash

Hey there,

thanks for creating that amazing tool.
However, I'm using the standard Git Bash that comes with the windows git installation and the diffs are not using the full window's width.

I'm starting the bash by default with a column count of 280 and did not resize it. I'll get a split diff up until a split-diffs.min-line-width of 60 - after that it's only inline.
At first, I suspected it's because of my monitor's 150% scaling, but reverting that to 100% did not change anything. And in general it works: doing a git diff in window's cmd works perfectly and uses the console's full width.

And ideas why it's not working with the Git Bash?

Character may disappear when quit from less

this is my data

json data

[
  {
    "_id": "6277514944c5c85947b6eb0f",
    "index": 0,
    "guid": "15b9dd4f-3c75-42c5-a560-cd4c6f89392a",
    "isActive": false,
    "balance": "$2,194.29",
    "picture": "http://placehold.it/32x32",
    "age": 33,
    "eyeColor": "blue",
    "name": "Darcy Cain",
    "gender": "female",
    "company": "TERAPRENE",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "717 Adler Place, Reno, Puerto Rico, 9691",
    "about": "Veniam ullamco eu exercitation irure voluptate commodo consequat. Eu culpa quis ad eiusmod ex culpa in. Quis velit laboris commodo proident magna pariatur commodo voluptate est. Sunt velit ipsum excepteur commodo tempor quis duis labore. Ut aliqua voluptate excepteur commodo nostrud sint sint ex amet ut et cillum deserunt dolore. Pariatur sint incididunt dolor Lorem reprehenderit et elit.\r\n",
    "registered": "2021-02-23T06:38:42 -08:00",
    "latitude": 55.801411,
    "longitude": -43.462453,
    "tags": [
      "qui",
      "minim",
      "irure",
      "eiusmod",
      "laborum",
      "velit",
      "adipisicing"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Tracie Jordan"
      },
      {
        "id": 1,
        "name": "Carol Schultz"
      },
      {
        "id": 2,
        "name": "Madeleine Gutierrez"
      }
    ],
    "greeting": "Hello, Darcy Cain! You have 1 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "62775149c09302a8d2ebab1e",
    "index": 1,
    "guid": "5c356cfd-e3b3-4228-b70e-80c5084f37bf",
    "isActive": false,
    "balance": "$2,626.51",
    "picture": "http://placehold.it/32x32",
    "age": 34,
    "eyeColor": "blue",
    "name": "Collier Mendoza",
    "gender": "male",
    "company": "CEPRENE",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "942 Vandalia Avenue, Suitland, North Dakota, 1621",
    "about": "Non aliqua labore quis reprehenderit. Laborum ad dolore voluptate ipsum anim incididunt cillum ea dolor pariatur veniam sunt excepteur. Consequat deserunt elit velit cupidatat dolore est proident sit irure. Esse elit quis pariatur elit sunt. Labore ea id cillum est exercitation. Excepteur id ipsum elit commodo do aliqua duis laborum magna laboris. Amet ea enim pariatur fugiat minim adipisicing velit velit excepteur proident culpa incididunt cupidatat Lorem.\r\n",
    "registered": "2018-06-12T07:38:20 -08:00",
    "latitude": 40.973718,
    "longitude": -55.050628,
    "tags": [
      "ad",
      "eu",
      "occaecat",
      "magna",
      "fugiat",
      "ullamco",
      "nisi"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Blanche Owen"
      },
      {
        "id": 1,
        "name": "Reynolds Becker"
      },
      {
        "id": 2,
        "name": "Mclean Everett"
      }
    ],
    "greeting": "Hello, Collier Mendoza! You have 9 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "62775149167af70868273539",
    "index": 2,
    "guid": "9e9630d4-f2a7-40dc-a918-d20954130e20",
    "isActive": true,
    "balance": "$2,372.10",
    "picture": "http://placehold.it/32x32",
    "age": 36,
    "eyeColor": "blue",
    "name": "Holder Sharp",
    "gender": "male",
    "company": "TELEPARK",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "113 Linden Street, Navarre, District Of Columbia, 4102",
    "about": "Qui veniam anim excepteur occaecat consectetur dolor enim et magna qui commodo. Excepteur ad tempor et enim qui laborum tempor culpa id ea voluptate. Sit sint anim id duis laborum non anim proident dolore. Est adipisicing reprehenderit nulla cupidatat velit consectetur voluptate deserunt ex nulla sunt irure. Laborum duis enim officia aliquip officia proident. Consequat irure deserunt ea id dolore proident labore do irure.\r\n",
    "registered": "2014-12-11T01:37:48 -08:00",
    "latitude": -51.784925,
    "longitude": 50.208572,
    "tags": [
      "reprehenderit",
      "amet",
      "veniam",
      "magna",
      "Lorem",
      "dolore",
      "ullamco"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Shelby Rivers"
      },
      {
        "id": 1,
        "name": "Flossie Shepard"
      },
      {
        "id": 2,
        "name": "Fisher Mcclure"
      }
    ],
    "greeting": "Hello, Holder Sharp! You have 7 unread messages.",
    "favoriteFruit": "banana"
  },
  {
    "_id": "6277514976eb6cb4ef9e0c7e",
    "index": 3,
    "guid": "f0a1c091-1366-4fe4-8ae1-7f43c119c09e",
    "isActive": true,
    "balance": "$2,506.12",
    "picture": "http://placehold.it/32x32",
    "age": 26,
    "eyeColor": "green",
    "name": "Kelley Bird",
    "gender": "male",
    "company": "HELIXO",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "146 Lincoln Place, Greer, Guam, 4089",
    "about": "Tempor mollit dolore aliqua elit magna. Consectetur mollit sit esse incididunt velit veniam irure enim incididunt aute velit cupidatat ipsum. Elit aliquip minim culpa voluptate occaecat consequat. Aliquip minim do laborum pariatur amet labore ullamco proident. Anim sint veniam Lorem irure enim aute nisi pariatur anim irure.\r\n",
    "registered": "2021-02-13T04:28:35 -08:00",
    "latitude": 39.652243,
    "longitude": -68.994563,
    "tags": [
      "aliqua",
      "sit",
      "ipsum",
      "irure",
      "exercitation",
      "officia",
      "ea"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Morris Wells"
      },
      {
        "id": 1,
        "name": "Whitley Terrell"
      },
      {
        "id": 2,
        "name": "Tate Battle"
      }
    ],
    "greeting": "Hello, Kelley Bird! You have 9 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "62775149f0d643e91e80fa52",
    "index": 4,
    "guid": "9b71632d-cf0e-4f96-a752-c7830ae01e0e",
    "isActive": true,
    "balance": "$1,412.72",
    "picture": "http://placehold.it/32x32",
    "age": 32,
    "eyeColor": "brown",
    "name": "Knowles Roberson",
    "gender": "male",
    "company": "OTHERWAY",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "458 Johnson Street, Fidelis, Marshall Islands, 3505",
    "about": "Culpa non cupidatat esse voluptate id do nisi ullamco. Minim pariatur sunt exercitation dolor excepteur quis dolore nisi do est exercitation. Eiusmod ex elit ad et velit eu qui. Magna occaecat aute esse dolore irure labore nisi amet ut aliquip aliquip et sunt. Elit tempor enim deserunt dolore sint anim esse est aliquip occaecat sint. Anim exercitation proident qui cupidatat adipisicing nulla laboris ut est non quis amet ex.\r\n",
    "registered": "2019-05-10T03:37:48 -08:00",
    "latitude": 19.71847,
    "longitude": 57.4017,
    "tags": [
      "Lorem",
      "irure",
      "voluptate",
      "consequat",
      "irure",
      "laborum",
      "pariatur"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Steele Wolf"
      },
      {
        "id": 1,
        "name": "Hodges Bruce"
      },
      {
        "id": 2,
        "name": "England Erickson"
      }
    ],
    "greeting": "Hello, Knowles Roberson! You have 6 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "627751496b4d60a7d917b082",
    "index": 5,
    "guid": "3deadda2-934e-496b-8590-7838a485ff6e",
    "isActive": false,
    "balance": "$1,795.49",
    "picture": "http://placehold.it/32x32",
    "age": 34,
    "eyeColor": "green",
    "name": "Rhea Clarke",
    "gender": "female",
    "company": "PROGENEX",
    "email": "[email protected]",
    "phone": "[phone]",
    "address": "170 Georgia Avenue, Eureka, Washington, 3971",
    "about": "Anim magna exercitation id nulla eiusmod excepteur ad ut esse reprehenderit dolore cillum. Non sit adipisicing irure officia esse fugiat esse magna commodo exercitation voluptate ullamco reprehenderit irure. Nostrud non laboris magna dolor. Proident eiusmod occaecat ullamco id culpa quis reprehenderit velit mollit quis. Mollit magna qui exercitation velit excepteur magna laboris enim veniam magna commodo exercitation. Ad ad ipsum sit cupidatat enim officia voluptate ut quis in. Nulla sint elit sunt laborum ut aliqua officia ea fugiat et duis sit est.\r\n",
    "registered": "2020-12-04T07:15:10 -08:00",
    "latitude": 36.499672,
    "longitude": 106.702338,
    "tags": [
      "excepteur",
      "sit",
      "amet",
      "laboris",
      "adipisicing",
      "aute",
      "ad"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Amber Waller"
      },
      {
        "id": 1,
        "name": "Tami Lindsey"
      },
      {
        "id": 2,
        "name": "Concepcion Torres"
      }
    ],
    "greeting": "Hello, Rhea Clarke! You have 7 unread messages.",
    "favoriteFruit": "apple"
  }
]

reproduce it by

mkdir tmp
cd tmp
git init
# copy data to data.json
git add --all .
git commit -m "init"
rm data.json -fr
git diff

Maybe this is also the bug from less command, but I have no idea.

version

# npm view git-split-diffs version
0.10.0

File name disappears in git version 2.38.1

Broken version: git version 2.38.1
Working version: git version 2.37.1 (Apple Git-137.1)

git diff output is slightly different between these two versions. In the working version, it's like this:

diff --git a/modified.txt b/modified.txt
index 1dd297ad..1cb605b6 100644
--- a/modified.txt
+++ b/modified.txt

In the broken version, it's like this:

diff --git modified.txt modified.txt
index 12ea6ab..c801668 100644
--- modified.txt
+++ modified.txt

The a/ and b/ are gone. git-split-diffs fails to parse the file name when a/ and b/ are gone and thus displaying every file without a file name. Otherwise, everything else still works.

Needs theme with no background color

I use a black background in my terminal, and the "dark" themes aren't really enough. Either having a black theme or one without background color (meaning using the terminal's background) would be ideal.

Great project!

Diff line overflow when diff include chinese or japanese or korean

I think it's because C/J/K letter occupies two bytes.

Is there any way to fix it?

And there are my gitconfigs:

[pager]
    diff = "git-split-diffs --color=16m | less -RFX"
[split-diffs]
    theme-name = dark

syntax highlighting not working

Hi, thanks for this awesome tool.
I use it everyday in lazygit.

I wonder how the syntax highlighting is working.
My kotlin code is not highlighted and I wonder if there is a fix a can do on my machine or if it needs to be supported by the tool.

Is it possible to use a different differ under the hood?

Hey! I'm using git-split-diffs all the time, but I'd like if it could use this https://github.com/wilfred/difftastic under the hood. Are these tools composable?

Wrong layout for wide characters such as Chinese

1. Create a test file with this content:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   
   今撮储哇费民浙，洪诫毫伊逻幸番舶祁胳看钉梁钩贮慨洞芽白穗阐示械渔炎涌滤衅芽鳄些浪出辣膛蒲惠败卧虱腥着假委扭岘枚贷明垃肚屋甩赵曹鳍列腑旗泄踏梭浇贼琼鞍壕句？狠闸款荧运缚渍穆。竿煤秆秋假拦绑；皿触荒江驶釉禹糊滩胸又塘巍睛。砚玻请口岩丙锋金菱邓礁必优俞宰曝烂。枚毫街？型壁蚊碳旗同筹姐扇次案。泳蠕，阮顷浆滚痹削孜焦弦弧参珩虱植蔡第扫亚？
   

2. Use git-split-diffs to show the diff:

   

[Feature Request] Support diff two local files directly not in git repository

git-split-diffs oldfile newfile

If would be convenient if git-split-diffs could support this

No output at all in powershell tab of windows terminal

When I ran git diff | git-split-diffs --color | less in powershell tab of windows terminal, there is nothing in the output.

`--color` option breaks the output in Git Bash on Windows

$ git diff data/slugify.js | git-split-diffs | less

---

$ git diff data/slugify.js | git-split-diffs --color | less

(Truncated output; there are a few more lines.)

---

$ git --version
git version 2.31.1.windows.1

$ node -v
v14.13.0

$ npm ls -g --depth=0
C:\Users\mts\AppData\Roaming\npm
├── [email protected]
...

Any idea what might be wrong? I'm using Windows Terminal in the screenshots, but the --color option doesn't work either when used directly in Git Bash.

The output seems to be colorized when using CMD, even without the --color option, but I don't want to use CMD. (Btw the output looks gorgeous! 🤩)

From todo.md I can see that there's a completed item called "Test on windows." I wonder what kind of setup was used for the testing? Was CMD or Git Bash used?

chore: I can't see all changes

When I use this command git config --global --replace-all core.pager 'git-split-diffs --color | less -RFX' I want to show me everything I've changed, but I can't see. I can only see if I press a letter or a page down to drive all the content

Terminal is broken on exiting "git diff", need to run "stty sane"

Hello there,

I've just discovered your package and it looks amazing. However, every time I exit the "git diff" command, I have a broken terminal in which I don't see anything I type. The only way out of it is blind typing "reset" or "stty sane".

Any idea why that happens ? Or how I can get debug information for this issue ? I'm using an Ubuntu-based linux distro with GNOME terminal and bash.

Thanks for your help!
gnutix

How do I get it to do side-by-side?

I followed the instructions from the README:

npm install -g git-split-diffs

git config --global core.pager "git-split-diffs --color | less -RFX"

But I don't see side-by-side diffs.

git version:

git version 2.31.1

os version:

Darwin 19.6.0 Darwin Kernel Version 19.6.0: Tue Jan 12 22:13:05 PST 2021; root:xnu-6153.141.16~1/RELEASE_X86_64 x86_64