Code Monkey home page Code Monkey logo

github-diff-syntax-highlighter's Introduction

GitHub diff syntax highlighter

Use GitHub's own syntax highlighting for diffs on GitHub


Note: this extension is now unnecessary

On December 9, 2014, GitHub finally implemented this functionality on the server-side. See GitHub’s announcement “Syntax Highlighted Diffs”. Thus, this extension is unnecessary and will be discontinued. Enjoy your diff-reading!


GitHub doesn't syntax highlight inside diffs. This extension fixes that.

Other extensions already exist that use a Javascript syntax highlighter to perform a similar task, but this extension instead requests the highligted HTML directly from GitHub and merges it into the page.

This has two advantages:

  1. The syntax highlighting matches that on the rest of GitHub exactly
  2. Small diffs without enough context to be parsed properly with Javascript still get highlighted properly

It also has some disadvantages:

  1. It is highly coupled with GitHub's current HTML output. This is very brittle since the HTML could change and any time and break everything.
  2. On large diffs, it can require many additional network requests before it will begin its work (this could be somewhat alleviated).
  3. Because there are many contexts in which diffs appear and the HTML differs for each, I probably missed some cases.
  4. Due to the brittle design of the whole thing (which essentially merges different GitHub pages into one and has to handle many special cases), it may become out of date at any time and I may or may not have time to fix it.
  5. It doesn't highlight deleted lines on just-renamed files since GitHub's HTML doesn't usually contain enough information to do that.
  6. It doesn't highlight inline diffs (such as in comments), since GitHub's HTML doesn't include enough information to do it accurately.

TL;DR

This extension rocks and you should use it until it breaks inexplicably

Installation

Chrome

Visit the Chrome web store and install the extension.

Firefox

Clone, then build with make and bundle with cfx xpi build/firefox/ (too little demand for me to do this for each release). The cfx command is provided by Mozilla’s Jetpack – see its installation instructions. Install the generated file github-diff-syntax-highlighter.xpi by opening it in Firefox.

For convenience, here are the commands to build and install the project for the first time on a Mac with Homebrew:

# install dependencies with Homebrew
brew install wget  # wget is needed by the Makefile
brew install mozilla-addon-sdk  # cfx is needed to bundle the xpi
# clone
git clone [email protected]:msolomon/github-diff-syntax-highlighter.git
cd github-diff-syntax-highlighter
# build
make
cd build
cfx xpi firefox/
# install in Firefox
open -a Firefox github-diff-syntax-highlighter.xpi

Safari

Clone, then build with make and bundle in Safari (too little demand for me to do this for each release).


Brought to you by msol, aka @msol

github-diff-syntax-highlighter's People

Contributors

msolomon avatar pmdarrow avatar roryokane avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

github-diff-syntax-highlighter's Issues

FF Addon Not Found

Looks like the Addon for FF does not exist (the search doesn't find anything either). Still in Review?

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.