Visual Studio "Markdown Preview Enhanced"插件將markdown文件轉換成html文件或pdf文件，帶目錄

前提：已安裝Visual Studio工具

 

Window10 64bit

1.

 

 

快捷鍵：

 

 

2. 重啟VScode編輯器

3. 拖入markdown文件到 VScode編輯器

右鍵 --- 選擇如圖所示菜單項：

 

 

此時窗口分割成兩欄：

 

 

4. 上述右側欄 --- 右鍵 --- HTML ---->

 

就可以生成html文件或生成pdf文件，但是生成的html文件沒有目錄，html文件如何生成側邊欄目錄呢？繼續往下看

 

5. 下載安裝node工具

http://nodejs.cn/download/

https://cdn.npm.taobao.org/dist/node/v14.14.0/node-v14.14.0-x64.msi   win 64bit

 

6. 安裝 i5ting_toc

安裝node ok后，輸入cmd打開終端，輸入：npm install i5ting_toc -g

 

 

i5ting_toc 用法：

 

案例：

轉換html，輸入i5ting_toc -f [需要轉換文件名].md默認在同級目錄生成preview文件夾，打開preview下的同名.html文件或者直接i5ting_toc -o可預覽

完成，在html文件的側邊欄生成了目錄，效果如下：

 

 

 

---

 

如何在html文件頂部生成目錄呢？方法如下：

1. 通過vscode工具打開 md 文件

2. 打開預覽：鼠標右鍵 --- 選擇如下菜單項

 

 

3.鼠標定位在md文件需要生成目錄的地方(文件的第一行)，然后輸入快捷鍵： ctrl+shift+P，再輸入內容：Markdown Preview Enhanced: Create Toc

Enter按鍵后，顯示：

 

 

然后ctrl+s保存，預覽界面即可生成目錄，效果如下：

 

 

腳本：md2html.bat

功能：拖動md文件 到bat腳本圖標上，在md文件的同級目錄就會 preview 目錄，里面包含html文件，例如將腳本放到桌面上，直接拖動md文件即可快速生成

@echo off
echo file name:%~n1%~x1

start /b i5ting_toc -f  %~n1%~x1

 

另：

https://www.bookstack.cn/books/mpe

https://blog.csdn.net/weixin_38601833/article/details/94585595