vscode怎么寫markdown? VSCode編輯Markdown的技巧

如何優雅使用VS Code寫Markdown?VS Code是很多人都在使用的文本編輯器,那么這篇經驗就教大家如何在VS Code下編輯Markdown,詳細請看下文介紹。

在VS Code中安裝MPE拓展

安裝好VS Code后,我們來教大家安裝MPE拓展,點擊VS Code界面上的拓展按鈕(圖中標紅):文章源自四五設計網-http://www.wasochina.com/37104.html

vscode怎么寫markdown? VSCode編輯Markdown的技巧-1文章源自四五設計網-http://www.wasochina.com/37104.html

然后在搜索欄中輸入“Markdown Preview Enhanced”,第一個出現的便是,因為我已經安裝過了,否者標紅的地方會有一個安裝按鈕,點擊安裝即可。文章源自四五設計網-http://www.wasochina.com/37104.html

vscode怎么寫markdown? VSCode編輯Markdown的技巧-2文章源自四五設計網-http://www.wasochina.com/37104.html

安裝后即可使用MPE來進行Markdown文檔的編輯了,下面給大家介紹這個插件的幾個好用的功能。文章源自四五設計網-http://www.wasochina.com/37104.html

本地預覽

假設我們有以下md文檔,右鍵文本編輯區,我們會發現可選的操作中多了一條Preview,點擊這條便可以查看預覽效果:文章源自四五設計網-http://www.wasochina.com/37104.html

vscode怎么寫markdown? VSCode編輯Markdown的技巧-3文章源自四五設計網-http://www.wasochina.com/37104.html

或者也可以使用快捷鍵ctrl+K,再按v,預覽效果如下:文章源自四五設計網-http://www.wasochina.com/37104.html

vscode怎么寫markdown? VSCode編輯Markdown的技巧-4文章源自四五設計網-http://www.wasochina.com/37104.html

生成目錄

MPE支持自動生成目錄的功能,只需要在想插入目錄的地方加入代碼“[TOC]”即可,如下圖所示:文章源自四五設計網-http://www.wasochina.com/37104.html

vscode怎么寫markdown? VSCode編輯Markdown的技巧-5

預覽效果如下圖所示:vscode怎么寫markdown? VSCode編輯Markdown的技巧-1

引入文件

MPE支持從外部引入各類文件,包括圖片、表格、代碼等。

代碼為:

@import <文件名>

引入圖片效果:

vscode怎么寫markdown? VSCode編輯Markdown的技巧-7

引入表格效果:

vscode怎么寫markdown? VSCode編輯Markdown的技巧-8

引入代碼效果:

vscode怎么寫markdown? VSCode編輯Markdown的技巧-9

Latex公式輸入

MPE使用KaTex引擎來驅動Latex公式的輸入,方便了大家在md文件中輸入公式。

公式輸入效果如下:

vscode怎么寫markdown? VSCode編輯Markdown的技巧-10

注意事項:

更多功能大家可以查看MPE官網。

以上就是VSCode編輯Markdown的技巧,希望大家喜歡。

我的微信
微信掃一掃
weinxin
我的微信
惠生活福利社
微信掃一掃
weinxin
我的公眾號
 
  • 本文由 四五設計網小助手 發表于 2023年12月5日09:55:05
  • 轉載請務必保留本文鏈接:http://www.wasochina.com/37104.html

發表評論

匿名網友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖動滑塊以完成驗證