5 ms·

Show HN: CSS to render Markdown as unrendered Markdown

161 points by ImJasonH 12y ago

captn3m0 12y ago
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.
- ImJasonH 12y ago
  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-generated-content-selectable http://stackoverflow.com/questions/19914349/how-can-i-make-g...
  - leeoniya 12y ago
    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 https://github.com/leeoniya/reMarked.js
- anoother 12y ago
  Yes. I often find myself using http://markdown-here.com/ 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.
  - masukomi 12y ago
    no, because you can't copy paste the tags. they're just visual sugar that isn't actionable.
- stronglikedan 12y ago
  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.
- makenosound 12y ago
  Not super practical, but I use [something similar on my site](http://makenosound.com/2012/10/07/going-paperless.html http://makenosound.com/2012/10/07/going-paperless.html) as a stylistic thing.
bevacqua 12y ago
Completely useless, you can't even copy and paste
- _august 12y ago
  Alternatively, you could say it the browser's job to support copy/paste of content inserted with CSS.
- artursapek 12y ago
  Classic HN comment
Foomandoonian 12y ago
See also ReMarkdown: http://fvsch.com/code/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/ http://kevinburke.bitbucket.org/markdowncss/
neckro23 12y ago
This is almost perfectly useless. I approve.
jbrooksuk 12y ago
This is pretty nice for a "toggle source" feature. I added the use of CSS counters: https://gist.github.com/jbrooksuk/2d6989c35c77bf0c62f9 https://gist.github.com/jbrooksuk/2d6989c35c77bf0c62f9
- rkuykendall-com 12y ago
  Except it excludes the css content when you copy it, so it wouldn't really work for that feature.
  - deleted 12y ago
    [deleted]
michaelmior 12y ago
I think a more accurate description is that this renders HTML as unrendered Markdown.
- elwell 12y ago
  Yes. Also, the word elegantly should be somewhere in there.
  - masukomi 12y ago
    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. :/
filearts 12y ago
Not nearly as impressive, but I did this using Angular directives a while back: http://embed.plnkr.co/zSjqqh/preview 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.
deleted 12y ago
[deleted]
zamalek 12y ago
It goes to show you how well designed markdown is. It's humane markup but machines can still do fancy stuff with this.
- alphapapa 12y ago
  Hard to beat Org though.
thomasfoster96 12y ago
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.
phyzome 12y ago
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.
TazeTSchnitzel 12y ago
Lacks handling of and . For prepend (append?) two newlines. For , suffix two spaces.

161 points by ImJasonH 12y ago

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.

ImJasonH 12y ago
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-generated-content-selectable http://stackoverflow.com/questions/19914349/how-can-i-make-g...
- leeoniya 12y ago
  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 https://github.com/leeoniya/reMarked.js
anoother 12y ago
Yes. I often find myself using http://markdown-here.com/ 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.
- masukomi 12y ago
  no, because you can't copy paste the tags. they're just visual sugar that isn't actionable.
stronglikedan 12y ago
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.
makenosound 12y ago
Not super practical, but I use [something similar on my site](http://makenosound.com/2012/10/07/going-paperless.html http://makenosound.com/2012/10/07/going-paperless.html) as a stylistic thing.

bevacqua 12y ago

Completely useless, you can't even copy and paste

_august 12y ago
Alternatively, you could say it the browser's job to support copy/paste of content inserted with CSS.
artursapek 12y ago
Classic HN comment

Foomandoonian 12y ago

See also ReMarkdown: http://fvsch.com/code/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/ http://kevinburke.bitbucket.org/markdowncss/

neckro23 12y ago

This is almost perfectly useless. I approve.

jbrooksuk 12y ago

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

rkuykendall-com 12y ago
Except it excludes the css content when you copy it, so it wouldn't really work for that feature.
- deleted 12y ago
  [deleted]

michaelmior 12y ago

I think a more accurate description is that this renders HTML as unrendered Markdown.

elwell 12y ago
Yes. Also, the word elegantly should be somewhere in there.
- masukomi 12y ago
  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. :/

filearts 12y ago

Not nearly as impressive, but I did this using Angular directives a while back: http://embed.plnkr.co/zSjqqh/preview 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.

deleted 12y ago

[deleted]

zamalek 12y ago

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

alphapapa 12y ago
Hard to beat Org though.

thomasfoster96 12y ago

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.

phyzome 12y ago

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.

TazeTSchnitzel 12y ago

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