Code Monkey home page Code Monkey logo

html-diff's Introduction

This is a simple set of Windows-style command shell scripts and a sed script to generate and open an HTML document containing a styled diff of a given SCM (currently wrappers for git and hg exist).

o What Is It For?

At the time of writing I am using an instant messaging client at j0rb to communicate with colleagues and often I like to send short patches to colleagues to demonstrate an idea or make sure we're on the same page about something. I'm used to colored patches now (i.e., Git, Mercurial, and Vim are all capable of "syntax highlighting" patches) and I find it can make them much more readable. Also, since most of my colleagues are GUI bound and not as comfortable with plain text it doesn't hurt to have the coloring to help them understand the patches at a glance.

I typically will copy the patch from cmd.exe (or occasionally gVim) and paste it into my IM client. Then I manually would style it by coloring deletions red, additions green, and bolding both to make them stand out. It can be quite tedious to do line-by-line though, particularly when I don't have an acceptable green RGB memorized so I have to feel it out each time and each line gets a slightly different color. I finally decided to explore whether or not I could use HTML/CSS styling somehow to automate this.

html-diff is the result of an hour of hacking at it. What it does is basically transform a patch into an HTML document using MSYS sed and then "execute" the HTML document (in Windows, this basically opens it with the default application), resulting in it being launched in Firefox. I can then copy/paste the styled patch. To my excitement, it seems to work quite well after I worked out a few kinks.

o Why Aren't You Using A CSS Stylesheet?

I would really rather I could, but it seems that unless the styles are directly on the element then copying/pasting from Firefox in Windows doesn't preserve the styling. So for now at least it seems like the styles need to be inline.

o Why Aren't You Using <pre>?

An observer might notice that the code is replacing spaces, tabs, and newlines with equivalent tags and entity references to preserve the space instead of just using CSS or <pre> tags. You might wonder _why_. Well, the main reason is because I was struggling getting the copy/paste to preserve the styling and I naively thought that maybe the <pre> tag was responsible for it and tried without it. When I actually figured out the alleged problem (stylesheets vs. inline styles) I didn't have the time to test the <pre> tags with inline styles. You might wonder why I would go to the trouble of writing this paragraph instead of just fixing the code now. The reason is because I don't have the time/motivation to test the <pre> tags right now and this is just simpler. :P I'll probably switch back to <pre> tags eventually, assuming it works.

o Dependencies

Currently html-diff is intended for use in Windows. The only reason being that I generally only share patches this way in Windows. In *nixes, there are more convenient ways to share the patch that will make them accessible for you to do what you want with them and view them however you want. For at least, that is what I'm going with for now since I'm not currently working in Linux and don't have a use case where I need this functionality there.

You will need some compatible version of sed in your PATH. I use MSYS sed.

The rest of the magic^Wevil is handled by cmd.exe for now, which all relatively modern Windows OSes should most definitely have (whether you like it or not).

o How Do I Install It?

That is really up to you, but I'll explain what I have done. For starters, I create symbolic links to the executables (i.e., the cmd scripts) somewhere in my PATH (for me, I add ~/bin to my PATH, so I just create them there). You normally require administrative rights to create symbolic links in Windows so you'll need to somehow launch your shell with administrative rights (e.g., right-click on the launcher). Copying them there will also work (with the obvious limitation that changes to one won't affect the other).

C:\Users\bambams>mklink bin\git-html-diff.cmd ..\src\git-html-diff.cmd
symbolic link created for bin\git-html-diff.cmd <<===>> ..\src\git-html-diff.cmd
C:\Users\bambams>mklink bin\hg-html-diff.cmd ..\src\hg-html-diff.cmd
symbolic link created for bin\hg-html-diff.cmd <<===>> ..\src\hg-html-diff.cmd
C:\Users\bambams>mklink bin\html-diff.cmd ..\src\html-diff.cmd
symbolic link created for bin\html-diff.cmd <<===>> ..\src\html-diff.cmd

html-diff currently assumes that its lib directory is installed at %HOME%/lib/html-diff. You can create another symbolic link for this or you can copy the directory.

C:\Users\bambams>mklink /d lib\html-diff ..\src\html-diff\lib
symbolic link created for lib\html-diff <<===>> ..\src\html-diff\lib

That should suffice. You should now be able to execute them:

git-html-diff HEAD~3..HEAD~2
hg-html-diff -c -3

Ordinarily Git detects git-* files in the PATH and allows you to use them with the git front-end. Currently git isn't detecting it so perhaps .cmd isn't a supported file type. I might fix that with a different wrapper at a later date (perhaps .bat will work instead).

As for Mercurial, you can install it as an alias in your hgrc file if you wish:

[aliases]
html-diff = !hg-html-diff $@

o Known Issues

Due to limitations of cmd (or my expertise in it) arguments with spaces in them won't be supported due to the way arguments are passed along. I may look into fixing that at a later date.

# vim: tw=0 wrap

html-diff's People

Contributors

bambams avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.