Skip to content

Instantly share code, notes, and snippets.

@roachhd
Last active August 29, 2015 14:09
Show Gist options
  • Save roachhd/a64322959313803e72d3 to your computer and use it in GitHub Desktop.
Save roachhd/a64322959313803e72d3 to your computer and use it in GitHub Desktop.
Add this css to your html file to get rid of that html and css for a markdownifed look!
/*
	ReMarkdown 2.0.0 - http://fvsch.com/code/remarkdown/
	[license] WTFPL - http://fvsch.com/code/remarkdown/COPYING
	[build info] Styles: all. Defaults: hn-hash ul-hyphen em-star strong-star a-bracket pre-indent code-tick hr-star
*/
[data-rmd] { line-height: 1.5; font-family: MyFaveMonospaceFont, monospace; }
[data-rmd] h1, [data-rmd] h2, [data-rmd] h3, [data-rmd] h4, [data-rmd] h5, [data-rmd] h6 { font-size: inherit; font-weight: inherit; }
[data-rmd] h1 { margin-top: 3em; margin-bottom: 1.5em; }
[data-rmd] h2 { margin-top: 3em; margin-bottom: 1.5em; }
[data-rmd] h3, [data-rmd] h4, [data-rmd] h5, [data-rmd] h6 { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] p { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] figure { margin: 1.5em 0 1.5em; }
[data-rmd] ul { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] ol { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] ul, [data-rmd] ol { margin-left: 3ch; padding: 0; list-style: none; }
[data-rmd] ul ul, [data-rmd] ul ol, [data-rmd] ol ul, [data-rmd] ol ol { margin-top: 0; margin-bottom: 0; }
[data-rmd] ul > li::before { float: left; margin-left: -3ch; width: 1ch; }
[data-rmd] ol { counter-reset: item; }
[data-rmd] ol > li { counter-increment: item; }
[data-rmd] ol > li::before { float: left; margin-left: -4ch; width: 3ch; overflow: hidden; text-align: right; content: counter(item) "."; }
[data-rmd] ol > li[value]::before { content: attr(value) "."; word-spacing: -1ch; }
[data-rmd] pre { margin-top: 1.5em; margin-bottom: 1.5em; -moz-tab-size: 4; tab-size: 4; }
[data-rmd] blockquote { position: relative; margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 0; margin-right: 0; padding: 0; padding-left: 3ch; }
[data-rmd] blockquote::before { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: pre; content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A"; cursor: default; }
[data-rmd] hr { height: 1.5em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; border: none; color: inherit; }
[data-rmd] em, [data-rmd] strong { font-style: normal; font-weight: normal; }
[data-rmd] pre, [data-rmd] code, [data-rmd] kbd, [data-rmd] samp, [data-rmd] tt { font-family: inherit; }

[data-rmd] h1::before, [data-rmd~=hn-hash] h1::before { content: "# "; }

[data-rmd~=hn-close] h1::after { content: " #"; }

[data-rmd] h2::before, [data-rmd~=hn-hash] h2::before { content: "## "; }

[data-rmd~=hn-close] h2::after { content: " ##"; }

[data-rmd] h3::before, [data-rmd~=hn-hash] h3::before { content: "### "; }

[data-rmd~=hn-close] h3::after { content: " ###"; }

[data-rmd] h4::before, [data-rmd~=hn-hash] h4::before { content: "#### "; }

[data-rmd~=hn-close] h4::after { content: " ####"; }

[data-rmd] h5::before, [data-rmd~=hn-hash] h5::before { content: "##### "; }

[data-rmd~=hn-close] h5::after { content: " #####"; }

[data-rmd] h6::before, [data-rmd~=hn-hash] h6::before { content: "###### "; }

[data-rmd~=hn-close] h6::after { content: " ######"; }

[data-rmd~=h1-underline] h1, [data-rmd~=h2-underline] h2 { display: table; overflow: hidden; position: relative; padding-bottom: 1.5em; }
[data-rmd~=h1-underline] h1::before, [data-rmd~=h2-underline] h2::before { content: none; }
[data-rmd~=h1-underline] h1::after, [data-rmd~=h2-underline] h2::after { position: absolute; bottom: 0; left: 0; height: 1.5em; width: 100%; overflow: hidden; word-break: break-all; cursor: default; }

[data-rmd~=h1-underline] h1::after { content: "========================================================================================================================"; }

[data-rmd~=h2-underline] h2::after { content: "------------------------------------------------------------------------------------------------------------------------"; }

[data-rmd] em::before, [data-rmd] em::after, [data-rmd~=em-star] em::before, [data-rmd~=em-star] em::after { content: "*"; }

[data-rmd~=em-underscore] em::before, [data-rmd~=em-underscore] em::after { content: "_"; }

[data-rmd] strong::before, [data-rmd] strong::after, [data-rmd~=strong-star] strong::before, [data-rmd~=strong-star] strong::after { content: "**"; }

[data-rmd~=strong-underscore] strong::before, [data-rmd~=strong-underscore] strong::after { content: "__"; }

[data-rmd] a::before, [data-rmd~=a-bracket] a::before { content: "["; }
[data-rmd] a::after, [data-rmd~=a-bracket] a::after { content: "]"; }

[data-rmd~=a-showurl] a[href]::before { content: "["; }
[data-rmd~=a-showurl] a[href]::after { content: "](" attr(href) ")"; word-break: break-all; }

[data-rmd~=ul-star] ul > li::before { content: "*"; }

[data-rmd~=ul-plus] ul > li::before { content: "+"; }

[data-rmd] ul > li::before, [data-rmd~=ul-hyphen] ul > li::before { content: "-"; }

[data-rmd] pre, [data-rmd~=pre-indent] pre { margin-left: 4ch; }

[data-rmd] :not(pre) > code::before, [data-rmd] :not(pre) > code::after, [data-rmd~=code-tick] :not(pre) > code::before, [data-rmd~=code-tick] :not(pre) > code::after { content: "`"; text-shadow: 0 1px; }

[data-rmd~=code-fence] pre > code { display: block; }
[data-rmd~=code-fence] pre > code::before, [data-rmd~=code-fence] pre > code::after { position: relative; top: .3em; content: "```"; display: block; width: 100%; height: 1.5em; overflow: hidden; word-break: break-all; cursor: default; }

[data-rmd~=code-fence-tilde] pre > code::before, [data-rmd~=code-fence-tilde] pre > code::after { top: 0; content: "~~~"; }

[data-rmd~=code-fence-full] pre > code::before, [data-rmd~=code-fence-full] pre > code::after { top: 0; content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"; }

[data-rmd~=del-gfm] del { text-decoration: none; }
[data-rmd~=del-gfm] del::before, [data-rmd~=del-gfm] del::after { content: "~~"; }

[data-rmd~=hr-center] hr { text-align: center; }

[data-rmd] hr::before, [data-rmd~=hr-star] hr::before { content: "* * * *"; }

[data-rmd~=hr-hyphen] hr::before { content: "-------"; }

[data-rmd~=table-marker] table { margin-top: 1.5em; margin-bottom: 1.5em; border-collapse: collapse; }
[data-rmd~=table-marker] tr > * { min-width: 3ch; position: relative; padding: 0; text-align: inherit; vertical-align: top; font-weight: normal; border: none; }
[data-rmd~=table-marker] tr > * + * { padding-left: 3ch; }
[data-rmd~=table-marker] tr:first-child > th:not([scope="row"]) { padding-bottom: 1.5em; }
[data-rmd~=table-marker] tr:first-child > th:not([scope="row"])::after { content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; word-break: break-all; height: 1.5em; }
[data-rmd~=table-marker] tr:first-child > * + th:not([scope="row"])::after { left: 3ch; }
[data-rmd~=table-marker] tr > * + *::before { content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; position: absolute; overflow: hidden; left: 1ch; top: 0; bottom: 0; white-space: pre; }
[data-rmd~=table-marker] th[scope="row"], [data-rmd~=table-marker] tr + tr > th:first-child { padding-right: 1ch; }
[data-rmd~=table-marker] th[scope="row"]::after, [data-rmd~=table-marker] tr + tr > th:first-child::after { position: absolute; right: -1ch; content: ":"; }
/*
ReMarkdown 2.0.0 - http://fvsch.com/code/remarkdown/
[license] WTFPL - http://fvsch.com/code/remarkdown/COPYING
[build info] Styles: all. Defaults: hn-hash ul-hyphen em-star strong-star a-bracket pre-indent code-tick hr-star
*/
[data-rmd] { line-height: 1.5; font-family: MyFaveMonospaceFont, monospace; }
[data-rmd] h1, [data-rmd] h2, [data-rmd] h3, [data-rmd] h4, [data-rmd] h5, [data-rmd] h6 { font-size: inherit; font-weight: inherit; }
[data-rmd] h1 { margin-top: 3em; margin-bottom: 1.5em; }
[data-rmd] h2 { margin-top: 3em; margin-bottom: 1.5em; }
[data-rmd] h3, [data-rmd] h4, [data-rmd] h5, [data-rmd] h6 { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] p { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] figure { margin: 1.5em 0 1.5em; }
[data-rmd] ul { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] ol { margin-top: 1.5em; margin-bottom: 1.5em; }
[data-rmd] ul, [data-rmd] ol { margin-left: 3ch; padding: 0; list-style: none; }
[data-rmd] ul ul, [data-rmd] ul ol, [data-rmd] ol ul, [data-rmd] ol ol { margin-top: 0; margin-bottom: 0; }
[data-rmd] ul > li::before { float: left; margin-left: -3ch; width: 1ch; }
[data-rmd] ol { counter-reset: item; }
[data-rmd] ol > li { counter-increment: item; }
[data-rmd] ol > li::before { float: left; margin-left: -4ch; width: 3ch; overflow: hidden; text-align: right; content: counter(item) "."; }
[data-rmd] ol > li[value]::before { content: attr(value) "."; word-spacing: -1ch; }
[data-rmd] pre { margin-top: 1.5em; margin-bottom: 1.5em; -moz-tab-size: 4; tab-size: 4; }
[data-rmd] blockquote { position: relative; margin-top: 1.5em; margin-bottom: 1.5em; margin-left: 0; margin-right: 0; padding: 0; padding-left: 3ch; }
[data-rmd] blockquote::before { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: pre; content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A"; cursor: default; }
[data-rmd] hr { height: 1.5em; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; border: none; color: inherit; }
[data-rmd] em, [data-rmd] strong { font-style: normal; font-weight: normal; }
[data-rmd] pre, [data-rmd] code, [data-rmd] kbd, [data-rmd] samp, [data-rmd] tt { font-family: inherit; }
[data-rmd] h1::before, [data-rmd~=hn-hash] h1::before { content: "# "; }
[data-rmd~=hn-close] h1::after { content: " #"; }
[data-rmd] h2::before, [data-rmd~=hn-hash] h2::before { content: "## "; }
[data-rmd~=hn-close] h2::after { content: " ##"; }
[data-rmd] h3::before, [data-rmd~=hn-hash] h3::before { content: "### "; }
[data-rmd~=hn-close] h3::after { content: " ###"; }
[data-rmd] h4::before, [data-rmd~=hn-hash] h4::before { content: "#### "; }
[data-rmd~=hn-close] h4::after { content: " ####"; }
[data-rmd] h5::before, [data-rmd~=hn-hash] h5::before { content: "##### "; }
[data-rmd~=hn-close] h5::after { content: " #####"; }
[data-rmd] h6::before, [data-rmd~=hn-hash] h6::before { content: "###### "; }
[data-rmd~=hn-close] h6::after { content: " ######"; }
[data-rmd~=h1-underline] h1, [data-rmd~=h2-underline] h2 { display: table; overflow: hidden; position: relative; padding-bottom: 1.5em; }
[data-rmd~=h1-underline] h1::before, [data-rmd~=h2-underline] h2::before { content: none; }
[data-rmd~=h1-underline] h1::after, [data-rmd~=h2-underline] h2::after { position: absolute; bottom: 0; left: 0; height: 1.5em; width: 100%; overflow: hidden; word-break: break-all; cursor: default; }
[data-rmd~=h1-underline] h1::after { content: "========================================================================================================================"; }
[data-rmd~=h2-underline] h2::after { content: "------------------------------------------------------------------------------------------------------------------------"; }
[data-rmd] em::before, [data-rmd] em::after, [data-rmd~=em-star] em::before, [data-rmd~=em-star] em::after { content: "*"; }
[data-rmd~=em-underscore] em::before, [data-rmd~=em-underscore] em::after { content: "_"; }
[data-rmd] strong::before, [data-rmd] strong::after, [data-rmd~=strong-star] strong::before, [data-rmd~=strong-star] strong::after { content: "**"; }
[data-rmd~=strong-underscore] strong::before, [data-rmd~=strong-underscore] strong::after { content: "__"; }
[data-rmd] a::before, [data-rmd~=a-bracket] a::before { content: "["; }
[data-rmd] a::after, [data-rmd~=a-bracket] a::after { content: "]"; }
[data-rmd~=a-showurl] a[href]::before { content: "["; }
[data-rmd~=a-showurl] a[href]::after { content: "](" attr(href) ")"; word-break: break-all; }
[data-rmd~=ul-star] ul > li::before { content: "*"; }
[data-rmd~=ul-plus] ul > li::before { content: "+"; }
[data-rmd] ul > li::before, [data-rmd~=ul-hyphen] ul > li::before { content: "-"; }
[data-rmd] pre, [data-rmd~=pre-indent] pre { margin-left: 4ch; }
[data-rmd] :not(pre) > code::before, [data-rmd] :not(pre) > code::after, [data-rmd~=code-tick] :not(pre) > code::before, [data-rmd~=code-tick] :not(pre) > code::after { content: "`"; text-shadow: 0 1px; }
[data-rmd~=code-fence] pre > code { display: block; }
[data-rmd~=code-fence] pre > code::before, [data-rmd~=code-fence] pre > code::after { position: relative; top: .3em; content: "```"; display: block; width: 100%; height: 1.5em; overflow: hidden; word-break: break-all; cursor: default; }
[data-rmd~=code-fence-tilde] pre > code::before, [data-rmd~=code-fence-tilde] pre > code::after { top: 0; content: "~~~"; }
[data-rmd~=code-fence-full] pre > code::before, [data-rmd~=code-fence-full] pre > code::after { top: 0; content: "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"; }
[data-rmd~=del-gfm] del { text-decoration: none; }
[data-rmd~=del-gfm] del::before, [data-rmd~=del-gfm] del::after { content: "~~"; }
[data-rmd~=hr-center] hr { text-align: center; }
[data-rmd] hr::before, [data-rmd~=hr-star] hr::before { content: "* * * *"; }
[data-rmd~=hr-hyphen] hr::before { content: "-------"; }
[data-rmd~=table-marker] table { margin-top: 1.5em; margin-bottom: 1.5em; border-collapse: collapse; }
[data-rmd~=table-marker] tr > * { min-width: 3ch; position: relative; padding: 0; text-align: inherit; vertical-align: top; font-weight: normal; border: none; }
[data-rmd~=table-marker] tr > * + * { padding-left: 3ch; }
[data-rmd~=table-marker] tr:first-child > th:not([scope="row"]) { padding-bottom: 1.5em; }
[data-rmd~=table-marker] tr:first-child > th:not([scope="row"])::after { content: "--------------------------------------------------------------------------------------------------------------"; position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; word-break: break-all; height: 1.5em; }
[data-rmd~=table-marker] tr:first-child > * + th:not([scope="row"])::after { left: 3ch; }
[data-rmd~=table-marker] tr > * + *::before { content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A"; position: absolute; overflow: hidden; left: 1ch; top: 0; bottom: 0; white-space: pre; }
[data-rmd~=table-marker] th[scope="row"], [data-rmd~=table-marker] tr + tr > th:first-child { padding-right: 1ch; }
[data-rmd~=table-marker] th[scope="row"]::after, [data-rmd~=table-marker] tr + tr > th:first-child::after { position: absolute; right: -1ch; content: ":"; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment