mrcoles / markdown-css

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

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'});

markdown-css's Issues

Support Github flavoured markdown

License Type?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of mrcoles/markdown-css!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mrcoles/markdown-css is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mrcoles/markdown-css",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Ordered list numbers are highlightable

With ordered lists the "list bullets" are not highlightable (as expected), but for some reason, with an ordered list the numbers are highlightable (not expected).

Support for Images

As much as I like kittens... This adds the markdown for images too:

.markdown img {
  display: inline;
  content: "";
  height: 1px
}
.markdown img:before {
  content: "![" attr(alt) "](" attr(src) ")";
  display: inline;
  color: #333333;
}

links are not selectable

http://jsfiddle.net/g9oybu0v/

and not only links - special symbols either

so how am i supposed to use the css - just to see what should be and retype the markup by myself?

BTW your demo here http://mrcoles.com/demo/markdown-css/ has the same issue

Use CSS3’s ch unit for indenting text.

CSS3 introduces the ch unit of length (MDN). This is exactly as much horizontal space as the character 0 occupies, and thus for a monotype font as much horizontal space as any character. By using this unit you could make sure (e.g.) code blocks are indented exactly 4 spaces:

.markdown pre {
  margin-left: 4ch;
}

Because CSS parsers ignore anything they don’t understand it is easy to create fallback methods for units:

.markdown pre {
  margin-left: 36px;
  margin-left: 4ch; /* Only picked up by browsers that know `ch`. */
}

This would make for a much neater aligned text. I’ll see if I can do a pull request later, maybe someone else can get there before me.

Link with Title

.markdown a:before {content:'['}
.markdown a:after {content:'](' attr(href) ')'}
.markdown a[title]:after {content:'](' attr(href) ' "' attr(title) '")'}

Add additional style for the way Markdown editors display Markdown

I am aware, that this is not difficult and that the source is open, I just thought, that would make your project more complete. So it's more a thought, than an issue ;)

Use CSS counters for the Ordered list content prefix

Hi,

I see you currently use "1." everytime, you can solve this more eleagant using:

https://developer.mozilla.org/en-US/docs/CSS/Counters

http://www.w3.org/TR/CSS21/generate.html#counters