Create a gist now

Instantly share code, notes, and snippets.

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

I have no idea where I'm going to use this, but this is awesome.

@Zardoz89

It's interesting ... I did some time ago a try to render it like it was printed by a old dot matrix printer on a continuous paper : http://trillek-team.github.io/trillek-computer/README.html
Need a lot of improve... Here have you the .less file : https://github.com/trillek-team/trillek-computer/blob/gh-pages/css/default.less

@HenningCash

ol and ul are mixed up. And some Browsers even support CSS internal counters (works in Chrome 42.0.x) http://jsfiddle.net/zfsoossx/3/

@hgezim
hgezim commented Apr 10, 2015

Haha, this is awesome :)

@ImJasonH
Owner

@Cash2m Thanks, fixed!

@jbrooksuk

Should probably support strong and em too.

@Jon-Biz
Jon-Biz commented Apr 10, 2015

I'm with capt nemo on this.

@Jeromche

Haha cool. Good update, @jbrooksuk.

@jomo
jomo commented Apr 10, 2015

@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]+\.

@pluma
pluma commented Apr 11, 2015

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

@timmc
timmc commented Apr 11, 2015

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

@Cais
Cais commented Apr 13, 2015

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

@fvsch
fvsch commented Apr 13, 2015

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

@grabcode

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

@OrganicPanda

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,".") ". ";
}
@nghuuphuoc

Very, very nice!

@zoghal
zoghal commented Apr 15, 2015

woow

@theory
theory commented Apr 16, 2015
i::before, i::after, em::before, em::after { content: "*"; }
b::before, b::after, strong::before, strong::after { content: "**"; }
@kruszczynski

That's brilliant!

@myobie
myobie commented Apr 17, 2015

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

@Avelar
Avelar commented Apr 17, 2015

That's Awesome!

@mrmlnc
mrmlnc commented Apr 20, 2015

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

@elky
elky commented Apr 21, 2015

Awesome. How about th tag?

@renestalder

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

@nolim1t
nolim1t commented Apr 23, 2015

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

@jasonkarns

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

@teeheehee

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

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

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

@ChaseFlorell

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

@0xMF
0xMF commented May 14, 2015

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

@ahmetb
ahmetb commented May 15, 2015

imgs?

@tcelestino

amazing!
👏

@daftspaniel

Funky!

@Pierstoval

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

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.

@omeripek
omeripek commented Jun 4, 2015

Awesome :)

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