Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Render Markdown as unrendered Markdown (see
* {
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; }
Copy link

renestalder commented Apr 21, 2015

Cool idea. But just one question: What use case does this have? Because I'm not even able to copy & paste the visible output, thanks to the shadow DOM.

Copy link

nolim1t commented Apr 23, 2015

This could prove useful for those who keep forgetting markdown markup but know HTML

Copy link

jasonkarns commented Apr 23, 2015

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

Copy link

teeheehee commented Apr 25, 2015

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

Copy link

ChaseFlorell commented May 14, 2015

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

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

Copy link

ChaseFlorell commented May 14, 2015

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

Copy link

0xMF commented May 14, 2015

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

Copy link

ahmetb commented May 15, 2015


Copy link

tcelestino commented May 15, 2015


Copy link

daftspaniel commented May 15, 2015


Copy link

Pierstoval commented May 18, 2015

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)

Copy link

afolson commented May 21, 2015

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

Copy link

jslegers commented May 28, 2015

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 :

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.


  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.

Copy link

ghost commented Jun 4, 2015

Awesome :)

Copy link

hboon commented Oct 5, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment