13 February 2013
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.
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
:afterpseudo-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:hiddento hide the overflow
blockquote tags take advantage of using the
\\Acharacter for newline in content and
white-space:preto make the new-lines work (since content doesn’t allow HTML tags)
h1 tags use some quirks related to how
display:table-cellworks to make it be block-like, but only as wide as the text, unfortunately firefox doesn’t let the
position:absolutepsuedo-element work, so I override it to
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.