用vscode写Markdown时tab键在网页上缩进错误问题

用vscode写Markdown时tab键在网页上缩进错误问题

问题描述

这两天在写博客时,遇到了一个奇怪的错误,就是在博客上传到网站上预览时,代码块中用tab键缩进的空格变成了8空格。我平时用vscode来编写博客,在本地渲染预览时没有问题,显示为4个空格,然而传到博客网站上时就变成8空格,有些奇怪。

博客网站上显示:

本地预览:

问题分析

我一开始以为是我的tab-size设置有误,于是我检查了我的tab-size设置,发现并无问题,就是4个空格。

后来我想起之前在编辑微信公众号时使用的秀米排版编辑器遇到的问题,当时首行缩进不能直接用空格,否则会导致排版错误。于是我又检查了是否是因为自己误用空格或空行导致一些格式错误、渲染错误啥的,重新检查打了一遍后,发现网站上显示还是又有问题,看来并不是空格空行导致的。

解决方案

最终通过查阅资料,解决了这个问题。

解决方案如下:

  • 首先打开vscode的命令窗口(在vscode中用快捷键ctrl + shift + p
  • 然后在命令窗口输入convert,会自动弹出下面这两个命令,我们选择Convert Indentation to Spaces将tab缩进转为空格命令。
  • 然后我们在去博客网站上预览,发现成功变回4空格。

以上问题就成功解决了,成功上传显示无问题后还是挺开心的。

相关推荐
Hilaku几秒前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
Running_C11 分钟前
常见web攻击类型
前端·http
jackyChan11 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang45311 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端
豆苗学前端16 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
光影少年17 分钟前
react16-react19都更新哪些内容?
前端·react.js
奇舞精选24 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
我命由我123451 小时前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO1 小时前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了1 小时前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js