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

This comment has been minimized.

Show comment
Hide comment
@captn3m0

captn3m0 Apr 10, 2015

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

captn3m0 commented Apr 10, 2015

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

@Zardoz89

This comment has been minimized.

Show comment
Hide comment
@Zardoz89

Zardoz89 Apr 10, 2015

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

Zardoz89 commented Apr 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@HenningCash

HenningCash Apr 10, 2015

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/

HenningCash commented Apr 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@hgezim

hgezim Apr 10, 2015

Haha, this is awesome :)

hgezim commented Apr 10, 2015

Haha, this is awesome :)

@ImJasonH

This comment has been minimized.

Show comment
Hide comment
@ImJasonH

ImJasonH Apr 10, 2015

@Cash2m Thanks, fixed!

Owner

ImJasonH commented Apr 10, 2015

@Cash2m Thanks, fixed!

@jbrooksuk

This comment has been minimized.

Show comment
Hide comment
@jbrooksuk

jbrooksuk Apr 10, 2015

Should probably support strong and em too.

jbrooksuk commented Apr 10, 2015

Should probably support strong and em too.

@jbrooksuk

This comment has been minimized.

Show comment
Hide comment

jbrooksuk commented Apr 10, 2015

@Jon-Biz

This comment has been minimized.

Show comment
Hide comment
@Jon-Biz

Jon-Biz Apr 10, 2015

I'm with capt nemo on this.

Jon-Biz commented Apr 10, 2015

I'm with capt nemo on this.

@Jeromche

This comment has been minimized.

Show comment
Hide comment
@Jeromche

Jeromche Apr 10, 2015

Haha cool. Good update, @jbrooksuk.

Jeromche commented Apr 10, 2015

Haha cool. Good update, @jbrooksuk.

@jomo

This comment has been minimized.

Show comment
Hide comment
@jomo

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

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

This comment has been minimized.

Show comment
Hide comment
@pluma

pluma Apr 11, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@timmc

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

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

This comment has been minimized.

Show comment
Hide comment
@Cais

Cais Apr 13, 2015

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

Cais commented Apr 13, 2015

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

@fvsch

This comment has been minimized.

Show comment
Hide comment
@fvsch

fvsch 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

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

This comment has been minimized.

Show comment
Hide comment
@grabcode

grabcode Apr 14, 2015

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

grabcode commented Apr 14, 2015

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

@OrganicPanda

This comment has been minimized.

Show comment
Hide comment
@OrganicPanda

OrganicPanda Apr 14, 2015

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

OrganicPanda commented Apr 14, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nghuuphuoc

nghuuphuoc Apr 15, 2015

Very, very nice!

nghuuphuoc commented Apr 15, 2015

Very, very nice!

@zoghal

This comment has been minimized.

Show comment
Hide comment
@zoghal

zoghal commented Apr 15, 2015

woow

@theory

This comment has been minimized.

Show comment
Hide comment
@theory

theory Apr 16, 2015

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

theory commented Apr 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@kruszczynski

kruszczynski Apr 17, 2015

That's brilliant!

kruszczynski commented Apr 17, 2015

That's brilliant!

@myobie

This comment has been minimized.

Show comment
Hide comment
@myobie

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

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

This comment has been minimized.

Show comment
Hide comment
@Avelar

Avelar Apr 17, 2015

That's Awesome!

Avelar commented Apr 17, 2015

That's Awesome!

@mrmlnc

This comment has been minimized.

Show comment
Hide comment
@mrmlnc

mrmlnc Apr 20, 2015

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

mrmlnc commented Apr 20, 2015

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

@elky

This comment has been minimized.

Show comment
Hide comment
@elky

elky Apr 21, 2015

Awesome. How about th tag?

elky commented Apr 21, 2015

Awesome. How about th tag?

@renestalder

This comment has been minimized.

Show comment
Hide comment
@renestalder

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

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

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.

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

@nolim1t

This comment has been minimized.

Show comment
Hide comment
@nolim1t

nolim1t Apr 23, 2015

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

nolim1t commented Apr 23, 2015

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

@jasonkarns

This comment has been minimized.

Show comment
Hide comment
@jasonkarns

jasonkarns Apr 23, 2015

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

jasonkarns commented Apr 23, 2015

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

@teeheehee

This comment has been minimized.

Show comment
Hide comment
@teeheehee

teeheehee Apr 25, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@ChaseFlorell

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

This comment has been minimized.

Show comment
Hide comment
@ChaseFlorell

ChaseFlorell May 14, 2015

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

ChaseFlorell commented May 14, 2015

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

@0xMF

This comment has been minimized.

Show comment
Hide comment
@0xMF

0xMF May 14, 2015

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

0xMF commented May 14, 2015

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

@ahmetb

This comment has been minimized.

Show comment
Hide comment
@ahmetb

ahmetb commented May 15, 2015

imgs?

@tcelestino

This comment has been minimized.

Show comment
Hide comment
@tcelestino

tcelestino May 15, 2015

amazing!
👏

tcelestino commented May 15, 2015

amazing!
👏

@daftspaniel

This comment has been minimized.

Show comment
Hide comment
@daftspaniel

daftspaniel commented May 15, 2015

Funky!

@Pierstoval

This comment has been minimized.

Show comment
Hide comment
@Pierstoval

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

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

This comment has been minimized.

Show comment
Hide comment
@afolson

afolson May 21, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@jslegers

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

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.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 4, 2015

Awesome :)

ghost commented Jun 4, 2015

Awesome :)

@hboon

This comment has been minimized.

Show comment
Hide comment
@hboon

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

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