修改html代码块中的tab宽度
在写blog中发现的问题, 我的代码块tab默认的宽度是8个空格, 看起来很不舒服, 并且由于缩进太占空间导致显示不全, 遂改之
方法一 将制表符替换为空格
这是一个比较暴力的方法 直接把制表符替换为你需要的指定数目的空格
我这里是用的highlight.js来进行代码块的高亮, 在引用该js文件后直接调用其API, 插入下述代码块
1 |
|
hexo用户可以在 _config.yml
文件中直接设置, 省去在ejs模板中添加代码的麻烦
1 |
|
甚至 你可以自己用JavaScript写个replace函数来替换
1 |
|
这样做的缺点是会丢失制表符的信息, 其他用户在复制你的代码后, 原先的tab符都变成了空格
方法二 通过修改css样式
在CSS3中新增了tab-size
属性, 可以指定tab为多少空格的宽度,这个值默认为8
1 |
|
一般来说在pre
或者code
这样的标签中来设定这个属性
缺点是可能有些上古的浏览器不支持(说的就是你!IE10.0之前的版本), 这个基本可以忽略不计, 所以可以当成是没有缺点
当然, 如果你是一个空格缩进党, 那么太好了, 你将完全不会为tab到底多宽而烦恼
正所谓:
众猿皆谓 tab 巧,
无人知晓空格好。
大手一拍按到底,
爱空多少空多少。
修改html代码块中的tab宽度