Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
CSS for making regular HTML look like plain-text markdown.
CSS Shell
Branch: master

Merge pull request #12 from Grahack/patch-1

Typo: psuedo -> pseudo
latest commit f99ac9675d
@mrcoles authored

README.md

Markdown.css

A perverse way to make your HTML look like markdown, purely via CSS.

Use the markdown.css file to make regular HTML look like plain-text markdown. No JavaScript hacks are needed. View the demo to see what I’m talking about.

The styles are written in markdown.less. If you want to hack on this project, you can convert the less files to css with build.sh or run the watch_less.sh script to have it auto-update when the files change.

This is built to support all of the standard markdown elements with a few minor issues.

Issues:

  • repeats for h1, hr, and blockquote use characters that are repeated 100 times, so width greater than 100 characters or a blockquote more than a 100 lines will not be perfect
  • pseudo elements (:before, :after) don’t work with images (except opera), so I didn’t support making images look like markdown

Bookmarklet

Try out the experimental bookmarklet, linked at the bottom of the demo. Created in the bookmarklet generator with the following code and a jquery include:

$('link[rel=stylesheet]').add('style').remove();
$('[style]').attr('style', '');
$('head').append('<link rel="stylesheet" href="http://mrcoles.com/media/test/markdown-css/markdown.css" type="text/css" />');
$('body').addClass('markdown').css({width: '600px', margin: '2em auto', 'word-wrap': 'break-word'});
$('a img').css({'max-height': '1em', 'max-width': '1em'});
Something went wrong with that request. Please try again.