Markdown.css – make HTML look like plain-text

Firstly this is awsome!<p>As much as I like kittens... This adds the markdown for images too:<p><pre><code> .markdown img { display: inline; content: ""; } .markdown img:before { content: "![" attr(alt) "](" attr(src) ")"; display: inline; color: #333333; } </code></pre> 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.<p>EDIT:<p>See it here: <a href="http://jsfiddle.net/F2mjs/" rel="nofollow">http://jsfiddle.net/F2mjs/</a><p>Anyone know how to make the link clickable?

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<p>1: <a href="http://almostobsolete.net" rel="nofollow">http://almostobsolete.net</a>

very clever, particularly how the width of the equals signs below an h1 is made to match the text width using hidden overflow:<p><a href="https://github.com/mrcoles/markdown-css/blob/0d00981143172aad4f9939f6deed8106ca4000b5/markdown.css#L61" rel="nofollow">https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...</a>

It's interesting and seems well implemented but I don't understand the use case? Why would you need this?<p>If you want plain text inside HTML isn't what the &#60;pre&#62; tag is for?

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` <i>all</i> 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 <i>your</i> implementation isn't going to be any different from mine. It's nice to have a standard like that everyone can rally behind.<p>[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 -- <a href="http://www.codinghorror.com/blog/2009/12/responsible-open-source-code-parenting.html" rel="nofollow">http://www.codinghorror.com/blog/2009/12/responsible-open-so...</a>

shameless plug: client-side (or node) html &#62; markdown, like <i>actual</i> conversion<p>demo: <a href="http://leeoniya.github.com/reMarked.js/" rel="nofollow">http://leeoniya.github.com/reMarked.js/</a><p>repo: <a href="https://github.com/leeoniya/reMarked.js" rel="nofollow">https://github.com/leeoniya/reMarked.js</a>

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

Heh, I did something a year ago to do the opposite - take a plain markdown file and give it some styles.<p><a href="http://kevinburke.bitbucket.org/markdowncss/" rel="nofollow">http://kevinburke.bitbucket.org/markdowncss/</a><p>HN discussion: <a href="http://news.ycombinator.com/item?id=2827892" rel="nofollow">http://news.ycombinator.com/item?id=2827892</a>

Same as ReMarkdown? <a href="http://fvsch.com/code/remarkdown/" rel="nofollow">http://fvsch.com/code/remarkdown/</a>

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

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

I think could be interesting for Phrack as they are (or should be) modernizing their e-zine format.<p>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.

Just submitted a pull request to auto-increment the ordered list numbering so it doesn't repeat 1. over and over.<p><a href="https://github.com/mrcoles/markdown-css/pull/4" rel="nofollow">https://github.com/mrcoles/markdown-css/pull/4</a>

This is nice. The one use case its missing for me is copy/paste with formatting. Currently I use:<p><pre><code> $ pandoc -f html -t markdown http://example.org/page.htm &#62; page.mdwn</code></pre>

If you're interested in this, you should also know about Showdown.js, a library that converts markdown into HTML client-side: <a href="https://github.com/coreyti/showdown" rel="nofollow">https://github.com/coreyti/showdown</a><p>For an example use, view the source of <a href="http://dergachev.github.com/pin-screenshot-bookmarklet" rel="nofollow">http://dergachev.github.com/pin-screenshot-bookmarklet</a>

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

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

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.

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

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

I don't understand this, Markdown is meant for writing.<p>Why don't you just output real markdown with something like Jekyll, Markdown Server (node) or Showdown?

This is hilarious. Thank you :)

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

Does anybody else think we've come full circle now?<p>I don't see how this is at all useful. Just upload a .md file.