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 {
+  }

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.

Get updates on Twitter

I wrote this because I felt like it. This post is not associated with my employer. This site is hosted by Netlify (who are great, but I'm not associated with them either).