-
-
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; } |
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/.
img
s?