Fork me on GitHub
mrcoles.com

Markdown.css

CSS to make HTML markup look like plain-text markdown.

The example below shows HTML that looks like markdown because of the markdown.css file. Click on the other options to also see what it looks like with normal styling & as raw HTML.

Also, try out the experimental markdownify bookmarklet!

HTML that looks like markdown

When this section is styled by markdown.css it looks like plain-text, despite being HTML. Inspect it with firebug or click on <HTML/> to see the markup.

A strong tag and an em tag get styled like so.

How about a link to my site?

H2 header

Lists

  • they look like this
  • it’s how you’d format them in pure markdown, if you took the time to indent when it wrapped to a new line.

Ordered lists

  1. here’s one line from a numbered list
  2. here’s another
  3. in markdown, the actual numbers don’t matter—you can toggle this with the class markdown-ones

Block quotes

This is a blockquote that extends
to multiple lines.

With repeating email-style angle brackets.

Code blocks

(function() {
    console.log('code blocks indent four spaces');
})()

Different headers

h4 header

h5 header
h6 header

That’s an hr above. It just works!

However, images will still look like images. Deal with it.

kitten

Made by Peter Coles /
aka @lethys /
code on github

Get the markdown.css now!

Since sharing this with people, I have learned about an older markdown CSS project that does the same sort of things in a very similar way. So it goes. Great job, Florent!