神代綺凜

[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类,或批量替换范围

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
Last modification:March 31st, 2019 at 12:54 pm
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)

    这具体怎么用啊。

  2. 戴耳环的鱼  Windows 10 x64 Edition(Windows 10 x64 Edition) / TheWorld Browser(TheWorld Browser)

    请教大佬:代码高亮,是怎么修改的?

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)
  3. 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
      该评论仅登录用户及评论双方可见
  4. 伳影  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)
  5. 音空  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

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

  6. 无忧  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细节,你可以自行参考我这里的样式

  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的编辑器里面的代码块(多语言风格),没有效果

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

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

    表情不够丰富,差评

  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

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

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