神代綺凛

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

[CSS] Github Markdown Style for Handsome

  1.  Home
  2. Text  
    3. Share to：

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

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

Github Markdown Style

初始样式来源于：

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

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

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

版权声明：本文为原创文章，版权归 神代綺凜 所有。

本文链接：https://moe.best/modification/github-css.html

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
季付$47，CN2 GIA线路，1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买】
Last modification：March 31st, 2019 at 12:54 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

28 comments

  1. 槐序二三煊  Mac OS X 10.13.6(Mac OS X 10.13.6) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)
    这具体怎么用啊。
    Reply
  2. 戴耳环的鱼  Windows 10 x64 Edition(Windows 10 x64 Edition) / TheWorld Browser(TheWorld Browser)
    请教大佬：代码高亮，是怎么修改的？
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)
      @戴耳环的鱼 https://highlightjs.org/static/demo/
      https://github.com/highlightjs/highlight.js/tree/master/src/styles
      Reply
  3. handsl  Windows 7(Windows 7) / Firefox 65.0(Firefox 65.0)
    该评论仅登录用户及评论双方可见
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @handsl
      该评论仅登录用户及评论双方可见
      Reply
  4. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    大佬，请教handsome主题怎么实现非盒子模型也有背景？能否奉告？
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @伳影 改模板，在我这打开F12搜#bg自行参考
      Reply
      1. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 我都做好了你才回复我qwq xay.tw
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @伳影
          Reply
          1. 伳影  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜
            Reply
  5. 音空  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    是直接插入到自定义css那里得嘛（什么都不懂系列）
    Reply
  6. 无忧  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 57.0.2987.98(Google Chrome 57.0.2987.98)
    大佬，你这代码块的样式怎么弄得
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @无忧 无可奉告（）
      Reply
      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居然没有生成行号的办法...?
        Reply
        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

          Reply
          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 里的两列..一列行号，一列代码块....
            感觉好麻烦...
            Reply
            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细节，你可以自行参考我这里的样式

              Reply
  7. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    博主，你遇到过这种情况吗？
    我使用了EditorMD的编辑器里面的代码块(多语言风格)，没有效果
    Reply
    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是自带多语言高亮的，直接在主题设置开就行了
      Reply
      1. Noob  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 71.0.3578.80(Google Chrome 71.0.3578.80)
        @神代綺凜 我开了，没效果
        Reply
        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代码高亮
          Reply
  8. Zero  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    表情不够丰富，差评
    Reply
  9. Mikusa  Android 8.0.0(Android 8.0.0) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    哇哦！star备用OωO
    Reply
  10. 熊猫小A  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    好耶，我也很喜欢 GitHub 的样式~
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
      @熊猫小A
      Reply
  11. badun  Mac OS X(Mac OS X) / Safari 11.0(Safari 11.0)
    超赞！问下大佬引入这个样式的话 前台解析直接是用编辑器接管吗就可以吗 插件需要把没用的去掉吗？
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @badun no，这个样式是独立的，和这些一点关系都没
      Reply
      1. kylin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
        @神代綺凜 插件更新了下 样式很好用!
        Reply