This is pretty nice for a "toggle source" feature. I added the use of CSS counters: https://gist.github.com/jbrooksuk/2d6989c35c77bf0c62f9

Except it excludes the css content when you copy it, so it wouldn't really work for that feature.

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. :/

See also ReMarkdown: http://fvsch.com/code/remarkdown/

I'm sure there was another one too. I was going to make a WordPress theme with it at the time, but never got around to it.

You can go in the opposite direction with markdown.css too: http://kevinburke.bitbucket.org/markdowncss/

This is almost perfectly useless.

I approve.

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.

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.

Not super practical, but I use [something similar on my site](http://makenosound.com/2012/10/07/going-paperless.html) as a stylistic thing.

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.

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.

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.

Lacks handling of <p> and <br>. For <p> prepend (append?) two newlines. For <br>, suffix two spaces.

Hard to beat Org though.

Alternatively, you could say it the browser's job to support copy/paste of content inserted with CSS.

Classic HN comment