4 ms·
Firstly this is awsome! As much as I like kittens... This adds the markdown for images too: .markdown img { display: inline; content: "";
by samwillis 14y ago
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/ http://jsfiddle.net/F2mjs/
Anyone know how to make the link clickable?
- basicallydan 14y agoNicely done sir. Pull request ahoy!
- 67726e 14y agoWow. Was just looking into this myself. Great find.
- mrcoles 14y agoYou'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/016bf0863867aed0428bcfb8256d43863af0a09b/markdown.less#L191 https://github.com/mrcoles/markdown-css/blob/016bf0863867aed... If not opera, lmk what browser you're using.
- samwillis 14y agoThis 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.
- mrcoles 14y agoOh, 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.
- 67726e 14y agoIt worked for me on Chrome 24, Opera 12, Safari 6, but it doesn't appear to work on Firefox 18.