highlight_code.css

/* Allow for border-to-border line highlighting */
pre {
  display: block;
  padding: 0 0 0 0;
}
pre code {
  display: block;
  margin: 15px 0 15px 20px;
}
.highlight span.emphasize {
  display: inline-block;
  margin: 0 0 0 -20px;
  padding: 0 0 0 20px;
  width: 100%;
  background: #f6e4cd;
}

parse-data-in-comments.js

$(document).ready(function() {
  
  // 
  // Extract `data-*` from HTML comments, adding them 
  // as attributes to the following node.
  // 
  $('#content *').contents().each(function() {
    
    // We only want comments...
    if ( this.nodeType !== 8 ) {
      return;
    }
    // ...that contains `data-key: value`, extracted here.
    var matches = this.nodeValue.trim().match(/^data-([^:]+): (.*)/);
    if ( matches === null ) {
      return;
    }
    
    // Set the `data-key` attribute on the *next* node to `value`
    $(this).next().attr('data-' + matches[1], matches[2].trim());
  });
  
  // 
  // Emphasize the lines of code according to the line number(s) given 
  // in the `data-emphasize-lines` attribute of the container div.
  // 
  $('div.highlight[data-emphasize-lines]').each(function() {
    
    var lines = $(this).html().split('\n');
    
    $(this).attr('data-emphasize-lines')
           .split(",")
           .map(function(n) {
             var line_index = parseInt(n) - 1;
             lines[line_index] = '<span class="emphasize">' + lines[line_index] + '</span>';
           });
    
    $(this).html(lines.join('\n'));
  });
});