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
- Item 1
- Item 2
- Item 3
Unordered
- Item 1
- Item 2
- Item 3
Mixed, Nested Lists
- Item 1
- Item 2
- Ordered Items:
- Item A
- Item B
- Item C
If you prefer one of Markdown's other bullet characters over -
, that's
easily changed at the top of the CSS file.