Markdownify CSS display via greasemonkey user script

markdownify.user.js

// ==UserScript==
// @name         Markdown CSS display
// @namespace    http://howahumanwon.org
// @version      0.1
// @description  Changes the HTML display of a page to look like Markdown text.
// @author       Dan K
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

// With thanks to the markdown.css gist:
// https://gist.githubusercontent.com/ImJasonH/c00cdd7aece6945fb8ea/raw/8805529b9ec305185cfe4e9cc6ce3243e2b69eab/markdown.css
// Updated with better ordered list counting from this gist:
// https://gist.github.com/jbrooksuk/2d6989c35c77bf0c62f9

(function() {
	// The activation keyword.
	var word = "md";
	// Tracking variable for what has been typed so far.
	var input = "";
	// Start tracking the keypress events and compare to the activation word
	document.body.addEventListener('keypress', function(ev) {
		input += String.fromCharCode(ev.keyCode);
		console.log(input);
		if (input == word) {
			//alert('typed ' + word);
			addMarkdownStyles();
			input = "";
		}
	});
	// Reset input when pressing esc
	document.body.addEventListener('keyup', function(ev) {
		if (ev.keyCode == 27) { input = ""; }
	});
	// Add a style node to the HTML
	function addStyleString(str) {
		var node = document.createElement('style');
		node.innerHTML = str;
		document.body.appendChild(node);
	}
	// Here is the markdown.css being added to the page
	function addMarkdownStyles() {
		addStyleString('* {font-size: 12pt; font-family: monospace; font-weight: normal; font-style: normal; text-decoration: none; color: black; cursor: default;}');
		addStyleString('h1::before { content: "# "; }');
		addStyleString('h2::before { content: "## "; }');
		addStyleString('h3::before { content: "### "; }');
		addStyleString('h4::before { content: "#### "; }');
		addStyleString('h5::before { content: "##### "; }');
		addStyleString('h6::before { content: "###### "; }');
		addStyleString('strike::after, strike::before { content: "~~"; }');
		addStyleString('i::before, i::after { content: "*"; }');
		addStyleString('b::before, b::after { content: "**"; }');
		addStyleString('ol, ul { list-style: none; padding-left: 0; }');
		addStyleString('ul li::before { content: "* "; }');
        	addStyleString('ol { counter-reset: numberlist;  }');
        	addStyleString('ol li { counter-increment: numberlist; }');
		addStyleString('ol li::before { content: counter(numberlist) ". "; }');
		addStyleString('code::before, code::after { content: "`"; }');
		addStyleString('pre::before { content: "```" attr(lang) "\A"; }');
		addStyleString('pre::after { content:"```\A"; }');
		addStyleString('a::before { content: "["; }');
		addStyleString('a::after { content: "](" attr(href) ")"; }');
		addStyleString('tr::before { content: "| "; }');
		addStyleString('td::after { content: " | "; }');
		addStyleString('thead td::after { content: " | \A-----| "; white-space: pre; }');
	}
})()

Markdownify

This is a greasemonkey script for altering the styling of webpages to display as Markdown text by typing an activation word.

Usage

1. Install a greasemonkey plugin for your web browser, such as Tampermonkey
2. Using the greasemonkey plugin, install this script (you may be prompted to install it just by viewing the raw contents)
3. On any web page type the letters "md"
4. If those keystrokes don't work, change the value of the word variable to one that works for you

Markdown.css

The style changes that are activated by typing the word are based on the wonderful project markdown.css with updates for ordered list sequencing from a fork of markdown.css

Known Issues

This script will likely not work on webpages like GMail that already have actions based on keystrokes that overlap at least one of the letters in the activation word.