Markdown.css

Write HTML, and display it as Markdown! It's Markdown… backwards.


In other words, with Markdown.css, this HTML…

This <strong>is</strong> example HTML.

…would be styled like this:

This is example HTML.

Scroll down for more examples.


Yes, this is sort of a silly project, but it was a fun way to spend a couple of hours. (Besides, someday I won't want my site to look like Markdown anymore, and I won't have to touch my HTML to fix that. It's CSS doing what CSS does best!)

Markdown.css is in the public domain, and can be used by anyone for any purpose.

Get it here.

Examples

Inline Text Formatting

Supported formatting includes italic, bold, and strikethrough. (If you prefer underscores over asterisks, there's a CSS variable you can change.)

Inline <code/> is supported, too.

Block Formatting

Code blocks are also supported, and can be styled with fences (shown below), or without:

/**
 * markdown.css
 */

Let's not forget about blockquotes. Nest as many as you like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit.

Lists

Ordered

  1. Item 1
  2. Item 2
  3. Item 3

Unordered

Mixed, Nested Lists

If you prefer one of Markdown's other bullet characters over -, that's easily changed at the top of the CSS file.