markdown here 的主题,参考了李笑来的主题
优化:
- 3 级标题起移除居中顶格
- 列表样式为小黑点
- 链接添加下划线以便识别
主题:
- 清新绿
- 活力橙
| .markdown-here-wrapper { | |
| font-size: 16px; | |
| line-height: 1.8em; | |
| letter-spacing: 0.1em; | |
| } | |
| pre, code { | |
| font-size: 14px; | |
| font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace; | |
| margin: auto 5px; | |
| } | |
| code { | |
| white-space: pre-wrap; | |
| border-radius: 2px; | |
| display: inline; | |
| } | |
| pre { | |
| font-size: 15px; | |
| line-height: 1.4em; | |
| display: block !important; | |
| } | |
| pre code { | |
| white-space: pre; | |
| overflow: auto; | |
| border-radius: 3px; | |
| padding: 1px 1px; | |
| display: block !important; | |
| } | |
| strong, b{ | |
| color: #BF360C; | |
| } | |
| em, i { | |
| color: #009688; | |
| } | |
| hr { | |
| border: 1px solid #BF360C; | |
| margin: 1.5em auto; | |
| } | |
| p { | |
| margin: 1.5em 5px !important; | |
| } | |
| table, pre, dl, blockquote, q, ul, ol { | |
| margin: 10px 5px; | |
| } | |
| ul, ol { | |
| padding-left: 15px; | |
| } | |
| li { | |
| margin: 10px; | |
| } | |
| li p { | |
| margin: 10px 0 !important; | |
| } | |
| ul ul, ul ol, ol ul, ol ol { | |
| margin: 0; | |
| padding-left: 10px; | |
| } | |
| dl { | |
| padding: 0; | |
| } | |
| dl dt { | |
| font-size: 1em; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| dl dd { | |
| margin: 0 0 10px; | |
| padding: 0 10px; | |
| } | |
| blockquote, q { | |
| border-left: 2px solid #009688; | |
| padding: 0 10px; | |
| color: #777; | |
| quotes: none; | |
| margin-left: 1em; | |
| } | |
| blockquote::before, blockquote::after, q::before, q::after { | |
| content: none; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: 20px 0 10px; | |
| padding: 0; | |
| font-style: bold !important; | |
| color: #009688 !important; | |
| margin: 1.5em 5px !important; | |
| } | |
| h1 { | |
| font-size: 24px !important; | |
| border-bottom: 1px solid #ddd !important; | |
| padding: 0.5em 1em !important; | |
| text-align: center !important; | |
| } | |
| h2 { | |
| font-size: 20px !important; | |
| border-bottom: 1px solid #eee !important; | |
| padding: 0.5em 1em !important; | |
| text-align: center !important; | |
| } | |
| h3 { | |
| font-size: 18px; | |
| } | |
| h4 { | |
| font-size: 16px; | |
| } | |
| table { | |
| padding: 0; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| font-size: 1em; | |
| font: inherit; | |
| border: 0; | |
| margin: 0 auto; | |
| } | |
| tbody { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| table tr { | |
| border: 0; | |
| border-top: 1px solid #CCC; | |
| background-color: white; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| table tr:nth-child(2n) { | |
| background-color: #F8F8F8; | |
| } | |
| table tr th, table tr td { | |
| font-size: 16px; | |
| border: 1px solid #CCC; | |
| margin: 0; | |
| padding: 5px 10px; | |
| } | |
| table tr th { | |
| font-weight: bold; | |
| color: #eee; | |
| border: 1px solid #009688; | |
| background-color: #009688; | |
| } | |
| /* 链接 */ | |
| a { | |
| text-decoration: underline; | |
| } |
| .markdown-here-wrapper { | |
| font-size: 16px; | |
| line-height: 1.8em; | |
| letter-spacing: 0.1em; | |
| } | |
| pre, code { | |
| font-size: 14px; | |
| font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace; | |
| margin: auto 5px; | |
| } | |
| code { | |
| white-space: pre-wrap; | |
| border-radius: 2px; | |
| display: inline; | |
| } | |
| pre { | |
| font-size: 15px; | |
| line-height: 1.4em; | |
| display: block !important; | |
| } | |
| pre code { | |
| white-space: pre; | |
| overflow: auto; | |
| border-radius: 3px; | |
| padding: 1px 1px; | |
| display: block !important; | |
| } | |
| /* 高亮 */ | |
| strong, b{ | |
| color: #F6B352; | |
| } | |
| /* 斜体 */ | |
| em, i { | |
| color: #F68657; | |
| } | |
| /* 水平分割线 */ | |
| hr { | |
| border: 1px solid #F68657; | |
| margin: 1.5em auto; | |
| } | |
| p { | |
| margin: 1.5em 5px !important; | |
| } | |
| table, pre, dl, blockquote, q, ul, ol { | |
| margin: 10px 5px; | |
| } | |
| ul, ol { | |
| padding-left: 15px; | |
| } | |
| li { | |
| margin: 10px; | |
| } | |
| li p { | |
| margin: 10px 0 !important; | |
| } | |
| ul ul, ul ol, ol ul, ol ol { | |
| margin: 0; | |
| padding-left: 10px; | |
| } | |
| dl { | |
| padding: 0; | |
| } | |
| dl dt { | |
| font-size: 1em; | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| dl dd { | |
| margin: 0 0 10px; | |
| padding: 0 10px; | |
| } | |
| /* 引用 */ | |
| blockquote, q { | |
| border-left: 2px solid #F68657; | |
| padding: 0 10px; | |
| color: #777; | |
| quotes: none; | |
| margin-left: 1em; | |
| } | |
| blockquote::before, blockquote::after, q::before, q::after { | |
| content: none; | |
| } | |
| /* 标题 */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: 20px 0 10px; | |
| padding: 0; | |
| font-style: bold !important; | |
| color: #F68657 !important; | |
| margin: 1.5em 5px !important; | |
| } | |
| h1 { | |
| font-size: 24px !important; | |
| border-bottom: 1px solid #F68657 !important; | |
| padding: 0.5em 1em !important; | |
| text-align: center !important; | |
| } | |
| h2 { | |
| font-size: 20px !important; | |
| border-bottom: 1px solid #F68657 !important; | |
| padding: 0.5em 1em !important; | |
| text-align: center !important; | |
| } | |
| h3 { | |
| font-size: 18px; | |
| } | |
| h4 { | |
| font-size: 16px; | |
| } | |
| table { | |
| padding: 0; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| font-size: 1em; | |
| font: inherit; | |
| border: 0; | |
| margin: 0 auto; | |
| } | |
| tbody { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| } | |
| table tr { | |
| border: 0; | |
| border-top: 1px solid #CCC; | |
| background-color: white; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| table tr:nth-child(2n) { | |
| background-color: #F8F8F8; | |
| } | |
| table tr th, table tr td { | |
| font-size: 16px; | |
| border: 1px solid #CCC; | |
| margin: 0; | |
| padding: 5px 10px; | |
| } | |
| /* 表格 */ | |
| table tr th { | |
| font-weight: bold; | |
| color: #eee; | |
| border: 1px solid #F68657; | |
| background-color: #F68657; | |
| } | |
| /* 链接 */ | |
| a { | |
| text-decoration: underline; | |
| } |