Markdown.css – make HTML look like plain-text (opens in new tab)

(mrcoles.com)

420 pointsmrcoles13y ago89 comments

89 comments

73 comments · 24 top-level

TwistedWeasel13y ago· 9 in thread

It's interesting and seems well implemented but I don't understand the use case? Why would you need this?

If you want plain text inside HTML isn't what the <pre> tag is for?

mrcolesOP13y ago

Mostly because it's fun in a nerdy way, and it was an interesting challenge to implement.

I decided to use it for a demos page on my site: http://mrcoles.com/demo/

Also, there's a bookmarklet at the top of the markdown-css demo that let's you apply the markdown styles to any page, which is like a harder-to-read version of readability or a quick way to see how well layed out the markup is on any page.

MJR13y ago

As a developer you may not want it - but my friends who are copywriters, editors and content strategists will LOVE this. A simple way to grab existing web content as markdown, which many are already using to write and edit their content.

shmageggy13y ago

The problem (at least for me on FF18/Win7) is that you can't just copy/paste the converted markdown, since it is just a display trick, not actual parsed and generated raw text.

2 more replies

voyou13y ago

But this doesn't convert HTML to Markdown (there's already pandoc for that), it displays it as if it were Markdown. It's a clever example of what you can do with CSS, as well as perhaps poking fun at the current popularity of systems like Markdown which artificially restrict us to the IO capabilities of 70s VTs.

3 more replies

TwistedWeasel13y ago

That makes more sense to me now. Thinking about it I see it being useful to help with some currently painful tasks like converting old wiki content that has a non-standard wiki markup syntax (or no markup at all) into markdown.

homosaur13y ago

Well, maybe you want the HTML formatting without the styles or all the CSS classes. Say you wanted to do something like grab all the docs off a website and then apply your own styling or put them on an internal reference. I can see that being a good use case to allow that for open documentation.

raganwald13y ago

Maybe it's like "Readbility" and those other ways of de-cluttering a web page or standardizing your style as a reader? If you have a browser that is set up to let you choose a style sheet for display, you now have a "distraction-free reading environment."

I, for one, will be adding this to http://ristrettolo.gy and http://combinators.info. Markup -> HTML -> Markup. It's a crazy world!

RickHull13y ago

Markup -> HTML -> Markup

    s/Markup/Markdown/   # ?

kilovoltaire13y ago

note that it's markdown, not just plain text.

i think it's mostly just for fun though / as an impressive CSS trick.

samwillis13y ago· 5 in thread

Firstly this is awsome!

As much as I like kittens... This adds the markdown for images too:

    .markdown img {
      display: inline;
      content: "";
    }
    .markdown img:before {
      content: "![" attr(alt) "](" attr(src) ")";
      display: inline;
      color: #333333;
    }

The trick to make it work with images is the `content: "";` on the img element to stop the browser from treating it as an image.

EDIT:

See it here: http://jsfiddle.net/F2mjs/

Anyone know how to make the link clickable?

67726e13y ago

It worked for me on Chrome 24, Opera 12, Safari 6, but it doesn't appear to work on Firefox 18.

mrcolesOP13y ago

You're using opera, right?

This was already in my code, but I commented out, maybe I should just let it be in there real quick before opera changes to webkit: https://github.com/mrcoles/markdown-css/blob/016bf0863867aed...

If not opera, lmk what browser you're using.

samwillis13y ago

This is working in Chrome 24.

Oh, yes it is. Its in the .less file, I had not spotted that.

EDIT:

You need `content: "";` in the less file and it should work.

1 more reply

67726e13y ago

Wow. Was just looking into this myself. Great find.

basicallydan13y ago

Nicely done sir. Pull request ahoy!

leeoniya13y ago· 5 in thread

shameless plug: client-side (or node) html > markdown, like actual conversion

demo: http://leeoniya.github.com/reMarked.js/

repo: https://github.com/leeoniya/reMarked.js

jeswin13y ago

Nice! I am working on an editor (based on content-editable) which translates to markdown. If your script handles invalid html I might as well use yours.

leeoniya13y ago

it relies on the client's html > DOM conversion, so in a sense it does. but it does not have a self-contained html parser.

dazmax13y ago

Is that available as a bookmarklet, where you can select content on an existing page and extract markdown to the clipboard?

leeoniya13y ago

it'd be fairly easy to make one, but i imagine it would have limited utility since the entire content of the page is rarely what you want. how would you go about selecting which portion you're interested in? also, i'm not certain a bookmarklet would have direct clipboard access due to security, i could be wrong tho.

feel free to open up an issue on github to discuss the idea and implementation details further.

1 more reply

mrcolesOP13y ago

cool!

kzrdude13y ago· 4 in thread

I still wonder why Markdown is so popular while reStructuredText is not. I find the latter much easier to read, it looks better in both plain and rendered format (and rst2pdf makes nice docs).

ianstormtaylor13y ago

Well, one thing that definitely isn't helping is its horrible name. And as evidence, the very first thing on their site:

"'reStructuredText' is ONE word, not two!"

I'm definitely never going to type out that entire word, so now do I abbreviate it to reST? or ReST like some people on the site seem to be doing? It'll just get confused with REST in Google searches...

roc13y ago

Markdown is 'lighter' and aimed at the more general case: churning out lightly-formatted text quickly, with as few 'rules' as possible, with page layout concerns addressed by templates defined elsewhere.

reStructuredText is 'heavier' and only really an improvement over Markdown if you're trying to embed page layout into the text. Which fewer people are.

kzrdude13y ago

You are right. I think I prefer reST because it produces documents. It's not a quick way to add markup, it's a quick way to structure a document (and provide links, sections, inline code etc).

antihero13y ago

Personally I found the RST documentation quite inaccessible for doing simple things.

danso13y ago· 4 in thread

Finally. A proper use-case for displaying content with the :before selector.

tantalor13y ago

Then it's only fitting that the use-case is completely useless.

ceejayoz13y ago

IIRC, I saw :before used to great effect in print stylesheets for turning links into plain-text URLs.

wubbfindel13y ago

Personally I think to add an icon (using an icon font or possibly a data uri) is a great (and proper) use-case for displaying content with either the :before or :after selector.

kumarharsh13y ago

This is not a "proper" use case. I am not able to understand why one would want to "view" Markup in Markdown?

president13y ago· 4 in thread

Awesome project. Is there anything that can actually convert HTML to Markdown though?

loevborg13y ago

The wonderful pandoc (http://johnmacfarlane.net/pandoc/README.html#general-options) can, along with many other things.

janerik13y ago

I use pandoc[1] for this.

  curl -s example.com | pandoc -f html -t markdown -

[1]: http://johnmacfarlane.net/pandoc/

fiddlosopher13y ago

This works too:

    pandoc -t markdown http://example.com

1 more reply

gridaphobe13y ago

http://johnmacfarlane.net/pandoc/

mzs13y ago· 4 in thread

Cool, but the numbered list has everything lablled as '1.' for me: ff esr 10.0.12

mrcolesOP13y ago

Yeah, technically markdown doesn't need the numbers to be incremented, so I thought it'd be more fun to explicitly not use counters. Maybe it's too confusing though. There's a discussion about it here: https://github.com/mrcoles/markdown-css/issues/1

mrcolesOP13y ago

UPDATE: I ended up merging that in and making the ones toggle-able, and then added a toggle link into the demo so you can see both http://mrcoles.com/demo/markdown-css/

theon14413y ago

>in markdown, the actual numbers don’t matter

That's to be expected, you make ordered lists like that in markdown :)

mzs13y ago

Ha, I didn't know you could just use any number until just now, makes sense, doh! Thanks.

1 more reply

kilovoltaire13y ago· 3 in thread

very clever, particularly how the width of the equals signs below an h1 is made to match the text width using hidden overflow:

https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...

mrcolesOP13y ago

The magic is the quirks in how `display: table-cell` makes it like a block, but only as wide as the text, then the pseudo element with equals signs is positioned absolutely inside. Fortunately, most browsers allow this, but firefox doesn't let things be positioned absolute inside a `table-cell`, so I make FF just fall back to `display: block` https://github.com/mrcoles/markdown-css/blob/master/markdown...

kilovoltaire13y ago

interesting!

in the same vein as the h1 equals, i like the blockquote brackets implementation as well:

https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...

1 more reply

crazygringo13y ago

That was definitely the most impressive bit for me too. I thought, how on earth was that done? Very clever.

It's a shame it doesn't work for copy-paste, but honestly, it's probably even easier to write a reverse-markdown script than to figure out how to do it with CSS!

molf13y ago· 3 in thread

Pretty cool. Would it also be possible to include the markdown markup when copying the text?

mrcolesOP13y ago

the after and before pseudo elements are kind of weird. I think for it to work with copy-paste I'd have to include some JS to look at the selection, reverse markdown it, and then get it into your clipboard.

goldfeld13y ago

Quite frankly that would be the most common useful use case for this, in my opinion. In any case this is some great css hacking!

smj211813y ago

Agreed, would love to use this to generate markdown!

Foomandoonian13y ago· 2 in thread

Same as ReMarkdown? http://fvsch.com/code/remarkdown/

mrcolesOP13y ago

Wow, that's really similar with very similar approaches. The internet is a great way to find out you're not very original. I'll add a link to that project from mine.

Foomandoonian13y ago

Kudos.

wyck13y ago· 2 in thread

I don't understand this, Markdown is meant for writing.

Why don't you just output real markdown with something like Jekyll, Markdown Server (node) or Showdown?

mrcolesOP13y ago

It’s meant as an interesting CSS hack to make markup look like markdown, but still function as regular HTML (including having things like links still work). There are thousands of things that compile markdown to HTML, that's not at all what this does. Try clicking on the different tabs to show the different states or the demo link to the left of them—maybe that'll make more sense?

wyck13y ago

I still don't get it, why should I make something look like markdown when it can be actual markdown. Links work in markdown, you can eve use something like maruku to have html elements (divs, id's etc) in actual markdown.

Markdown is portable, fake markdown isn't.

67726e13y ago· 2 in thread

Just curious, but what version of Opera did you get `:before` & `:after` working on? I was just trying this out on the latest Opera and couldn't get it to work.

mrcolesOP13y ago

Works for me on opera 12.14 on Mac OS X. What version and OS are you using?

67726e13y ago

I'm also using 12.14 on OS X 10.7.5

Opera/9.80 (Macintosh; Intel Mac OS X 10.7.5) Presto/2.12.388 Version/12.14

1 more reply

unfoldedorigami13y ago· 1 in thread

Just submitted a pull request to auto-increment the ordered list numbering so it doesn't repeat 1. over and over.

https://github.com/mrcoles/markdown-css/pull/4

chc13y ago

I'm pretty sure that was an intentional design choice to make the text look more like Markdown. Ordered lists increment by default — they went out of their way to disable that.

lanna13y ago· 1 in thread

I'm much better at HTML than Markdown. I totally could use this when I'm forced to write Markdown.

mbetter13y ago

You can't, actually. Use Pandoc.

almost13y ago

This is cool :) I do a similar thing on my site[1]to make it look like Org-mode files (which is what I use to write it). I enjoy the fact that so much processing goes into making it look just like it did to begin with :p

1: http://almostobsolete.net

kmf13y ago

This is awesome. Projects like this make me appreciate the fortitude of Markdown. John has made a project that essentially got it right on the first try[1], with very few patches or additions. In a world of software development where I'm running `gem update` all the time, it's nice to have something like Markdown which really knocked it out of the park in one try. I don't have to check the docs to know if the syntax for URL linking changed, and your implementation isn't going to be any different from mine. It's nice to have a standard like that everyone can rally behind.

[1]: I'm aware of projects like MMD, which AFAIK are primarily add-ons to the original Markdown syntax. I also realize that Markdown isn't perfect: Jeff Atwood has a good write-up on this from late 2009 -- http://www.codinghorror.com/blog/2009/12/responsible-open-so...

kevinburke13y ago

Heh, I did something a year ago to do the opposite - take a plain markdown file and give it some styles.

http://kevinburke.bitbucket.org/markdowncss/

HN discussion: http://news.ycombinator.com/item?id=2827892

sgt13y ago

I think could be interesting for Phrack as they are (or should be) modernizing their e-zine format.

In that way, the old school boys can still keep their pure-ASCII, and others may wish to apply some other CSS to make it more pleasant to read.

dfc13y ago

This is nice. The one use case its missing for me is copy/paste with formatting. Currently I use:

    $ pandoc -f html -t markdown http://example.org/page.htm > page.mdwn

dergachev13y ago

If you're interested in this, you should also know about Showdown.js, a library that converts markdown into HTML client-side: https://github.com/coreyti/showdown

For an example use, view the source of http://dergachev.github.com/pin-screenshot-bookmarklet

vysakh013y ago

Pretty neat and cool! Seeing this i got reminded how awesome markdown is and i just played around with my vim markdown plugin after long time.

drcoopster13y ago

I find this clever. Use cases aside, it's fun.

asimjalis13y ago

This is hilarious. Thank you :)

huhsamovar13y ago

Does anybody else think we've come full circle now?

I don't see how this is at all useful. Just upload a .md file.

j / k navigate · click thread line to collapse

89 comments

73 comments · 24 top-level

TwistedWeasel13y ago· 9 in thread

It's interesting and seems well implemented but I don't understand the use case? Why would you need this?

If you want plain text inside HTML isn't what the <pre> tag is for?

mrcolesOP13y ago

Mostly because it's fun in a nerdy way, and it was an interesting challenge to implement.

I decided to use it for a demos page on my site: http://mrcoles.com/demo/

MJR13y ago

shmageggy13y ago

The problem (at least for me on FF18/Win7) is that you can't just copy/paste the converted markdown, since it is just a display trick, not actual parsed and generated raw text.

2 more replies

voyou13y ago

3 more replies

TwistedWeasel13y ago

homosaur13y ago

raganwald13y ago

I, for one, will be adding this to http://ristrettolo.gy and http://combinators.info. Markup -> HTML -> Markup. It's a crazy world!

RickHull13y ago

Markup -> HTML -> Markup

    s/Markup/Markdown/   # ?

kilovoltaire13y ago

note that it's markdown, not just plain text.

i think it's mostly just for fun though / as an impressive CSS trick.

samwillis13y ago· 5 in thread

Firstly this is awsome!

As much as I like kittens... This adds the markdown for images too:

    .markdown img {
      display: inline;
      content: "";
    }
    .markdown img:before {
      content: "![" attr(alt) "](" attr(src) ")";
      display: inline;
      color: #333333;
    }

The trick to make it work with images is the `content: "";` on the img element to stop the browser from treating it as an image.

EDIT:

See it here: http://jsfiddle.net/F2mjs/

Anyone know how to make the link clickable?

67726e13y ago

It worked for me on Chrome 24, Opera 12, Safari 6, but it doesn't appear to work on Firefox 18.

mrcolesOP13y ago

You're using opera, right?

This was already in my code, but I commented out, maybe I should just let it be in there real quick before opera changes to webkit: https://github.com/mrcoles/markdown-css/blob/016bf0863867aed...

If not opera, lmk what browser you're using.

samwillis13y ago

This is working in Chrome 24.

Oh, yes it is. Its in the .less file, I had not spotted that.

EDIT:

You need `content: "";` in the less file and it should work.

1 more reply

67726e13y ago

Wow. Was just looking into this myself. Great find.

basicallydan13y ago

Nicely done sir. Pull request ahoy!

leeoniya13y ago· 5 in thread

shameless plug: client-side (or node) html > markdown, like actual conversion

demo: http://leeoniya.github.com/reMarked.js/

repo: https://github.com/leeoniya/reMarked.js

jeswin13y ago

Nice! I am working on an editor (based on content-editable) which translates to markdown. If your script handles invalid html I might as well use yours.

leeoniya13y ago

it relies on the client's html > DOM conversion, so in a sense it does. but it does not have a self-contained html parser.

dazmax13y ago

Is that available as a bookmarklet, where you can select content on an existing page and extract markdown to the clipboard?

leeoniya13y ago

feel free to open up an issue on github to discuss the idea and implementation details further.

1 more reply

mrcolesOP13y ago

cool!

kzrdude13y ago· 4 in thread

I still wonder why Markdown is so popular while reStructuredText is not. I find the latter much easier to read, it looks better in both plain and rendered format (and rst2pdf makes nice docs).

ianstormtaylor13y ago

Well, one thing that definitely isn't helping is its horrible name. And as evidence, the very first thing on their site:

"'reStructuredText' is ONE word, not two!"

roc13y ago

reStructuredText is 'heavier' and only really an improvement over Markdown if you're trying to embed page layout into the text. Which fewer people are.

kzrdude13y ago

You are right. I think I prefer reST because it produces documents. It's not a quick way to add markup, it's a quick way to structure a document (and provide links, sections, inline code etc).

antihero13y ago

Personally I found the RST documentation quite inaccessible for doing simple things.

danso13y ago· 4 in thread

Finally. A proper use-case for displaying content with the :before selector.

tantalor13y ago

Then it's only fitting that the use-case is completely useless.

ceejayoz13y ago

IIRC, I saw :before used to great effect in print stylesheets for turning links into plain-text URLs.

wubbfindel13y ago

Personally I think to add an icon (using an icon font or possibly a data uri) is a great (and proper) use-case for displaying content with either the :before or :after selector.

kumarharsh13y ago

This is not a "proper" use case. I am not able to understand why one would want to "view" Markup in Markdown?

president13y ago· 4 in thread

Awesome project. Is there anything that can actually convert HTML to Markdown though?

loevborg13y ago

The wonderful pandoc (http://johnmacfarlane.net/pandoc/README.html#general-options) can, along with many other things.

janerik13y ago

I use pandoc[1] for this.

  curl -s example.com | pandoc -f html -t markdown -

[1]: http://johnmacfarlane.net/pandoc/

fiddlosopher13y ago

This works too:

    pandoc -t markdown http://example.com

1 more reply

gridaphobe13y ago

http://johnmacfarlane.net/pandoc/

mzs13y ago· 4 in thread

Cool, but the numbered list has everything lablled as '1.' for me: ff esr 10.0.12

mrcolesOP13y ago

UPDATE: I ended up merging that in and making the ones toggle-able, and then added a toggle link into the demo so you can see both http://mrcoles.com/demo/markdown-css/

theon14413y ago

>in markdown, the actual numbers don’t matter

That's to be expected, you make ordered lists like that in markdown :)

mzs13y ago

Ha, I didn't know you could just use any number until just now, makes sense, doh! Thanks.

1 more reply

kilovoltaire13y ago· 3 in thread

very clever, particularly how the width of the equals signs below an h1 is made to match the text width using hidden overflow:

https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...

mrcolesOP13y ago

kilovoltaire13y ago

interesting!

in the same vein as the h1 equals, i like the blockquote brackets implementation as well:

https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...

1 more reply

crazygringo13y ago

That was definitely the most impressive bit for me too. I thought, how on earth was that done? Very clever.

It's a shame it doesn't work for copy-paste, but honestly, it's probably even easier to write a reverse-markdown script than to figure out how to do it with CSS!

molf13y ago· 3 in thread

Pretty cool. Would it also be possible to include the markdown markup when copying the text?

mrcolesOP13y ago

goldfeld13y ago

Quite frankly that would be the most common useful use case for this, in my opinion. In any case this is some great css hacking!

smj211813y ago

Agreed, would love to use this to generate markdown!

Foomandoonian13y ago· 2 in thread

Same as ReMarkdown? http://fvsch.com/code/remarkdown/

mrcolesOP13y ago

Wow, that's really similar with very similar approaches. The internet is a great way to find out you're not very original. I'll add a link to that project from mine.

Foomandoonian13y ago

Kudos.

wyck13y ago· 2 in thread

I don't understand this, Markdown is meant for writing.

Why don't you just output real markdown with something like Jekyll, Markdown Server (node) or Showdown?

mrcolesOP13y ago

wyck13y ago

Markdown is portable, fake markdown isn't.

67726e13y ago· 2 in thread

Just curious, but what version of Opera did you get `:before` & `:after` working on? I was just trying this out on the latest Opera and couldn't get it to work.

mrcolesOP13y ago

Works for me on opera 12.14 on Mac OS X. What version and OS are you using?

67726e13y ago

I'm also using 12.14 on OS X 10.7.5

Opera/9.80 (Macintosh; Intel Mac OS X 10.7.5) Presto/2.12.388 Version/12.14

1 more reply

unfoldedorigami13y ago· 1 in thread

Just submitted a pull request to auto-increment the ordered list numbering so it doesn't repeat 1. over and over.

https://github.com/mrcoles/markdown-css/pull/4

chc13y ago

I'm pretty sure that was an intentional design choice to make the text look more like Markdown. Ordered lists increment by default — they went out of their way to disable that.

lanna13y ago· 1 in thread

I'm much better at HTML than Markdown. I totally could use this when I'm forced to write Markdown.

mbetter13y ago

You can't, actually. Use Pandoc.

almost13y ago

1: http://almostobsolete.net

kmf13y ago

kevinburke13y ago

Heh, I did something a year ago to do the opposite - take a plain markdown file and give it some styles.

http://kevinburke.bitbucket.org/markdowncss/

HN discussion: http://news.ycombinator.com/item?id=2827892

sgt13y ago

I think could be interesting for Phrack as they are (or should be) modernizing their e-zine format.

In that way, the old school boys can still keep their pure-ASCII, and others may wish to apply some other CSS to make it more pleasant to read.

dfc13y ago

This is nice. The one use case its missing for me is copy/paste with formatting. Currently I use:

    $ pandoc -f html -t markdown http://example.org/page.htm > page.mdwn

dergachev13y ago

If you're interested in this, you should also know about Showdown.js, a library that converts markdown into HTML client-side: https://github.com/coreyti/showdown

For an example use, view the source of http://dergachev.github.com/pin-screenshot-bookmarklet

vysakh013y ago

Pretty neat and cool! Seeing this i got reminded how awesome markdown is and i just played around with my vim markdown plugin after long time.

drcoopster13y ago

I find this clever. Use cases aside, it's fun.

asimjalis13y ago

This is hilarious. Thank you :)

huhsamovar13y ago

Does anybody else think we've come full circle now?

I don't see how this is at all useful. Just upload a .md file.

j / k navigate · click thread line to collapse