

Show HN: CSS to render Markdown as unrendered Markdown - ImJasonH
https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea

======
jbrooksuk
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
Except it excludes the css content when you copy it, so it wouldn't really
work for that feature.

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

~~~
elwell
Yes. Also, the word _elegantly_ should be somewhere in there.

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

------
Foomandoonian
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
This is almost perfectly useless.

I approve.

------
phyzome
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.

------
captn3m0
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
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...](http://stackoverflow.com/questions/19914349/how-can-i-make-
generated-content-selectable)

~~~
leeoniya
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)

------
filearts
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.

------
thomasfoster96
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.

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

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

~~~
alphapapa
Hard to beat Org though.

------
bevacqua
Completely useless, you can't even copy and paste

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

