神代綺凜

[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;
}
搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多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

25 comments

  1. handsl  Windows 7(Windows 7) / Firefox 65.0(Firefox 65.0)
    该评论仅登录用户及评论双方可见
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @handsl
      该评论仅登录用户及评论双方可见
  2. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    大佬,请教handsome主题怎么实现非盒子模型也有背景?能否奉告?

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @伳影

      改模板,在我这打开F12搜#bg自行参考

      1. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜

        我都做好了你才回复我qwq xay.tw

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          1. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
  3. 音空  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    是直接插入到自定义css那里得嘛(什么都不懂系列)

  4. 无忧  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 57.0.2987.98(Google Chrome 57.0.2987.98)

    大佬,你这代码块的样式怎么弄得

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @无忧

      无可奉告()

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

        我猜..
        是在后台定义的marked解析规则...
        重写了..renderer.code..
        话说,生成pre-row 除了遍历外没有啥好办法么?
        找了半天highlight居然没有生成行号的办法...?

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

          没有,纯JS实现的

          行号我当时考虑了几种方法
          1、用<li>
          2、你现在看到的pre-row,并和<code>进行滚动绑定,我认为是开销最小最简单的实现
          3、利用CSS3函数特性设置每行的 before

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

            这么一说我还特的看了眼..一开始进入的时候代码块那里没有行号....
            后面加上去的...滚动绑定是怎么个做法....
            我实际生成这个行号.除了CSS外都试了下..然而..总是对不齐 ...求大佬分享实现...
            附带一提...我看了个hexo的带行号代码块...是一个table 里的两列..一列行号,一列代码块....
            感觉好麻烦...

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

              滚动绑定就是监听code的scroll事件,并将行号也滚动到相同位置,百度有很多示例

              对齐无非就是并排并且注意padding细节,你可以自行参考我这里的样式

  5. 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代码高亮

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

    表情不够丰富,差评

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

    哇哦!star备用OωO

  8. 熊猫小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)
  9. 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)
        @神代綺凜

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