007's Studio.

Visual Studio Code写Markdown中代码块tab缩进错误

字数统计: 521阅读时长: 1 min
2019/08/18 Share

问题描述:最近写使用markdwon写博客,本人习惯在本地用visual studio code编写,然后上传。vs code自带一个侧边预览窗口(右上角)可以查看markdown文档结果。平时也是用这个。后面写博客发到自己个人的网站上时,发现有时候 tab 键缩进 4个空格,有时候缩进 8个空格。

如图:第一个图是网页上的效果,可以看到一些 tab缩进是4,有一些是8

网页上的效果
下面是我这篇博客本地文件及效果:可以看到文件中缩进均是一个tab键,同时采用vs code的自带预览效果都是缩进4个空格。但是与实际网页的效果不同。
本地文件及预览效果
后面我还尝试在csdn在线的markdown编写,一个tab缩进4个空格,但是我导出markdown上传到自己个人网站还是发现有tab出错。

 一开始我以为是我的 tab-size实质错误,但是我始终的设置的是4。如下图:
tab-size
后面我尝试使用了一款vs code中的Markdown Preview Enhanced插件,利用该插件进行预览而不是使用默认自带的预览工具。利用该工具后,还是预览上面的那段代码,发现效果和我实际网页上显示的效果一致,有部分tab缩进为8空格。
本地预览及效果2

解决

最终,经过一番查找资料,我们可以将 tab缩进转换成空格来消除 tab 缩进引起问题。在vs code中我们按Ctrl + Shift + p,调出命令窗口,输入 convert 就可以看到下面两个命令,我们选择 convert Indentation to Spaces命令将文件中得到缩进转换为空格。然后我们再用 Markdown Preview Enhanced进行预览。发现此时所有的tab 都是缩进 4个空格。
Command
下图是转后后的效果,完成了对tab缩进不一致的问题修复。后面我们还可以
再尝试命令convert Indentation to Tabs,我们会发现又出现刚才缩进不一致的现象。
修复后效果

原文作者:007havegone

原文链接:http://007havegone.github.io/2019/08/18/VSCode写Markdown中代码块tab缩进错误/

发表日期:August 18th 2019, 9:40:44 pm

更新日期:August 19th 2019, 12:24:03 am

版权声明:‘原创内容,转载时请附上出处’

CATALOG
  1. 1. 问题描述:最近写使用markdwon写博客,本人习惯在本地用visual studio code编写,然后上传。vs code自带一个侧边预览窗口(右上角)可以查看markdown文档结果。平时也是用这个。后面写博客发到自己个人的网站上时,发现有时候 tab 键缩进 4个空格,有时候缩进 8个空格。
  2. 2. 解决