Hexo代码高亮及代码块出现滚动条

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
字数统计：473 字 | 阅读时长：2 分钟

昨晚不知道因为改了什么配置，导致原先默认的Next主题的代码高亮失效了，接下来就是一番折腾。

代码高亮

确认下站点的_config.yml，包含以下配置:

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: true

接下来，就不能按照之前代码只用缩进块来表示为代码块了，这样不能高亮啊，真是神奇了

此时应该使用Markdown语法的，用``` code block ```，用六个 ` 把代码包起来
```cpp (这里就可以随意发挥了，肯定不仅仅是cpp啊，java/javascript/C/objc/shell…写不下了)
此处应有代码
```

可以了，设置完成，就可以happy般的去 hexo clean;hexo g;hexo s, 本地查看一下代码高亮效果；

代码块滚动条

本以为这样就万事大吉了，查看更新的网页，代码是高亮了，却出现了恶心的滚动条，不管代码是几行，都会出现那个滚动条，还是左右两边都有，作为强迫症患者怎么可以忍受，接着Google了一大圈，找到了良药

使用github和hexo搭建博客问题总结

感谢该博主精心研究

对应需要修改的内容

node_modules/hexo-util/lib/highlight.js

将第一段代码修改成下面第二段代码，div标签修改为span，并增加换行br

1
2
3
4
5
6
7
8
for (var i = 0, len = lines.length; i < len; i++) {
  line = lines[i];
  if (tab) line = replaceTabs(line, tab);
  numbers += '<div class="line">' + (firstLine + i) + '</div>';
  content += '<div class="line';
  content += (mark.indexOf(firstLine + i) !== -1) ? ' marked' : '';
  content += '">' + line + '</div>';
}
1
2
3
4
5
6
7
8
for (var i = 0, len = lines.length; i < len; i++) {
  line = lines[i];
  if (tab) line = replaceTabs(line, tab);
  numbers += '<span class="line">' + (firstLine + i) + '</span><br>';
  content += '<span class="line';
  content += (mark.indexOf(firstLine + i) !== -1) ? ' marked' : '';
  content += '">' + line + '</span><br>';
}

代码高亮又恢复如初，就是得把之前几篇博客的代码中，加上``` ```