Hacker News new | past | comments | ask | show | jobs | submit login

Firstly this is awsome!

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

    .markdown img {
      display: inline;
      content: "";
    }
    .markdown img:before {
      content: "![" attr(alt) "](" attr(src) ")";
      display: inline;
      color: #333333;
    }
The trick to make it work with images is the `content: "";` on the img element to stop the browser from treating it as an image.

EDIT:

See it here: http://jsfiddle.net/F2mjs/

Anyone know how to make the link clickable?




It worked for me on Chrome 24, Opera 12, Safari 6, but it doesn't appear to work on Firefox 18.


You're using opera, right?

This was already in my code, but I commented out, maybe I should just let it be in there real quick before opera changes to webkit: https://github.com/mrcoles/markdown-css/blob/016bf0863867aed...

If not opera, lmk what browser you're using.


This is working in Chrome 24.

Oh, yes it is. Its in the .less file, I had not spotted that.

EDIT:

You need `content: "";` in the less file and it should work.


Oh, interesting. Chrome does play nice with that.

Also, it looks like maybe you have to make the img content "", in order for the :before to work—otherwise it doesn't show up, at least in chrome, and with that demo it appears as nothing at all in firefox. It's a cruel world…

In the bookmarklet (included at top of demo) I do an extra step to make images inside links smaller and appear inside the link markdown—not what you were getting at, but it is a little something something.


Wow. Was just looking into this myself. Great find.


Nicely done sir. Pull request ahoy!




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: