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; }

@cash2m @jbrooksuk incrementing is nice but I prefer to use 0. for ordered lists. It makes it so much easier to insert a line somewhere without messing up the markup.
The number doesn't matter anyway, it just has to be [0-9]+\.

Worked on something similar a while back but never used it for anything: https://gist.github.com/pluma/6b51b2601ddea34d5abf

Of course, this doesn't actually reverse the (lossy) Markdown transformation. For example, the source 9. turns into an ordered list that looks like "1." and CSS won't reverse that. (I see this problem on reddit all the time.)

Very cool ... now to find a place to implement/integrate this!

I did something similar a few years ago and updated it last year, if you want to check it out:
https://github.com/fvsch/remarkdown

That's actually the easiest way for me to remember/learn markdown. Thanks mate.

I think the list styles should be something like:

ol, ul { list-style: none; padding-left: 0; }
ul li::before { content: "* "; }
ol { counter-reset: section; }
ol li::before {
  counter-increment: section;
  content: counters(section,".") ". ";
}

Very, very nice!

woow

i::before, i::after, em::before, em::after { content: "*"; }
b::before, b::after, strong::before, strong::after { content: "**"; }

That's brilliant!

I did this for my current site at nathanherald.com, but I never imagined anyone else would do it! Awesome and thanks for sharing.

That's Awesome!

All of Genius is Simple! Awesome!
Can play with counters for lists.

Awesome. How about th tag?

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.

https://twitter.com/renestalder/status/590578412709933057

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

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/.