神代綺凜

[CSS] Github Markdown Style for Handsome
一直很喜欢 Github 的 Markdown 样式,简洁赏心悦目,因此拿过来并做了些调整以适合博客主题
扫描右侧二维码阅读全文
01
2018/12

[CSS] Github Markdown Style for Handsome

一直很喜欢 Github 的 Markdown 样式,简洁赏心悦目,因此拿过来并做了些调整以适合博客主题

Head Pic: 「しろいいぬ&マロンちゃん」/「unwitherer」のイラスト [pixiv]

Github Markdown Style

初始样式来源于:

以下是经过修改与调整的样式,去除了部分博客用不到的样式,以及按照个人喜好做了调整(字体大小等)

目前本博客使用的就是该样式,效果可自由翻阅各文章查看(以及,当然,给出的样式中不含本博客使用的代码块样式)

需要自行给模版文章正文元素加上markdown-body类,或批量替换范围

.markdown-body,.markdown-body blockquote {
    color: #24292e;
    word-wrap: break-word;
    font-size: 14px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.markdown-body a {
    border-bottom: none!important;
    background-color: transparent;
    color: #0366d6!important;
    text-decoration: none;
}

.markdown-body a:hover {
    border-bottom: 1px solid #0366d6 !important;
}

.markdown-body a:active,.markdown-body a:hover {
    outline-width: 0;
}

.markdown-body strong {
    font-weight: bolder;
}

.markdown-body h1 {
    margin: .67em 0;
    font-size: 2em;
}

.markdown-body img {
    border-style: none;
}

.markdown-body code,.markdown-body kbd,.markdown-body pre {
    font-size: 1em;
    font-family: monospace,monospace;
}

.markdown-body hr {
    overflow: visible;
    box-sizing: content-box;
    height: 0;
}

.markdown-body input {
    margin: 0;
    font: inherit;
}

.markdown-body input {
    overflow: visible;
}

.markdown-body [type=checkbox] {
    box-sizing: border-box;
    padding: 0;
}

.markdown-body * {
    box-sizing: border-box;
}

.markdown-body input {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.markdown-body hr {
    overflow: hidden;
    margin: 15px 0;
    height: 0;
    border: 0;
    border-bottom: 1px solid #dfe2e5;
    background: 0 0;
}

.markdown-body hr::before {
    display: table;
    content: "";
}

.markdown-body hr::after {
    clear: both;
    display: table;
    content: "";
}

.markdown-body table {
    border-collapse: collapse;
    word-break: keep-all;
    border-spacing: 0;
}

.markdown-body td,.markdown-body th {
    padding: 0;
}

.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-body h1 {
    font-weight: 600;
    font-size: 32px;
}

.markdown-body h2 {
    font-weight: 600;
    font-size: 24px;
}

.markdown-body h3 {
    font-weight: 600;
    font-size: 20px;
}

.markdown-body h4 {
    font-weight: 600;
    font-size: 16px;
}

.markdown-body h5 {
    font-weight: 600;
    font-size: 14px;
}

.markdown-body h6 {
    font-weight: 600;
    font-size: 12px;
}

.markdown-body p {
    margin-top: 0;
    margin-bottom: 10px;
}

.markdown-body blockquote {
    margin: 0;
}

.markdown-body ol,.markdown-body ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.markdown-body ol ol,.markdown-body ul ol {
    list-style-type: lower-roman;
}

.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol {
    list-style-type: lower-alpha;
}

.markdown-body dd {
    margin-left: 0;
}

.markdown-body code {
    font-size: 14px;
    font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
}

.markdown-body pre {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
}

.markdown-body::before {
    display: table;
    content: "";
}

.markdown-body::after {
    clear: both;
    display: table;
    content: "";
}

.markdown-body>:first-child {
    margin-top: 0!important;
}

.markdown-body>:last-child {
    margin-bottom: 0!important;
}

.markdown-body a:not([href]) {
    color: inherit;
    text-decoration: none;
}

.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul {
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body hr {
    margin: 24px 0;
    padding: 0;
    height: .25em;
    border: 0;
    background-color: #e1e4e8;
}

.markdown-body blockquote {
    padding: 0 1em;
    border-left: .25em solid #dfe2e5;
    color: #6a737d;
}

.markdown-body blockquote>:first-child {
    margin-top: 0;
}

.markdown-body blockquote>:last-child {
    margin-bottom: 0;
}

.markdown-body kbd {
    display: inline-block;
    padding: 3px 5px;
    border: solid 1px #c6cbd1;
    border-radius: 3px;
    background-color: #fafbfc;
    box-shadow: inset 0 -1px 0 #959da5;
    color: #444d56;
    vertical-align: middle;
    font-size: 11px;
    line-height: 10px;
    border-bottom-color: #959da5;
}

.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-body h1 {
    padding-bottom: .3em;
    border-bottom: 1px solid #bbb;
    font-size: 2em;
}

.markdown-body h2 {
    padding-bottom: .3em;
    border-bottom: 1px solid #bbb;
    font-size: 1.5em;
}

.markdown-body h3 {
    font-size: 1.25em;
}

.markdown-body h4 {
    font-size: 1em;
}

.markdown-body h5 {
    font-size: .875em;
}

.markdown-body h6 {
    color: #6a737d;
    font-size: .85em;
}

.markdown-body ol,.markdown-body ul {
    padding-left: 2em;
}

.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-body li {
    word-wrap: break-all;
}

.markdown-body li>p {
    margin-top: 16px;
}

.markdown-body li+li {
    margin-top: .25em;
}

.markdown-body dl {
    padding: 0;
}

.markdown-body dl dt {
    margin-top: 16px;
    padding: 0;
    font-weight: 600;
    font-style: italic;
    font-size: 1em;
}

.markdown-body dl dd {
    margin-bottom: 16px;
    padding: 0 16px;
}

.markdown-body table {
    display: block;
    overflow: auto;
    width: 100%;
}

.markdown-body table th {
    font-weight: 600;
}

.markdown-body table td,.markdown-body table th {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

.markdown-body table tr {
    border-top: 1px solid #c6cbd1;
    background-color: #fff;
}

.markdown-body table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

.markdown-body img {
    box-sizing: content-box;
    max-width: 100%;
    background-color: #fff;
}

.markdown-body img[align=right] {
    padding-left: 20px;
}

.markdown-body img[align=left] {
    padding-right: 20px;
}

.markdown-body code {
    margin: 0;
    padding: .2em .4em;
    border-radius: 3px;
    background-color: rgba(27,31,35,.05);
}

.markdown-body pre {
    word-wrap: normal;
}

.markdown-body pre>code {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0 0;
    white-space: pre;
    font-size: 100%;
    word-break: normal;
}

.markdown-body pre code {
    display: inline;
    overflow: visible;
    margin: 0;
    padding: 0;
    max-width: auto;
    border: 0;
    background-color: transparent;
    word-wrap: normal;
    line-height: inherit;
}

.markdown-body kbd {
    display: inline-block;
    padding: 3px 5px;
    border: solid 1px #d1d5da;
    border-radius: 3px;
    background-color: #fafbfc;
    box-shadow: inset 0 -1px 0 #c6cbd1;
    color: #444d56;
    vertical-align: middle;
    font: 11px SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
    line-height: 10px;
    border-bottom-color: #c6cbd1;
}

.markdown-body hr {
    border-bottom-color: #bbb;
}

.markdown-body li>pre {
    margin-top: 5px;
}
我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多1分钱的金额
既可免费赞赏,又可完成支付宝支付任务!
Last modification:December 2nd, 2018 at 02:32 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

11 comments

  1. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    博主,你遇到过这种情况吗?
    我使用了EditorMD的编辑器里面的代码块(多语言风格),没有效果

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
      @Noob

      没开前台接管吧,但是Editormd的前台接管和handsome有冲突
      而且handsome是自带多语言高亮的,直接在主题设置开就行了

      1. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
        @神代綺凜

        我开了,没效果

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
          @Noob

          反正如你所见,我这里就是Editormd取消前台托管 + parsedown插件 + handsome代码高亮

  2. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    表情不够丰富,差评

  3. Mikusa  Android 8.0.0(Android 8.0.0) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    哇哦!star备用OωO

  4. 熊猫小A  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    好耶,我也很喜欢 GitHub 的样式~

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
  5. badun  Mac OS X(Mac OS X) / Safari 11.0(Safari 11.0)

    超赞!问下大佬引入这个样式的话 前台解析直接是用编辑器接管吗就可以吗 插件需要把没用的去掉吗?

    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @badun

      no,这个样式是独立的,和这些一点关系都没

      1. kylin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
        @神代綺凜

        插件更新了下 样式很好用!