Time to markdown some markup

Markdown is a great way to easily format plain-text that can be read directly or converted into an HTML document. To name a few use-cases—I use it to write blog posts on this site, you can use it in reddit comments, it’s generally used for README files on github, and the Hack & Tell writeups are written in markdown too.

Since everyone is using markdown to create HTML, I thought it’d be fun to write some CSS that makes HTML look like markdown.

View the demo and check out the source on github.

There’s also a bookmarklet on the demo page, which lets you try out the CSS on any page on the web. It’s fun to try out and gives some insight into how clean the markup is on any page.

Some notes on how it works:

• everything is given a fixed-width font with normal font-weight and style

• a bunch of :before and :after pseudo-elements are used to insert all of the extra characters, which conveniently takes on the same font styles as the text

• links use the attr(href) to dynamically show the hrefs

• ol tags could use a counter, but not incrementing them feels closer to raw markdown — update: I gave into popular demand and merged a pull-request for counters, then I added support to toggle just ones for the hardcore types out there

• to get the repeated content with h1, hr, and blockquote tags, I just made the content declaration really long and relied on overflow:hidden to hide the overflow

• blockquote tags take advantage of using the \\A character for newline in content and white-space:pre to make the new-lines work (since content doesn’t allow HTML tags)

• h1 tags use some quirks related to how display:table-cell works to make it be block-like, but only as wide as the text, unfortunately firefox doesn’t let the position:absolute psuedo-element work, so I override it to display:block for firefox

• hr tags don’t play nicely with pseudo elements in ie8 (that was the only version of ie I tested), but other browsers play nice

• it seems like only opera supports psuedo elements with img tags, so I just left images to look like regular images

Enjoy! Let me know if you find any bugs or have any improvements. Also, make sure to view the markdown.css example.

Also, if you haven’t gotten enough markdown fixins yet, then take a gander at my readmd markdown beautifier.

Converation on hackernews.