* { | |
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; } |
This comment has been minimized.
This comment has been minimized.
It's interesting ... I did some time ago a try to render it like it was printed by a old dot matrix printer on a continuous paper : http://trillek-team.github.io/trillek-computer/README.html |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
Haha, this is awesome :) |
This comment has been minimized.
This comment has been minimized.
@Cash2m Thanks, fixed! |
This comment has been minimized.
This comment has been minimized.
Should probably support |
This comment has been minimized.
This comment has been minimized.
Ordered lists; https://gist.github.com/jbrooksuk/2d6989c35c77bf0c62f9 |
This comment has been minimized.
This comment has been minimized.
I'm with capt nemo on this. |
This comment has been minimized.
This comment has been minimized.
Haha cool. Good update, @jbrooksuk. |
This comment has been minimized.
This comment has been minimized.
@cash2m @jbrooksuk incrementing is nice but I prefer to use |
This comment has been minimized.
This comment has been minimized.
Worked on something similar a while back but never used it for anything: https://gist.github.com/pluma/6b51b2601ddea34d5abf |
This comment has been minimized.
This comment has been minimized.
Of course, this doesn't actually reverse the (lossy) Markdown transformation. For example, the source |
This comment has been minimized.
This comment has been minimized.
Very cool ... now to find a place to implement/integrate this! |
This comment has been minimized.
This comment has been minimized.
I did something similar a few years ago and updated it last year, if you want to check it out: |
This comment has been minimized.
This comment has been minimized.
That's actually the easiest way for me to remember/learn markdown. Thanks mate. |
This comment has been minimized.
This comment has been minimized.
I think the list styles should be something like: ol, ul { list-style: none; padding-left: 0; }
ul li::before { content: "* "; }
ol { counter-reset: section; }
ol li::before {
counter-increment: section;
content: counters(section,".") ". ";
} |
This comment has been minimized.
This comment has been minimized.
Very, very nice! |
This comment has been minimized.
This comment has been minimized.
woow |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
That's brilliant! |
This comment has been minimized.
This comment has been minimized.
I did this for my current site at nathanherald.com, but I never imagined anyone else would do it! Awesome and thanks for sharing. |
This comment has been minimized.
This comment has been minimized.
That's Awesome! |
This comment has been minimized.
This comment has been minimized.
All of Genius is Simple! Awesome! |
This comment has been minimized.
This comment has been minimized.
Awesome. How about |
This comment has been minimized.
This comment has been minimized.
Cool idea. But just one question: What use case does this have? Because I'm not even able to copy & paste the visible output, thanks to the shadow DOM. |
This comment has been minimized.
This comment has been minimized.
This could prove useful for those who keep forgetting markdown markup but know HTML |
This comment has been minimized.
This comment has been minimized.
I think everyone's ready for this gist to become a legit git repo :) |
This comment has been minimized.
This comment has been minimized.
Here's a handy greasemonkey script that takes this styling and applies it to any webpage by typing "md". |
This comment has been minimized.
This comment has been minimized.
Also, forked it to add |
This comment has been minimized.
This comment has been minimized.
+1 for @jasonkarns comment. make it a repo that we can submit PR's to :) |
This comment has been minimized.
This comment has been minimized.
Amazing...truly amazing. I am still recovering from it's simplicity and elegance. |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
amazing! |
This comment has been minimized.
This comment has been minimized.
Funky! |
This comment has been minimized.
This comment has been minimized.
There should be something done for the |
This comment has been minimized.
This comment has been minimized.
I'd like to add my voice to the chorus of people suggesting that this become a repo. :D |
This comment has been minimized.
This comment has been minimized.
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 :
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:
This technique is a bit convoluted, but it appears to be the best we've got so far. |
This comment has been minimized.
This comment has been minimized.
Awesome :) |
This comment has been minimized.
This comment has been minimized.
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/. |
This comment has been minimized.
I have no idea where I'm going to use this, but this is awesome.