Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)
* {
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; }
@teeheehee
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".

@ChaseFlorell
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.

@ChaseFlorell
Copy link

ChaseFlorell commented May 14, 2015

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

@0xMF
Copy link

0xMF commented May 14, 2015

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

@ahmetb
Copy link

ahmetb commented May 15, 2015

imgs?

@tcelestino
Copy link

tcelestino commented May 15, 2015

amazing!
👏

@daftspaniel
Copy link

daftspaniel commented May 15, 2015

Funky!

@Pierstoval
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)

@afolson
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

@jslegers
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.


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.

Copy link

ghost commented Jun 4, 2015

Awesome :)

@hboon
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 https://motionobj.com/wilfredapp/.

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