Clean up Hackpad's print view with a JavaScript bookmarklet

I think the only issue I have with hackpad is that the printing view is broken when it comes to code.

For some reason code is displayed as a ul, with each line of code being a new li inside of that … It would look great if they had merely used <code> tags. Not a big deal though, I wrote some quick and easy JavaScript to clean up the markup for now:

UPDATE, I improved this code below.

[].slice.call(document.querySelectorAll('ul.code li')).forEach(function (oldMarkup) {
  var newMarkup = document.createElement('div');
  newMarkup.innerHTML = oldMarkup.innerHTML;
  oldMarkup.parentNode.insertBefore(newMarkup, oldMarkup);
  oldMarkup.parentNode.removeChild(oldMarkup);
});

[].slice.call(document.querySelectorAll('ul.code')).forEach(function (oldMarkup) {
  var newMarkup = document.createElement('code');
  newMarkup.innerHTML = oldMarkup.innerHTML;
  oldMarkup.parentNode.insertBefore(newMarkup, oldMarkup);
  oldMarkup.parentNode.removeChild(oldMarkup);
});

To turn it into a handy bookmarklet I used Chris Zarate’s excellent, open-source Bookmarkleter.

Here is the bookmarklet below:

javascript:void%20function(){[].slice.call(document.querySelectorAll(%22ul.code%20li%22)).forEach(function(e){var%20n=document.createElement(%22div%22);n.innerHTML=e.innerHTML,e.parentNode.insertBefore(n,e),e.parentNode.removeChild(e)}),[].slice.call(document.querySelectorAll(%22ul.code%22)).forEach(function(e){var%20n=document.createElement(%22code%22);n.innerHTML=e.innerHTML,e.parentNode.insertBefore(n,e),e.parentNode.removeChild(e)})}();

I call it cleanUpHackpad.

Before:

before cleanUpHackpad

After:

after cleanUpHackpad

Although, this could all be for naught as I have filed an issue on the Hackpad GitHub repo. I am looking into what needs to be changed to fix this, it was not obvious from my first examination of the Hackpad code.

UPDATE 2015.10.22:

The above code is a perfect example of violating the classic programmer paradigm of DRY. Here is a much cleaner version:

function cleanUpHackpadMarkup(selector, elementType) {
  [].slice.call(document.querySelectorAll(selector)).forEach(function(oldMarkup) {
    var newMarkup = document.createElement(elementType);
    newMarkup.innerHTML = oldMarkup.innerHTML;
    oldMarkup.parentNode.insertBefore(newMarkup, oldMarkup);
    oldMarkup.parentNode.removeChild(oldMarkup);
  });
}
cleanUpHackpadMarkup('ul.code li', 'div');
cleanUpHackpadMarkup('ul.code', 'code');

And the new bookmarklet:

javascript:void%20function(){function%20e(e,n){[].slice.call(document.querySelectorAll(e)).forEach(function(e){var%20o=document.createElement(n);o.innerHTML=e.innerHTML,e.parentNode.insertBefore(o,e),e.parentNode.removeChild(e)})}e(%22ul.code%20li%22,%22div%22),e(%22ul.code%22,%22code%22)}();

You can drag this right to your bookmarks bar:

cleanUpHackpad

UPDATE 2016.01.26:

And here’s an even better version. I wonder how many times I will rewrite this code …

/*jslint browser:true, white:true*/
(function () {
  "use strict";
  var cleanUpHackpadMarkup = function (selector, elementType) {
    var selectorArray = Array.prototype.slice.call(document.querySelectorAll(selector));
    selectorArray.map(function (oldMarkup) {
      var newMarkup = document.createElement(elementType);
      newMarkup.innerHTML = oldMarkup.innerHTML;
      oldMarkup.parentNode.insertBefore(newMarkup, oldMarkup);
      oldMarkup.parentNode.removeChild(oldMarkup);
    });
  };
  cleanUpHackpadMarkup('ul.code li', 'div');
  cleanUpHackpadMarkup('ul.code', 'code');
}());

Go ahead, drag it up there:

cleanUpHackpad