Skip to content

Instantly share code, notes, and snippets.

@imjasonh
Last active February 12, 2024 17:18
Show Gist options
  • Save imjasonh/c00cdd7aece6945fb8ea to your computer and use it in GitHub Desktop.
Save imjasonh/c00cdd7aece6945fb8ea to your computer and use it in GitHub Desktop.
Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)
* {
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; }
@Cais
Copy link

Cais commented Apr 13, 2015

Very cool ... now to find a place to implement/integrate this!

@fvsch
Copy link

fvsch commented Apr 13, 2015

I did something similar a few years ago and updated it last year, if you want to check it out:
https://github.com/fvsch/remarkdown

@grabcode
Copy link

That's actually the easiest way for me to remember/learn markdown. Thanks mate.

@OrganicPanda
Copy link

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,".") ". ";
}

@nghuuphuoc
Copy link

Very, very nice!

@zoghal
Copy link

zoghal commented Apr 15, 2015

woow

@theory
Copy link

theory commented Apr 16, 2015

i::before, i::after, em::before, em::after { content: "*"; }
b::before, b::after, strong::before, strong::after { content: "**"; }

@kruszczynski
Copy link

That's brilliant!

@myobie
Copy link

myobie commented Apr 17, 2015

I did this for my current site at nathanherald.com, but I never imagined anyone else would do it! Awesome and thanks for sharing.

@Avelar
Copy link

Avelar commented Apr 17, 2015

That's Awesome!

@mrmlnc
Copy link

mrmlnc commented Apr 20, 2015

All of Genius is Simple! Awesome!
Can play with counters for lists.

@elky
Copy link

elky commented Apr 21, 2015

Awesome. How about th tag?

@renestalder
Copy link

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.

https://twitter.com/renestalder/status/590578412709933057

@nolim1t
Copy link

nolim1t commented Apr 23, 2015

This could prove useful for those who keep forgetting markdown markup but know HTML

@jasonkarns
Copy link

I think everyone's ready for this gist to become a legit git repo :)

@teeheehee
Copy link

Here's a handy greasemonkey script that takes this styling and applies it to any webpage by typing "md".

@ChaseFlorell
Copy link

hr {height: 0px; border:none;}
hr::after {content: "-----";}

Also, forked it to add .md class support so that it's not necessarily global.

@ChaseFlorell
Copy link

+1 for @jasonkarns comment. make it a repo that we can submit PR's to :)

@0xMF
Copy link

0xMF commented May 14, 2015

Amazing...truly amazing. I am still recovering from it's simplicity and elegance.

@ahmetb
Copy link

ahmetb commented May 15, 2015

imgs?

@tcelestino
Copy link

amazing!
👏

@daftspaniel
Copy link

Funky!

@Pierstoval
Copy link

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)

@afolson
Copy link

afolson commented May 21, 2015

I'd like to add my voice to the chorus of people suggesting that this become a repo. :D

@jslegers
Copy link

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:

  1. Use Google Chrome
  2. Go to the print preview
  3. 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.

Copy link

ghost commented Jun 4, 2015

Awesome :)

@hboon
Copy link

hboon commented Oct 5, 2015

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/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment