Diff views in GitHub-Flavored Markdown

A few days ago, I suggested using “diff views” in docs and blogs, and wrote that “our tools are not equipped to manually write diffs.” My friend and colleague Craig Frost then tweeted that

If you use GitHub Flavoured Markdown, you can achieve diff views by beginning a line with + or - and setting diff as the language. Of course, this does mean forfeiting actual syntax highlighting 😷

Cool! With some appropriate CSS set, this works:

 function JimPromise() {
+  this.isFulfilled = false;
   this.callbacks = [];
 }

 JimPromise.prototype.fulfill = function(value) {
+  this.isFulfilled = true;
+  this.value = value;
   this.callbacks.forEach(cb => cb(value));
 };

 JimPromise.prototype.registerCallback = function(cb) {
+  if (this.isFulfilled) {
+    cb(this.value);
+  } else {
     this.callbacks.push(cb);
+  }
 };

As Craig mentions, by changing the language to diff, I lost the syntax highlighting for the base language (JavaScript). Our tools are still poorly equipped for displaying diffs, but the above approach is quick and easy. I’ll use it in future.

More by Jim

Tagged #programming, #blog. All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.