5 ms·
very clever, particularly how the width of the equals signs below an h1 is made to match the text width using hidden overflow: https://github.com/mrcoles/markd
by kilovoltaire 14y ago
very clever, particularly how the width of the equals signs below an h1 is made to match the text width using hidden overflow:
https://github.com/mrcoles/markdown-css/blob/0d00981143172aad4f9939f6deed8106ca4000b5/markdown.css#L61 https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...
- mrcoles 14y agoThe magic is the quirks in how `display: table-cell` makes it like a block, but only as wide as the text, then the pseudo element with equals signs is positioned absolutely inside. Fortunately, most browsers allow this, but firefox doesn't let things be positioned absolute inside a `table-cell`, so I make FF just fall back to `display: block` https://github.com/mrcoles/markdown-css/blob/master/markdown.css#L185 https://github.com/mrcoles/markdown-css/blob/master/markdown...
- kilovoltaire 14y agointeresting! in the same vein as the h1 equals, i like the blockquote brackets implementation as well: https://github.com/mrcoles/markdown-css/blob/0d00981143172aad4f9939f6deed8106ca4000b5/markdown.css#L122 https://github.com/mrcoles/markdown-css/blob/0d00981143172aa...
- mrcoles 14y agoyeah, the \A makes a newline and the `white-space: pre` makes that work like a <br>
- crazygringo 14y agoThat was definitely the most impressive bit for me too. I thought, how on earth was that done? Very clever. It's a shame it doesn't work for copy-paste, but honestly, it's probably even easier to write a reverse-markdown script than to figure out how to do it with CSS!