Hexo去除代码块滑动条

最近将hexo升级到3.0,突然发现在代码块部分出现了滑动条,滑动条不仅挡住了代码,而且特别的难看啊有木有!(chrome除外,由此对Google更加喜欢了,May God use chrome !),对于我这种追求美的重度强迫症患者来说,简直不能忍,于是开启了修bug之路.

其实这个问题确实是hexo3.0的一个bug,在github的issues中也讨论过,第一个方法就是降级hexo,用老版本,第二个方法就是更改hexo的代码,由于自己技术水平有限,源代码读不懂,下面我把自己的方法贴出来.

更改该主题中的代码块显示设置 , 我的主题Yilia

源代码:themes/yilia/source/css/_partial/highlight.styl文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.article-entry
pre, code
font-family: font-mono
code
background: color-background
padding: 0 0.3em
border: none
pre
@extend $code-block
color: code-word
overflow: hidden //去除滑动条
code
background: none
text-shadow: none
padding: 0
color: code-word
.highlight
@extend $code-block
border-radius: 4px
pre
border: none
margin: 0
padding: 0
padding-bottom: 5px; //调整最后一行显示
  • 通过浏览器的检查功能,定位到滑动条的位置,在color: code-word属性下面添加overflow: hidden

  • padding-bottom: 5px;调整最后一行显示, 否则显示不全

最终效果: