25 comments

[ 74.3 ms ] story [ 643 ms ] thread
Any usecases for this?

I was thinking that this could be useful for giving people markdown to copy directly, but css:before and after doesn't get copied.

I'm so gonna use this _somewhere_, just not sure where.

I didn't have any real use cases in mind when I made it, I just wanted to see if it was possible.

In theory you could use it to demonstrate the underlying Markdown for some HTML, but unfortunately I haven't been able to figure out how to make the CSS ::before and ::after content user-selectable[0], so you wouldn't be able to copy it back out to make a simple HTML-to-Markdown converter.

[0] http://stackoverflow.com/questions/19914349/how-can-i-make-g...

the table stuff doesnt work too well either, understandably. if you actually want to do conversion though, check out reMarked.js [1], disclaimer: mine. it's not too heavy, either.

[1] https://github.com/leeoniya/reMarked.js

Yes.

I often find myself using http://markdown-here.com/ to compose an email, and then wanting to get back at the source to send another, slightly modified email, or to insert into a README.md.

This will make my life a lot easier. Just need to package it up into a nice browser toolbar button.

no, because you can't copy paste the tags. they're just visual sugar that isn't actionable.
Complex tables? You could use a WYSIWYG HTML editor to quickly create them, and then use this to convert to MD. That's the only thing I can think of.
Completely useless, you can't even copy and paste
Alternatively, you could say it the browser's job to support copy/paste of content inserted with CSS.
This is almost perfectly useless.

I approve.

I think a more accurate description is that this renders HTML as unrendered Markdown.
Yes. Also, the word elegantly should be somewhere in there.
I don't think it quite makes it to "elegantly" because it's not actually useful markdown. I can't copy it and do anything with it because all the tags disappear. :/
Not nearly as impressive, but I did this using Angular directives a while back: http://embed.plnkr.co/zSjqqh/preview

This is the jQuery README.md rendered as html, then with a series of angular directives to convert that rendered markdown back to what the source would have looked like.

(comment deleted)
It goes to show you how well designed markdown is. It's humane markup but machines can still do fancy stuff with this.
This would actually pretty useful if someone was implementing a Markdown editor using the `contenteditable` HTML attribute. Toggling a class on the editor wrapper element could switch between rendered and non-rendered Markdown. No JS needed.
Of course, it doesn't actually reverse the (lossy) Markdown transformation. For example, the source "9." turns into an ordered list that looks like "1." and CSS won't reverse that.
Lacks handling of <p> and <br>. For <p> prepend (append?) two newlines. For <br>, suffix two spaces.