修改html代码块中的tab宽度

在写blog中发现的问题, 我的代码块tab默认的宽度是8个空格, 看起来很不舒服, 并且由于缩进太占空间导致显示不全, 遂改之

方法一 将制表符替换为空格

这是一个比较暴力的方法 直接把制表符替换为你需要的指定数目的空格

我这里是用的highlight.js来进行代码块的高亮, 在引用该js文件后直接调用其API, 插入下述代码块

<script>
    hljs.configure({
        tabReplace: '    ', // 4 spaces
    })
    hljs.initHighlighting();
</script>

hexo用户可以在 _config.yml 文件中直接设置, 省去在ejs模板中添加代码的麻烦

highlight:
  enable: true
  line_number: true
  auto_detect: false
  #tab_replace://do not replace tab with space
  tab_replace: '    ' //replace tab with 4 space
  ...

甚至 你可以自己用JavaScript写个replace函数来替换

var tabReplace = "    ";
function replaceTab(tabReplace){
    $("pre").text($("pre").text().replace(/\t/g, tabReplace));
}
replaceTab(tabReplace);

//or do it in one line
$("pre").text($("pre").text().replace(/\t/g, "    "));

这样做的缺点是会丢失制表符的信息, 其他用户在复制你的代码后, 原先的tab符都变成了空格

方法二 通过修改css样式

在CSS3中新增了tab-size属性, 可以指定tab为多少空格的宽度，这个值默认为8

pre{
    tab-size: 4;
}  

一般来说在pre或者code这样的标签中来设定这个属性

缺点是可能有些上古的浏览器不支持(说的就是你！IE10.0之前的版本), 这个基本可以忽略不计, 所以可以当成是没有缺点

当然, 如果你是一个空格缩进党, 那么太好了, 你将完全不会为tab到底多宽而烦恼

正所谓:

众猿皆谓 tab 巧,
无人知晓空格好。
大手一拍按到底,
爱空多少空多少。