Show HN: CSS to render Markdown as unrendered Markdown

This is pretty nice for a &quot;toggle source&quot; feature. I added the use of CSS counters: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;jbrooksuk&#x2F;2d6989c35c77bf0c62f9" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;jbrooksuk&#x2F;2d6989c35c77bf0c62f9</a>

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

See also ReMarkdown: <a href="http:&#x2F;&#x2F;fvsch.com&#x2F;code&#x2F;remarkdown&#x2F;" rel="nofollow">http:&#x2F;&#x2F;fvsch.com&#x2F;code&#x2F;remarkdown&#x2F;</a><p>I&#x27;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.<p>You can go in the opposite direction with markdown.css too: <a href="http:&#x2F;&#x2F;kevinburke.bitbucket.org&#x2F;markdowncss&#x2F;" rel="nofollow">http:&#x2F;&#x2F;kevinburke.bitbucket.org&#x2F;markdowncss&#x2F;</a>

This is almost perfectly useless.<p>I approve.

Of course, it doesn&#x27;t actually reverse the (lossy) Markdown transformation. For example, the source &quot;9.&quot; turns into an ordered list that looks like &quot;1.&quot; and CSS won&#x27;t reverse that.

Any usecases for this?<p>I was thinking that this could be useful for giving people markdown to copy directly, but css:before and after doesn&#x27;t get copied.<p>I&#x27;m so gonna use this _somewhere_, just not sure where.

Not nearly as impressive, but I did this using Angular directives a while back: <a href="http:&#x2F;&#x2F;embed.plnkr.co&#x2F;zSjqqh&#x2F;preview" rel="nofollow">http:&#x2F;&#x2F;embed.plnkr.co&#x2F;zSjqqh&#x2F;preview</a><p>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 &lt;p&gt; and &lt;br&gt;. For &lt;p&gt; prepend (append?) two newlines. For &lt;br&gt;, suffix two spaces.

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

Completely useless, you can&#x27;t even copy and paste