Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Markdownify CSS display via greasemonkey user script
// ==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; }');
}
})()
@teeheehee

This comment has been minimized.

Copy link
Owner Author

commented Apr 25, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.