一直很喜欢 Github 的 Markdown 样式,简洁赏心悦目,因此拿过来并做了些调整以适合博客主题
Head Pic: 「しろいいぬ&マロンちゃん」/「unwitherer」のイラスト [pixiv]
Github Markdown Style
初始样式来源于:
以下是经过修改与调整的样式,去除了部分博客用不到的样式,以及按照个人喜好做了调整(字体大小等)
目前本博客使用的就是该样式,效果可自由翻阅各文章查看(以及,当然,给出的样式中不含本博客使用的代码块样式)
需要自行给模版文章正文元素加上markdown-body
类,或批量替换范围
版权声明:本文为原创文章,版权归 神代綺凜 所有。
本文链接:https://moe.best/modification/github-css.html
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
https://github.com/highlightjs/highlight.js/tree/master/src/styles
#bg
自行参考是在后台定义的marked解析规则...
重写了..renderer.code..
话说,生成pre-row 除了遍历外没有啥好办法么?
找了半天highlight居然没有生成行号的办法...?
行号我当时考虑了几种方法
1、用
<li>
2、你现在看到的
pre-row
,并和<code>
进行滚动绑定,我认为是开销最小最简单的实现3、利用CSS3函数特性设置每行的 before
后面加上去的...滚动绑定是怎么个做法....
我实际生成这个行号.除了CSS外都试了下..然而..总是对不齐 ...求大佬分享实现...
附带一提...我看了个hexo的带行号代码块...是一个table 里的两列..一列行号,一列代码块....
感觉好麻烦...
对齐无非就是并排并且注意padding细节,你可以自行参考我这里的样式
我使用了EditorMD的编辑器里面的代码块(多语言风格),没有效果
而且handsome是自带多语言高亮的,直接在主题设置开就行了