Surf the web with markdown style

mark-it-down.md

Surf the Web With Markdown Style

This bookmarklet removes a web page’s current styling and applies markdown style to it. No conversion, just style.

1. Create a bookmarklet with the following javascript as the URL.

javascript:(function(){var s=document.createElement('script');s.src='https://dl.dropbox.com/s/5tyy4xskrda9r28/markdownify.js?token_hash=AAE5s_WBThN9O1mx6AfsPqSY6xjNvD47n6-24vn-ourX_w&dl=1';document.body.appendChild(s);})();

2. Click on the bookmarklet to mark a web page down.

The markdownify stylesheet is based on markdown-css and remarkdown. Thanks!

markdownify.css

* {
  float: none;
  position: static;
  text-align: left;
  font-size: 1em;
  line-height: 1.5em;
  font-family: consolas, inconsolata, courier, "courier new", monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: black;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  background-image: none;
  width: auto;
}

body {
  margin: 1em;
}

object, iframe, input, button, select, textarea, embed {
  display: none !important;
}

p {
  margin-bottom: 1.5em;
}
ul, ol, pre {
  margin: 1.5em 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5em;
}
h1:after {
  display: block;
  content: "=======================================================================";
}
h2:before, h3:before, h4:before, h5:before, h6:before {
  display: inline;
}
h2:before {
  content: "## ";
}
h3:before {
  content: "### ";
}
h4:before {
  content: "#### ";
}
h5:before {
  content: "##### ";
}
h6:before {
  content: "###### ";
}

hr {
  height: 1.5em;
  overflow: hidden;
  margin: 0 0 1.5em;
}
hr:after {
  content: "------------------------------------------------------------------------";
  width: 100%;
}

a[href]:before {
  content: "[";
  display: inline;
}
a[href]:after {
  content: "](" attr(href) ")";
  display: inline;
}

td, th {
  padding: 0 1em 1.5em 0;
}
th {
  vertical-align: bottom;
}

tr:before {
  content: "|";
}
td:after, th:after {
  content: "|";
}

li {
  position: relative;
  display: block;
  margin-left: 1em;
}
li:before {
  position: absolute;
  margin-left: -1em;
}
ul > li:before {
  content: "*";
}
ol {
  counter-reset: ol;
}
ol > li:before {
  content: counter(ol) ".";
  counter-increment: ol;
}

blockquote {
  position: relative;
  overflow: hidden;
  margin: 1.5em 0 1.5em 3em;
  padding: 0 0 0 2em;
}
blockquote:before {
  position: absolute;
  top: 0; left: 0;
  white-space: pre;
  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A"
  ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A"
  ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A"
  ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A";
}
blockquote > *:first-child {
  margin-top: 0;
}
blockquote > *:last-child {
  margin-bottom: 0;
}

code:before,
code:after {
  content: "`";
}

strong:before,
strong:after,
b:before,
b:after {
  content: "__";
  display: inline;
}
em:before,
em:after,
i:before,
i:after {
  content: "_";
  display: inline;
}

markdownify.js

(function(){
  // Remove all stylesheets
  var a = document.getElementsByTagName("link");
  for ( var i = a.length; i-- > 0; ) {
    if (a[i].rel.length && a[i].rel.match(/stylesheet/i)) {
      a[i].parentNode.removeChild(a[i]);
    }
  }

  // Attach the markdownify stylesheet
  a = document.createElement('link');
  a.rel = "stylesheet";
  a.type = "text/css";
  a.href = "https://dl.dropbox.com/s/vkxfraebvs7867w/markdownify.css?token_hash=AAE6UgxKx5OR-tt3G0G3GKFvG3PLuCxnnnvXFBFZUj369Q&dl=1";
  document.getElementsByTagName("head")[0].appendChild(a);

  // Remove inline styles
  a = document.getElementsByTagName("style");
  for ( i = a.length; i-- > 0; ) {
    a[i].parentNode.removeChild(a[i]);
  }

  // Remove style attributes on elements
  a = document.getElementsByTagName("*");
  for ( i = a.length; i-- > 0; ) {
    a[i].removeAttribute("style");
  }

  // Rewrite image tags. No way to get md style to images with CSS AFAIK.
  a = document.getElementsByTagName("img");
  for ( i = a.length; i-- > 0; ) {
    a[i].parentNode.replaceChild(document.createTextNode('![' + a[i].alt + '](' + a[i].src + ')'),  a[i]);
  }
})();