Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)

markdown.css

* {
    font-size: 12pt;
    font-family: monospace;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: black;
    cursor: default;
}

h1::before { content: "# "; }
h2::before { content: "## "; }
h3::before { content: "### "; }
h4::before { content: "#### "; }
h5::before { content: "##### "; }
h6::before { content: "###### "; }
strike::after, strike::before { content: "~~"; }
i::before, i::after { content: "*"; }
b::before, b::after { content: "**"; }
ol, ul { list-style: none; padding-left: 0; }
ul li::before { content: "* "; }
ol li::before { content: "1. "; }
code::before, code::after { content: "`"; }
pre::before { content: "```" attr(lang) "\A"; }
pre::after { content:"```\A"; }
a::before { content: "["; }
a::after { content: "](" attr(href) ")"; }
tr::before { content: "| "; }
td::after { content: " | "; }
thead td::after { content: " | \A-----| "; white-space: pre; }

I think everyone's ready for this gist to become a legit git repo :)

Here's a handy greasemonkey script that takes this styling and applies it to any webpage by typing "md".

hr {height: 0px; border:none;}
hr::after {content: "-----";}

Also, forked it to add .md class support so that it's not necessarily global.

+1 for @jasonkarns comment. make it a repo that we can submit PR's to :)

Amazing...truly amazing. I am still recovering from it's simplicity and elegance.

imgs?

amazing!
👏

Funky!

There should be something done for the pre code {} selector which is created in some Markdown parsers (especially when you have a language specified in the "```" block)

I'd like to add my voice to the chorus of people suggesting that this become a repo. :D

When I try to actually copy/paste/select the generated characters, both Firefox and Chrome consistently skip any generated characters.

Judging by what I find on Stackoverflow, the problem seems to be neither OS nor browser specific :

• Select text in ::before or ::after pseudo-element
• Is it possible to select css generated content?
• How can I make generated content selectable?

That means you'll still need a nasty JS-based hack to actually copy-paste the generated output into a textarea on Github or elsewhere.

---

Workaround:

1. Use Google Chrome
2. Go to the print preview
3. Copy-paste your result from the print preview

This technique is a bit convoluted, but it appears to be the best we've got so far.

Awesome :)

Thanks for sharing, ever since I saw this, I've been meaning to find a place to use it. I've just applied this lightly at https://motionobj.com/wilfredapp/.