https://github.com/mrcoles/markdown-css

CSS for making regular HTML look like plain-text markdown.
https://github.com/mrcoles/markdown-css

Last synced: 6 days ago
JSON representation

CSS for making regular HTML look like plain-text markdown.

• Host: GitHub
• URL: https://github.com/mrcoles/markdown-css
• Owner: mrcoles
• License: mit
• Created: 2013-02-06T06:06:21.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2020-10-02T13:12:55.000Z (over 4 years ago)
• Last Synced: 2025-01-29T10:13:32.303Z (13 days ago)
• Language: CSS
• Homepage: http://mrcoles.com/demo/markdown-css/
• Size: 28.3 KB
• Stars: 1,432
• Watchers: 47
• Forks: 167
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

• my-awesome-github-stars - mrcoles/markdown-css - CSS for making regular HTML look like plain-text markdown. (CSS)
• Awesome-CSS-Resources - markdown-css: - text markdown. (Frameworks / Resources / M)

README

        
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](https://mrcoles.com/demo/markdown-css/) 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](http://daringfireball.net/projects/markdown/basics) 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](http://mrcoles.com/media/test/markdown-css/). Created in the [bookmarklet generator](http://mrcoles.com/bookmarklet) with the following code and a jquery include:

    $('link[rel=stylesheet]').add('style').remove();

    $('[style]').attr('style', '');

    $('head').append('');

    $('body').addClass('markdown').css({width: '600px', margin: '2em auto', 'word-wrap': 'break-word'});

    $('a img').css({'max-height': '1em', 'max-width': '1em'});