Show HN: CSS to render Markdown as unrendered Markdown | Hacker News Reader

Show HN: CSS to render Markdown as unrendered Markdown

gist.github.com

161 pointsImJasonH23 comments

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.

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

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.

It goes to show you how well designed markdown is. It's humane markup but machines can still do fancy stuff with this.

Hard to beat Org though.

Completely useless, you can't even copy and paste

Classic HN comment

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

Reply on news.ycombinator.com