-
Star
(1,107)
You must be signed in to star a gist -
Fork
(97)
You must be signed in to fork a gist
-
-
Save imjasonh/c00cdd7aece6945fb8ea to your computer and use it in GitHub Desktop.
| * { | |
| font-size: 12pt; | |
| font-family: monospace; | |
| font-weight: normal; | |
| font-style: normal; | |
| text-decoration: none; | |
| color: black; | |
| cursor: default; | |
| } | |
| h1::before { content: "# "; } | |
| h2::before { content: "## "; } | |
| h3::before { content: "### "; } | |
| h4::before { content: "#### "; } | |
| h5::before { content: "##### "; } | |
| h6::before { content: "###### "; } | |
| strike::after, strike::before { content: "~~"; } | |
| i::before, i::after { content: "*"; } | |
| b::before, b::after { content: "**"; } | |
| ol, ul { list-style: none; padding-left: 0; } | |
| ul li::before { content: "* "; } | |
| ol li::before { content: "1. "; } | |
| code::before, code::after { content: "`"; } | |
| pre::before { content: "```" attr(lang) "\A"; } | |
| pre::after { content:"```\A"; } | |
| a::before { content: "["; } | |
| a::after { content: "](" attr(href) ")"; } | |
| tr::before { content: "| "; } | |
| td::after { content: " | "; } | |
| thead td::after { content: " | \A-----| "; white-space: pre; } |
imgs?
amazing!
👏
Funky!
There should be something done for the pre code {} selector which is created in some Markdown parsers (especially when you have a language specified in the "```" block)
I'd like to add my voice to the chorus of people suggesting that this become a repo. :D
When I try to actually copy/paste/select the generated characters, both Firefox and Chrome consistently skip any generated characters.
Judging by what I find on Stackoverflow, the problem seems to be neither OS nor browser specific :
- Select text in ::before or ::after pseudo-element
- Is it possible to select css generated content?
- How can I make generated content selectable?
That means you'll still need a nasty JS-based hack to actually copy-paste the generated output into a textarea on Github or elsewhere.
Workaround:
- Use Google Chrome
- Go to the print preview
- Copy-paste your result from the print preview
This technique is a bit convoluted, but it appears to be the best we've got so far.
Awesome :)
Thanks for sharing, ever since I saw this, I've been meaning to find a place to use it. I've just applied this lightly at https://motionobj.com/wilfredapp/.
Amazing...truly amazing. I am still recovering from it's simplicity and elegance.