| article { | |
| display: block; | |
| } | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: .67em 0; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| code, | |
| pre { | |
| font-family: monospace, serif; | |
| font-size: 1em; | |
| } | |
| img { | |
| border: 0; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| body { | |
| font: 13px Helvetica, arial, freesans, clean, sans-serif; | |
| line-height: 1.4; | |
| } | |
| body { | |
| min-width: 1020px; | |
| color: #333333; | |
| background-color: #fff; | |
| } | |
| * { | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| ::-moz-selection { | |
| text-shadow: none; | |
| background: rgba(65,131,196,0.4); | |
| } | |
| ::selection { | |
| text-shadow: none; | |
| background: rgba(65,131,196,0.4); | |
| } | |
| a { | |
| color: #4183c4; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| a:focus, | |
| a:active { | |
| text-decoration: underline; | |
| } | |
| hr { | |
| height: 0; | |
| margin: 15px 0; | |
| overflow: hidden; | |
| background: transparent; | |
| border: 0; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| hr:before, | |
| hr:after { | |
| content: " "; | |
| display: table; | |
| } | |
| hr:after { | |
| clear: both; | |
| } | |
| ol ol { | |
| list-style-type: lower-roman; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| line-height: 1.1; | |
| } | |
| h1 { | |
| font-size: 30px; | |
| } | |
| h2 { | |
| font-size: 21px; | |
| } | |
| h3 { | |
| font-size: 16px; | |
| } | |
| h4 { | |
| font-size: 14px; | |
| } | |
| h5 { | |
| font-size: 12px; | |
| } | |
| h6 { | |
| font-size: 11px; | |
| } | |
| blockquote { | |
| margin: 0; | |
| } | |
| ul, | |
| ol { | |
| padding: 0; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| dd { | |
| margin-left: 0; | |
| } | |
| code, | |
| pre { | |
| font-family: Consolas, "Liberation Mono", Courier, monospace; | |
| font-size: 12px; | |
| } | |
| pre { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .markdown-body { | |
| font-size: 15px; | |
| line-height: 1.7; | |
| overflow: hidden; | |
| word-wrap: break-word; | |
| } | |
| .markdown-body>*:first-child { | |
| margin-top: 0 !important; | |
| } | |
| .markdown-body>*:last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| .markdown-body a.anchor { | |
| display: block; | |
| padding-right: 6px; | |
| padding-left: 30px; | |
| margin-left: -30px; | |
| cursor: pointer; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| } | |
| .markdown-body a.anchor:focus { | |
| outline: none; | |
| } | |
| .markdown-body h1, | |
| .markdown-body h2, | |
| .markdown-body h3, | |
| .markdown-body h4, | |
| .markdown-body h5, | |
| .markdown-body h6 { | |
| margin: 1em 0 15px; | |
| padding: 0; | |
| font-weight: bold; | |
| line-height: 1.7; | |
| cursor: text; | |
| position: relative; | |
| } | |
| .markdown-body h1 { | |
| font-size: 2.5em; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .markdown-body h2 { | |
| font-size: 2em; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .markdown-body h3 { | |
| font-size: 1.5em; | |
| } | |
| .markdown-body h4 { | |
| font-size: 1.2em; | |
| } | |
| .markdown-body h5 { | |
| font-size: 1em; | |
| } | |
| .markdown-body h6 { | |
| color: #777; | |
| font-size: 1em; | |
| } | |
| .markdown-body p, | |
| .markdown-body blockquote, | |
| .markdown-body ul, | |
| .markdown-body ol, | |
| .markdown-body dl, | |
| .markdown-body table, | |
| .markdown-body pre { | |
| margin: 15px 0; | |
| } | |
| .markdown-body hr { | |
| background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0; | |
| border: 0 none; | |
| color: #ccc; | |
| height: 4px; | |
| padding: 0; | |
| margin: 15px 0; | |
| } | |
| .markdown-body ul, | |
| .markdown-body ol { | |
| padding-left: 30px; | |
| } | |
| .markdown-body ol ol, | |
| .markdown-body ol ul { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| .markdown-body dl { | |
| padding: 0; | |
| } | |
| .markdown-body dl dt { | |
| font-size: 14px; | |
| font-weight: bold; | |
| font-style: italic; | |
| padding: 0; | |
| margin-top: 15px; | |
| } | |
| .markdown-body dl dd { | |
| margin-bottom: 15px; | |
| padding: 0 15px; | |
| } | |
| .markdown-body blockquote { | |
| border-left: 4px solid #DDD; | |
| padding: 0 15px; | |
| color: #777; | |
| } | |
| .markdown-body blockquote>:first-child { | |
| margin-top: 0px; | |
| } | |
| .markdown-body blockquote>:last-child { | |
| margin-bottom: 0px; | |
| } | |
| .markdown-body table { | |
| width: 100%; | |
| overflow: auto; | |
| display: block; | |
| } | |
| .markdown-body table th { | |
| font-weight: bold; | |
| } | |
| .markdown-body table th, | |
| .markdown-body table td { | |
| border: 1px solid #ddd; | |
| padding: 6px 13px; | |
| } | |
| .markdown-body table tr { | |
| border-top: 1px solid #ccc; | |
| background-color: #fff; | |
| } | |
| .markdown-body table tr:nth-child(2n) { | |
| background-color: #f8f8f8; | |
| } | |
| .markdown-body img { | |
| max-width: 100%; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .markdown-body code { | |
| margin: 0; | |
| border: 1px solid #ddd; | |
| background-color: #f8f8f8; | |
| border-radius: 3px; | |
| padding: 0; | |
| } | |
| .markdown-body code:before, | |
| .markdown-body code:after { | |
| content: "\00a0"; | |
| letter-spacing: -0.2em; | |
| } | |
| .markdown-body pre>code { | |
| margin: 0; | |
| padding: 0; | |
| white-space: pre; | |
| border: none; | |
| background: transparent; | |
| } | |
| .markdown-body .highlight pre, | |
| .markdown-body pre { | |
| background-color: #f8f8f8; | |
| border: 1px solid #ddd; | |
| font-size: 13px; | |
| line-height: 19px; | |
| overflow: auto; | |
| padding: 6px 10px; | |
| border-radius: 3px; | |
| } | |
| .markdown-body pre { | |
| word-wrap: normal; | |
| } | |
| .markdown-body pre code { | |
| margin: 0; | |
| padding: 0; | |
| background-color: transparent; | |
| border: none; | |
| word-wrap: normal; | |
| max-width: initial; | |
| display: inline; | |
| overflow: initial; | |
| line-height: inherit; | |
| } | |
| .markdown-body pre code:before, | |
| .markdown-body pre code:after { | |
| content: normal; | |
| } | |
| .highlight { | |
| background: #ffffff; | |
| } | |
| .highlight .c { | |
| color: #999988; | |
| font-style: italic; | |
| } | |
| .highlight .err { | |
| color: #a61717; | |
| background-color: #e3d2d2; | |
| } | |
| .highlight .k { | |
| font-weight: bold; | |
| } | |
| .highlight .o { | |
| font-weight: bold; | |
| } | |
| .highlight .cm { | |
| color: #999988; | |
| font-style: italic; | |
| } | |
| .highlight .cp { | |
| color: #999999; | |
| font-weight: bold; | |
| } | |
| .highlight .c1 { | |
| color: #999988; | |
| font-style: italic; | |
| } | |
| .highlight .cs { | |
| color: #999999; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| .highlight .gd { | |
| color: #000000; | |
| background-color: #ffdddd; | |
| } | |
| .highlight .gd .x { | |
| color: #000000; | |
| background-color: #ffaaaa; | |
| } | |
| .highlight .ge { | |
| font-style: italic; | |
| } | |
| .highlight .gr { | |
| color: #aa0000; | |
| } | |
| .highlight .gh { | |
| color: #999999; | |
| } | |
| .highlight .gi { | |
| color: #000000; | |
| background-color: #ddffdd; | |
| } | |
| .highlight .gi .x { | |
| color: #000000; | |
| background-color: #aaffaa; | |
| } | |
| .highlight .go { | |
| color: #888888; | |
| } | |
| .highlight .gp { | |
| color: #555555; | |
| } | |
| .highlight .gs { | |
| font-weight: bold; | |
| } | |
| .highlight .gu { | |
| color: #800080; | |
| font-weight: bold; | |
| } | |
| .highlight .gt { | |
| color: #aa0000; | |
| } | |
| .highlight .kc { | |
| font-weight: bold; | |
| } | |
| .highlight .kd { | |
| font-weight: bold; | |
| } | |
| .highlight .kn { | |
| font-weight: bold; | |
| } | |
| .highlight .kp { | |
| font-weight: bold; | |
| } | |
| .highlight .kr { | |
| font-weight: bold; | |
| } | |
| .highlight .kt { | |
| color: #445588; | |
| font-weight: bold; | |
| } | |
| .highlight .m { | |
| color: #009999; | |
| } | |
| .highlight .s { | |
| color: #dd1144; | |
| } | |
| .highlight .n { | |
| color: #333333; | |
| } | |
| .highlight .na { | |
| color: teal; | |
| } | |
| .highlight .nb { | |
| color: #0086b3; | |
| } | |
| .highlight .nc { | |
| color: #445588; | |
| font-weight: bold; | |
| } | |
| .highlight .no { | |
| color: teal; | |
| } | |
| .highlight .ni { | |
| color: purple; | |
| } | |
| .highlight .ne { | |
| color: #990000; | |
| font-weight: bold; | |
| } | |
| .highlight .nf { | |
| color: #990000; | |
| font-weight: bold; | |
| } | |
| .highlight .nn { | |
| color: #555555; | |
| } | |
| .highlight .nt { | |
| color: navy; | |
| } | |
| .highlight .nv { | |
| color: teal; | |
| } | |
| .highlight .ow { | |
| font-weight: bold; | |
| } | |
| .highlight .w { | |
| color: #bbbbbb; | |
| } | |
| .highlight .mf { | |
| color: #009999; | |
| } | |
| .highlight .mh { | |
| color: #009999; | |
| } | |
| .highlight .mi { | |
| color: #009999; | |
| } | |
| .highlight .mo { | |
| color: #009999; | |
| } | |
| .highlight .sb { | |
| color: #dd1144; | |
| } | |
| .highlight .sc { | |
| color: #dd1144; | |
| } | |
| .highlight .sd { | |
| color: #dd1144; | |
| } | |
| .highlight .s2 { | |
| color: #dd1144; | |
| } | |
| .highlight .se { | |
| color: #dd1144; | |
| } | |
| .highlight .sh { | |
| color: #dd1144; | |
| } | |
| .highlight .si { | |
| color: #dd1144; | |
| } | |
| .highlight .sx { | |
| color: #dd1144; | |
| } | |
| .highlight .sr { | |
| color: #009926; | |
| } | |
| .highlight .s1 { | |
| color: #dd1144; | |
| } | |
| .highlight .ss { | |
| color: #990073; | |
| } | |
| .highlight .bp { | |
| color: #999999; | |
| } | |
| .highlight .vc { | |
| color: teal; | |
| } | |
| .highlight .vg { | |
| color: teal; | |
| } | |
| .highlight .vi { | |
| color: teal; | |
| } | |
| .highlight .il { | |
| color: #009999; | |
| } | |
| .highlight .gc { | |
| color: #999; | |
| background-color: #EAF2F5; | |
| } |
See https://github.com/sindresorhus/github-markdown-css
<link rel="stylesheet" href="github-markdown.css">
<style>
.markdown-body {
min-width: 200px;
max-width: 790px;
margin: 0 auto;
padding: 30px;
}
</style>
<article class="markdown-body">
...
</article>