Syntax highlighting, diff highlighting, inner diff highlighting for unified diffs. A work in progress.

gistfile1.txt

<style>
del {
  background-color: #fdd;
  text-decoration: none;
  color:#000 !important;
}

ins {
  background-color: #dfd;
  text-decoration: none;
  color:#000 !important;
}

del .inner
{
  background-color: #faa;
  text-decoration: none;
}

ins .inner
{
  background-color: #afa;
  text-decoration: none;
}


.pln{color:#000}
@media screen{
.str{color:#D14}
.kwd{color:#008}
.com{color:#93a1a1}
.typ{color:teal}
.lit{color:#195f91}
.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}
.atv{color:#D14}.dec,.var{color:#606}
.fun{color:red}
}
@media print,projection{
.str{color:#D14}
.kwd{color:#006;font-weight:bold}.com{color:#93a1a1;font-style:italic}
.typ{color:teal;font-weight:bold}.lit{color:#195f91}.pun,.opn,.clo{color:#440}
.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#D14}
}

pre.prettyprint{padding:2px;border:1px solid #ccc}
ol.linenums{margin-top:0;margin-bottom:0}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8
li.L1,li.L3,li.L5,li.L7,li.L9{background:#fff}

</style>
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.css" type="text/css" rel="stylesheet" />-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js">
</script>
<script>
$(document).ready(function() 
{
    $("code").each(function()
    {
      var text = $(this).text();
      $(this).html( formatUnifedDiff(text) );
    });

    $("pre").addClass("prettyprint");
    prettyPrint();


});

//var diff_match_patch=require("googlediff");
diffEngine = new diff_match_patch();

function formatUnifedDiff(text)
{
  var wasMinus = false;
  var prevLine = null;
  var lines = text.split(/\r\n|[\n\v\f\r\x85\u2028\u2029]/).map(function (line) 
  {
    if( line.indexOf("-") == 0 || line.indexOf("-") == 1 )
    {
      wasMinus = true;
      prevLine = line;
      return "<del>" + line + "</del>";
    }
    if( line.indexOf("+") == 0 || line.indexOf("+") == 1  )
    {
      if( wasMinus )
      {
        var diffs = diffEngine.diff_main(prevLine, line);
        diffEngine.diff_cleanupSemantic(diffs);
        line = emitInnerDiff(diffs);
      }
      wasMinus = false;
      return "<ins>" + line + "</ins>";
    }
    wasMinus = false;
    return line;
  });

  return lines.join("\n");
}

var DIFF_DELETE=-1;var DIFF_INSERT=1;var DIFF_EQUAL=0;
function emitInnerDiff(diffs)
{
  var html = [];
   for (var x = 0; x < diffs.length; x++) 
   {
     var op = diffs[x][0];    // Operation (insert, delete, equal)
     var data = diffs[x][1];  // Text of change.
     var text = data;
     switch (op) {
        case DIFF_INSERT:
          html[x] = '<ins class="inner">' + text + '</ins>';
          break;
        case DIFF_DELETE:
          break;
        case DIFF_EQUAL:
          html[x] = '' + text + '';
          break;
     }
  }
  return html.join("");
}


</script>