Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Github Markdown CSS - for Markdown Editor Preview
body {
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding-top: 10px;
padding-bottom: 10px;
background-color: white;
padding: 30px; }
body > *:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }
a {
color: #4183C4; }
a.absent {
color: #cc0000; }
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
background: url("../../images/modules/styleguide/para.png") no-repeat 10px center;
text-decoration: none; }
h1 tt, h1 code {
font-size: inherit; }
h2 tt, h2 code {
font-size: inherit; }
h3 tt, h3 code {
font-size: inherit; }
h4 tt, h4 code {
font-size: inherit; }
h5 tt, h5 code {
font-size: inherit; }
h6 tt, h6 code {
font-size: inherit; }
h1 {
font-size: 28px;
color: black; }
h2 {
font-size: 24px;
border-bottom: 1px solid #cccccc;
color: black; }
h3 {
font-size: 18px; }
h4 {
font-size: 16px; }
h5 {
font-size: 14px; }
h6 {
color: #777777;
font-size: 14px; }
p, blockquote, ul, ol, dl, li, table, pre {
margin: 15px 0; }
hr {
background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0; }
body > h2:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0; }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0; }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0; }
li p.first {
display: inline-block; }
ul, ol {
padding-left: 30px; }
ul :first-child, ol :first-child {
margin-top: 0; }
ul :last-child, ol :last-child {
margin-bottom: 0; }
dl {
padding: 0; }
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px; }
dl dt:first-child {
padding: 0; }
dl dt > :first-child {
margin-top: 0; }
dl dt > :last-child {
margin-bottom: 0; }
dl dd {
margin: 0 0 15px;
padding: 0 15px; }
dl dd > :first-child {
margin-top: 0; }
dl dd > :last-child {
margin-bottom: 0; }
blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }
table {
padding: 0; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }
img {
max-width: 100%; }
span.frame {
display: block;
overflow: hidden; }
span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto; }
span.frame span img {
display: block;
float: left; }
span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0; }
span.align-center {
display: block;
overflow: hidden;
clear: both; }
span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center; }
span.align-center span img {
margin: 0 auto;
text-align: center; }
span.align-right {
display: block;
overflow: hidden;
clear: both; }
span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right; }
span.align-right span img {
margin: 0;
text-align: right; }
span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left; }
span.float-left span {
margin: 13px 0 0; }
span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right; }
span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right; }
code, tt {
margin: 0 2px;
padding: 0 5px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px; }
pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent; }
.highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre code, pre tt {
background-color: transparent;
border: none; }
@alienlebarge

This comment has been minimized.

Copy link

@alienlebarge alienlebarge commented Dec 28, 2012

I've made a little modification of your script here.
thx !

@youanan

This comment has been minimized.

Copy link

@youanan youanan commented Jan 28, 2013

very good!

@giltroymeren

This comment has been minimized.

Copy link

@giltroymeren giltroymeren commented Feb 13, 2013

Thank you for this!

@Paratron

This comment has been minimized.

Copy link

@Paratron Paratron commented Mar 8, 2013

Where do the image URLs come from?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Apr 11, 2013

👍

@ralphcrisostomo

This comment has been minimized.

Copy link

@ralphcrisostomo ralphcrisostomo commented Jun 14, 2013

awesome!

@koriym

This comment has been minimized.

Copy link

@koriym koriym commented Oct 15, 2013

nice!

@bgaze

This comment has been minimized.

Copy link

@bgaze bgaze commented Oct 17, 2013

Great!

@r-medina

This comment has been minimized.

Copy link

@r-medina r-medina commented Nov 12, 2013

ahh awesome! replacing this with Library/QuickLook/QLMarkdwon.qlgenerator/Contents/resources/styles.css has given me the github markdown feel on all my readmes locally in quick look :D

@Zitrone44

This comment has been minimized.

Copy link

@Zitrone44 Zitrone44 commented Nov 30, 2013

Super! 👍

@juhwangKim

This comment has been minimized.

Copy link

@juhwangKim juhwangKim commented Dec 6, 2013

Thanks!

@JerryXia

This comment has been minimized.

Copy link

@JerryXia JerryXia commented Dec 24, 2013

good

@laike9m

This comment has been minimized.

Copy link

@laike9m laike9m commented Jan 9, 2014

brilliant!

@laike9m

This comment has been minimized.

Copy link

@laike9m laike9m commented Jan 10, 2014

You can find para.png and dirty-shade.png here

@kulicuu

This comment has been minimized.

Copy link

@kulicuu kulicuu commented May 8, 2014

Thankyou!

@sindresorhus

This comment has been minimized.

Copy link

@sindresorhus sindresorhus commented May 9, 2014

See github-markdown-css for an exact replica of the GitHub style.

@biangbiang

This comment has been minimized.

Copy link

@biangbiang biangbiang commented Jul 19, 2014

I can not find the dirty-shade.png, and I think it should be this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC

@egordorichev

This comment has been minimized.

Copy link

@egordorichev egordorichev commented Apr 24, 2015

Wow! Thanks!

@Edrees

This comment has been minimized.

Copy link

@Edrees Edrees commented Oct 29, 2015

Thanks this is awesome!

@BigBrightMoon

This comment has been minimized.

Copy link

@BigBrightMoon BigBrightMoon commented Mar 17, 2016

Great!

@ColemanNiki

This comment has been minimized.

Copy link

@ColemanNiki ColemanNiki commented Apr 2, 2017

WOW

@zxbetter

This comment has been minimized.

Copy link

@zxbetter zxbetter commented Aug 9, 2017

very good, thx.

@tatoosh

This comment has been minimized.

Copy link

@tatoosh tatoosh commented Apr 9, 2018

thx

@chris-roerig

This comment has been minimized.

Copy link

@chris-roerig chris-roerig commented Apr 14, 2018

Awesome!

@aiya000

This comment has been minimized.

Copy link

@aiya000 aiya000 commented May 26, 2018

Thanks so much!

NOTE: Maybe, in this gist, specified images (.png) is not existent. We should got it :D

@leobrines

This comment has been minimized.

Copy link

@leobrines leobrines commented Jul 4, 2019

This is the original css that uses Github https://primer.style/css/getting-started

@Joessem

This comment has been minimized.

Copy link

@Joessem Joessem commented Sep 18, 2020

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.