UPDATE: converted to GitHub repo. See https://github.com/borekb/mde-github-preview.
GitHub-style preview stylesheet for Markdown Edit.
The stylesheet is based on https://github.com/sindresorhus/github-markdown-css.
user_template.html there| <html> | |
| <head> | |
| <title>Markdown Edit Preview</title> | |
| <!-- Don't delete this X-UA tag. The browser control behaves like IE8 otherwise --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=9"> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| <style type="text/css"> | |
| @font-face { | |
| font-family: octicons-anchor; | |
| src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); | |
| } | |
| #content { | |
| -webkit-text-size-adjust: 100%; | |
| text-size-adjust: 100%; | |
| color: #333; | |
| font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| word-wrap: break-word; | |
| padding-left: 10px; | |
| padding-right: 6px; | |
| } | |
| #content a { | |
| background-color: transparent; | |
| } | |
| #content a:active, | |
| #content a:hover { | |
| outline: 0; | |
| } | |
| #content strong { | |
| font-weight: bold; | |
| } | |
| #content h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| #content img { | |
| border: 0; | |
| } | |
| #content hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| #content pre { | |
| overflow: auto; | |
| } | |
| #content code, | |
| #content kbd, | |
| #content pre { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| #content input { | |
| color: inherit; | |
| font: inherit; | |
| margin: 0; | |
| } | |
| #content html input[disabled] { | |
| cursor: default; | |
| } | |
| #content input { | |
| line-height: normal; | |
| } | |
| #content input[type="checkbox"] { | |
| box-sizing: border-box; | |
| padding: 0; | |
| } | |
| #content table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| #content td, | |
| #content th { | |
| padding: 0; | |
| } | |
| #content * { | |
| box-sizing: border-box; | |
| } | |
| #content input { | |
| font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; | |
| } | |
| #content a { | |
| color: #4078c0; | |
| text-decoration: none; | |
| } | |
| #content a:hover, | |
| #content a:active { | |
| text-decoration: underline; | |
| } | |
| #content hr { | |
| height: 0; | |
| margin: 15px 0; | |
| overflow: hidden; | |
| background: transparent; | |
| border: 0; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| #content hr:before { | |
| display: table; | |
| content: ""; | |
| } | |
| #content hr:after { | |
| display: table; | |
| clear: both; | |
| content: ""; | |
| } | |
| #content h1, | |
| #content h2, | |
| #content h3, | |
| #content h4, | |
| #content h5, | |
| #content h6 { | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| line-height: 1.1; | |
| } | |
| #content h1 { | |
| font-size: 30px; | |
| } | |
| #content h2 { | |
| font-size: 21px; | |
| } | |
| #content h3 { | |
| font-size: 16px; | |
| } | |
| #content h4 { | |
| font-size: 14px; | |
| } | |
| #content h5 { | |
| font-size: 12px; | |
| } | |
| #content h6 { | |
| font-size: 11px; | |
| } | |
| #content blockquote { | |
| margin: 0; | |
| } | |
| #content ul, | |
| #content ol { | |
| padding: 0; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| #content ol ol, | |
| #content ul ol { | |
| list-style-type: lower-roman; | |
| } | |
| #content ul ul ol, | |
| #content ul ol ol, | |
| #content ol ul ol, | |
| #content ol ol ol { | |
| list-style-type: lower-alpha; | |
| } | |
| #content dd { | |
| margin-left: 0; | |
| } | |
| #content code { | |
| font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
| font-size: 12px; | |
| } | |
| #content pre { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
| } | |
| #content .select::-ms-expand { | |
| opacity: 0; | |
| } | |
| #content .octicon { | |
| font: normal normal normal 16px/1 octicons-anchor; | |
| display: inline-block; | |
| text-decoration: none; | |
| text-rendering: auto; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| #content .octicon-link:before { | |
| content: '\f05c'; | |
| } | |
| #content>*:first-child { | |
| margin-top: 0 !important; | |
| } | |
| #content>*:last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| #content a:not([href]) { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| #content .anchor { | |
| display: inline-block; | |
| padding-right: 2px; | |
| margin-left: -18px; | |
| } | |
| #content .anchor:focus { | |
| outline: none; | |
| } | |
| #content h1, | |
| #content h2, | |
| #content h3, | |
| #content h4, | |
| #content h5, | |
| #content h6 { | |
| margin-top: 1em; | |
| margin-bottom: 16px; | |
| font-weight: bold; | |
| line-height: 1.4; | |
| } | |
| #content h1 .octicon-link, | |
| #content h2 .octicon-link, | |
| #content h3 .octicon-link, | |
| #content h4 .octicon-link, | |
| #content h5 .octicon-link, | |
| #content h6 .octicon-link { | |
| color: #000; | |
| vertical-align: middle; | |
| visibility: hidden; | |
| } | |
| #content h1:hover .anchor, | |
| #content h2:hover .anchor, | |
| #content h3:hover .anchor, | |
| #content h4:hover .anchor, | |
| #content h5:hover .anchor, | |
| #content h6:hover .anchor { | |
| text-decoration: none; | |
| } | |
| #content h1:hover .anchor .octicon-link, | |
| #content h2:hover .anchor .octicon-link, | |
| #content h3:hover .anchor .octicon-link, | |
| #content h4:hover .anchor .octicon-link, | |
| #content h5:hover .anchor .octicon-link, | |
| #content h6:hover .anchor .octicon-link { | |
| visibility: visible; | |
| } | |
| #content h1 { | |
| padding-bottom: 0.3em; | |
| font-size: 2.25em; | |
| line-height: 1.2; | |
| border-bottom: 1px solid #eee; | |
| } | |
| #content h1 .anchor { | |
| line-height: 1; | |
| } | |
| #content h2 { | |
| padding-bottom: 0.3em; | |
| font-size: 1.75em; | |
| line-height: 1.225; | |
| border-bottom: 1px solid #eee; | |
| } | |
| #content h2 .anchor { | |
| line-height: 1; | |
| } | |
| #content h3 { | |
| font-size: 1.5em; | |
| line-height: 1.43; | |
| } | |
| #content h3 .anchor { | |
| line-height: 1.2; | |
| } | |
| #content h4 { | |
| font-size: 1.25em; | |
| } | |
| #content h4 .anchor { | |
| line-height: 1.2; | |
| } | |
| #content h5 { | |
| font-size: 1em; | |
| } | |
| #content h5 .anchor { | |
| line-height: 1.1; | |
| } | |
| #content h6 { | |
| font-size: 1em; | |
| color: #777; | |
| } | |
| #content h6 .anchor { | |
| line-height: 1.1; | |
| } | |
| #content p, | |
| #content blockquote, | |
| #content ul, | |
| #content ol, | |
| #content dl, | |
| #content table, | |
| #content pre { | |
| margin-top: 0; | |
| margin-bottom: 16px; | |
| } | |
| #content hr { | |
| height: 4px; | |
| padding: 0; | |
| margin: 16px 0; | |
| background-color: #e7e7e7; | |
| border: 0 none; | |
| } | |
| #content ul, | |
| #content ol { | |
| padding-left: 2em; | |
| } | |
| #content ul ul, | |
| #content ul ol, | |
| #content ol ol, | |
| #content ol ul { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| #content li>p { | |
| margin-top: 16px; | |
| } | |
| #content dl { | |
| padding: 0; | |
| } | |
| #content dl dt { | |
| padding: 0; | |
| margin-top: 16px; | |
| font-size: 1em; | |
| font-style: italic; | |
| font-weight: bold; | |
| } | |
| #content dl dd { | |
| padding: 0 16px; | |
| margin-bottom: 16px; | |
| } | |
| #content blockquote { | |
| padding: 0 15px; | |
| color: #777; | |
| border-left: 4px solid #ddd; | |
| } | |
| #content blockquote>:first-child { | |
| margin-top: 0; | |
| } | |
| #content blockquote>:last-child { | |
| margin-bottom: 0; | |
| } | |
| #content table { | |
| display: block; | |
| width: 100%; | |
| overflow: auto; | |
| word-break: normal; | |
| word-break: keep-all; | |
| } | |
| #content table th { | |
| font-weight: bold; | |
| } | |
| #content table th, | |
| #content table td { | |
| padding: 6px 13px; | |
| border: 1px solid #ddd; | |
| } | |
| #content table tr { | |
| background-color: #fff; | |
| border-top: 1px solid #ccc; | |
| } | |
| #content table tr:nth-child(2n) { | |
| background-color: #f8f8f8; | |
| } | |
| #content img { | |
| max-width: 100%; | |
| box-sizing: content-box; | |
| background-color: #fff; | |
| } | |
| #content code { | |
| padding: 0; | |
| padding-top: 0.2em; | |
| padding-bottom: 0.2em; | |
| margin: 0; | |
| font-size: 85%; | |
| background-color: rgba(0,0,0,0.04); | |
| border-radius: 3px; | |
| } | |
| #content code:before, | |
| #content code:after { | |
| letter-spacing: -0.2em; | |
| content: "\00a0"; | |
| } | |
| #content pre>code { | |
| padding: 0; | |
| margin: 0; | |
| font-size: 100%; | |
| word-break: normal; | |
| white-space: pre; | |
| background: transparent; | |
| border: 0; | |
| } | |
| #content .highlight { | |
| margin-bottom: 16px; | |
| } | |
| #content .highlight pre, | |
| #content pre { | |
| padding: 16px; | |
| overflow: auto; | |
| font-size: 85%; | |
| line-height: 1.45; | |
| background-color: #f7f7f7; | |
| border-radius: 3px; | |
| } | |
| #content .highlight pre { | |
| margin-bottom: 0; | |
| word-break: normal; | |
| } | |
| #content pre { | |
| word-wrap: normal; | |
| } | |
| #content pre code { | |
| display: inline; | |
| max-width: initial; | |
| padding: 0; | |
| margin: 0; | |
| overflow: initial; | |
| line-height: inherit; | |
| word-wrap: normal; | |
| background-color: transparent; | |
| border: 0; | |
| } | |
| #content pre code:before, | |
| #content pre code:after { | |
| content: normal; | |
| } | |
| #content kbd { | |
| display: inline-block; | |
| padding: 3px 5px; | |
| font-size: 11px; | |
| line-height: 10px; | |
| color: #555; | |
| vertical-align: middle; | |
| background-color: #fcfcfc; | |
| border: solid 1px #ccc; | |
| border-bottom-color: #bbb; | |
| border-radius: 3px; | |
| box-shadow: inset 0 -1px 0 #bbb; | |
| } | |
| #content .pl-c { | |
| color: #969896; | |
| } | |
| #content .pl-c1, | |
| #content .pl-s .pl-v { | |
| color: #0086b3; | |
| } | |
| #content .pl-e, | |
| #content .pl-en { | |
| color: #795da3; | |
| } | |
| #content .pl-s .pl-s1, | |
| #content .pl-smi { | |
| color: #333; | |
| } | |
| #content .pl-ent { | |
| color: #63a35c; | |
| } | |
| #content .pl-k { | |
| color: #a71d5d; | |
| } | |
| #content .pl-pds, | |
| #content .pl-s, | |
| #content .pl-s .pl-pse .pl-s1, | |
| #content .pl-sr, | |
| #content .pl-sr .pl-cce, | |
| #content .pl-sr .pl-sra, | |
| #content .pl-sr .pl-sre { | |
| color: #183691; | |
| } | |
| #content .pl-v { | |
| color: #ed6a43; | |
| } | |
| #content .pl-id { | |
| color: #b52a1d; | |
| } | |
| #content .pl-ii { | |
| background-color: #b52a1d; | |
| color: #f8f8f8; | |
| } | |
| #content .pl-sr .pl-cce { | |
| color: #63a35c; | |
| font-weight: bold; | |
| } | |
| #content .pl-ml { | |
| color: #693a17; | |
| } | |
| #content .pl-mh, | |
| #content .pl-mh .pl-en, | |
| #content .pl-ms { | |
| color: #1d3e81; | |
| font-weight: bold; | |
| } | |
| #content .pl-mq { | |
| color: #008080; | |
| } | |
| #content .pl-mi { | |
| color: #333; | |
| font-style: italic; | |
| } | |
| #content .pl-mb { | |
| color: #333; | |
| font-weight: bold; | |
| } | |
| #content .pl-md { | |
| background-color: #ffecec; | |
| color: #bd2c00; | |
| } | |
| #content .pl-mi1 { | |
| background-color: #eaffea; | |
| color: #55a532; | |
| } | |
| #content .pl-mdr { | |
| color: #795da3; | |
| font-weight: bold; | |
| } | |
| #content .pl-mo { | |
| color: #1d3e81; | |
| } | |
| #content kbd { | |
| display: inline-block; | |
| padding: 3px 5px; | |
| font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
| line-height: 10px; | |
| color: #555; | |
| vertical-align: middle; | |
| background-color: #fcfcfc; | |
| border: solid 1px #ccc; | |
| border-bottom-color: #bbb; | |
| border-radius: 3px; | |
| box-shadow: inset 0 -1px 0 #bbb; | |
| } | |
| #content:before { | |
| display: table; | |
| content: ""; | |
| } | |
| #content:after { | |
| display: table; | |
| clear: both; | |
| content: ""; | |
| } | |
| #content .task-list-item { | |
| list-style-type: none; | |
| } | |
| #content .task-list-item+.task-list-item { | |
| margin-top: 3px; | |
| } | |
| #content .task-list-item input { | |
| margin: 0 0.35em 0.25em -1.6em; | |
| vertical-align: middle; | |
| } | |
| #content :checked+.radio-label { | |
| z-index: 1; | |
| position: relative; | |
| border-color: #4078c0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Content goes here. The div must have an id of "content" --> | |
| <div id="content"></div> | |
| <!-- Adds some scroll space to the bottom of the doucment --> | |
| <div style="height: 1pc"> </div> | |
| </body> | |
| </html> |