vscode markdown_搭建 Markdown 舒适写作环境（VSCode，含扩展盘点）

最新推荐文章于 2024-06-16 12:47:58 发布
最新推荐文章于 2024-06-16 12:47:58 发布
阅读量622 收藏 1
点赞数 1
文章标签： vscode markdown vscode使用draw.io 在vscode运行js 输出会合并 扩展单精度格式是什么

Markdown 编写环境概览

Markdown 是一种易于读写的轻量级的标记语言，编写出的作品简洁美观，近年来受到了越来越多的追捧，被广泛地用于日常写作，乃至电子书发表。与此同时，一系列优秀 Markdown 编辑器应运而生。其中较为著名的有，Typora（免费，跨平台）、MarkText（开源，跨平台）、Zettlr（开源，跨平台）、Mou（免费，MacOS）、MacDown（开源，MacOS）等等。

VSCode 是当下最流行的代码编辑器，拥有丰富的扩展，这也使其成为最强大的文本编辑器之一（拒绝伤害 Vim 党人及 Emacs 党人），搞定 Markdown 自然不在话下。与上面提到的编辑器相比，VSCode 的明显优势有：

  • 集成的布局：大纲（outline）、工作区（workspace）；
  • 强大的补全：LaTeX 公式；
  • 丰富的扩展：方便整合其他工具（详见下文的功能扩展部分）；

本文介绍的内容包括：

  • Markdown 基础扩展；
  • Markdown 的格式转换；
  • Markdown 绘图；
  • Markdown 制作 PPT；
  • Markdown 订制日记；
  • Markdon 知乎发布；

基础扩展

VSCode 默认是支持 Markdown 的，但还是有必要安装下面几个插件提高写作效率。

  • Markdown All in One
  • Markdown Preview Enhanced
  • Markdown Shortcuts

Markdown All in One

如名称所述，这是个大一统型的扩展，集成了撰写 Markdown 时所需要的大部分功能，是 Markdown 类插件中下载榜榜首。可以认为是 VSCode 中的 Markdown 必备扩展。其功能涵盖：

  • 快捷键
  • 自动生成并更新目录
  • 自动格式化表格
  • LaTeX 数学公式支持

0d5e92a9b15608cdbb53eaf86e391a09.png
关于 Markdown 语法的总结，可参考这篇
请服我一把：Markdown 基本语法​zhuanlan.zhihu.com
966e166b08eeb5f665069537f4c596ca.png

Markdown Preview Enhanced

这是一个可以让 VSCode 秒变 Markdown 神器的扩展。其功能之丰富足够另写一篇单独介绍。下面仅列出几个经常被人安利的功能：

  • 目录：导入章节文件，组成长篇文档；
  • 批注：使用==文本==，使文本高亮；
  • 合并单元格：像 Excel 一样实现表格单元格合并；
  • 上下标：直接对文本使用上下标，不必使用 LaTeX；
  • 支持表情（emoji）和 绘图插件（mermaid.js）；
  • 运行代码：文档里直接运行 Python 等脚本语言代码；

b74a46a3b5e15592c386cd0489f06471.png

关于这个扩展的详细介绍，可参阅这篇

Aya Magician：在 VSCode 下用 Markdown Preview Enhanced 愉快地写文档​zhuanlan.zhihu.com
914fec15918533e4d589e8d17d89fbf7.png

以及 Markdown Preview Enhanced（MPE） 的官方文档

Markdown Preview Enhanced​shd101wyy.github.io

Markdown Shortcuts

这个扩展会让 Markdown 的写作更加丝滑，其在右键上集成了大部分常用格式，这样再也不用花精力去记忆那么多快捷键了。

e544dd8a3712b8a6483961557574f9cf.png

功能扩展

格式转换 Pandoc 是文档格式领域的瑞士军刀，几乎实现了常见文档格式所有转换，像 .docx，.md，.html，.pdf 这些格式更是不在话下。给个其官网部分截图（涉及的格式实在太多，截取三分之一，字就已经特别小了）。

3093c7ebd305c1b320f2fd645e8bf477.png

Pandoc 的下载可以去官网手动下载

Pandoc​pandoc.org

也可以使用包管理器自动下载。 对 Windows 用户，有 Scoop 和 Chocolatey

scoop install pandoc
choco install pandoc

对 MacOS 用户，有 Homebrew

brew install pandoc

安装完毕后，在 VSCode 中安装相关扩展，这里首推 vscode-pandoc，可以实现 .md 到 .pdf，.docx 和 .html 的转换。

94a5e1130f14643ec13ee7d30c81ee05.png

字数统计
这里推荐 Word Count CJK，可以对各种字符进行统计，安装扩展后，在 setting.json 中修改

{

至此，VSCode 已经实现了 Typora 等 Markdown 编辑器除所见即所得（WYSIWYG）之外的全部功能。

文档绘图

很多时候，写文档难免需要绘制一些用于说明的插图，如流程图、甘特图等，这个时候，如果另开一个应用画图，再导入文档，则略显繁琐。前文提到的 MPE 扩展支持的 mermaid.js 可以轻松解决这一难题。简单说，mermaid.js 就是一个 Markdown 的绘图工具包，关于其介绍，可参考这篇

请服我一把：Markdown 绘图（Mermaid.js）​zhuanlan.zhihu.com
4ca5e7354d09b663fd1d9419ec5ec86c.png

当然，如果习惯于图形化的界面，VSCode 现在提供了另一种选择，即大名鼎鼎的 http://Draw.io 的内嵌扩展，安装完毕后三连：➡️ 新建 .drawio 文件 ➡️ 傻瓜绘图 ➡️ 导出为需要的格式。

702345e2708a851f6beac71c714b2df0.png

PPT 制作

实际上，MPE 扩展还支持制作 PPT，不过其利用的是 reveal.js 进行渲染。这个 js 库虽然十分成熟，但是对于不了解 js 的用户来说，还是不怎么方便。

Marp，全称 Markdown Presentation Ecosystem，可以很好地解决这一痛点，其设计的目标就是使用 Markdown 书写 PPT，是一件 PPT 制作的利器。

经过最近的重要更新，Marp 已经可以很好的集成于 VSCode，只需按照 Marp for VS Code 扩展即可。

Marp 的官网地址为
(https://marp.app/)​marp.app

4f871f970b55f29acdbae3d0d9a05fab.png

Marp 使用十分简单，可以非常方便地导出为 .pptx 和 .pdf 格式，下面是一个小小的例子

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.jpg')
---

![bg left:40% 80%](https://raw.githubusercontent.com/marp-team/marp/master/marp.png)

# **Marp**

Markdown Presentation Ecosystem

https://marp.app/

---

# How to write slides

Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

# Slide 1

foobar

968b2eea40d3c11fc3477c34da6b3143.png

当然，比之于 reveal.js 丰富的素材库，Marp 还有很长的路要走。目前，其作者服部（Yuki Hattori）已由此前的独立开发，组建了自己的团队，相信这个项目的未来无比光明。

订制日记

MEP 作者最近又发布了一个新作，Crossnote，这是个所见即所得（WYSIWYG）的笔记扩展，目前还是预览版本。看介绍，更像是开源软件 Notable（https://notable.md）的一个替代，做日记或者手账更合适。

1014a04b65d886d06f6f85bcd470c871.png

知乎发布
最近，VSCode 扩展市场里上架了 Zhihu On VSCode，这个扩展方便 Markdown 在知乎上一键发布，尤其适合存在大量图片和代码块的帖子，当然也在 VSCode 里看帖摸鱼。有兴趣的可以参看其作者的介绍。

牛岱：Zhihu On VSCode 0.22: 专栏管理上线？​zhuanlan.zhihu.com
132c2b8f9e564294eb8e617ece5e7bcf.png
weixin_39825941
关注
VScode下MarkDown【自动生成目录】 和 【画流程图】（最全教程）
Lee
11-27 3万+
关于插件Markdown Preview Enhanced（MPE）的使用技巧 目录： 关于插件Markdown Preview Enhanced（MPE）的使用技巧 0. Preview（预览） 1. 关于TOC 2. 绘制流程图 2.0 简介 2.1 flow 2.2 mermaid 2.2.0 配置绘图主题颜色 2.2.1 Flowchart（流程图） 2.2.2 Seque.........
md-color:vscode markdown写作插件。使用MarkDown写作时，可以使用`内容font>`给文本添加颜色。md-color就是针对此操作的偷懒工具
05-22
使用MarkDown写作时，可以使用内容给文本添加颜色。md-color就是针对此操作的偷懒工具。 使用方法 在Markdown文件中选中一段文本内容，使用快捷键ctrl+1或者cmd+1，md-color会随机颜色为这段文本添加属性。或者右键...
markdown 流程图js_vscode实现markdown流程图，vscodemarkdown
weixin_39936310的博客
12-23 307
vscode实现markdown流程图，vscodemarkdown1,vscode原生支持markdown，导出需要插件，基于node.js，需要node.js环境。2,只需要装一个预览插件神器：Markdown Preview Enhanced。 除了常规的功能外，特别要提出的是两个功能：(1)图像Markdown Preview Enhanced 内部支持 mermaid, PlantUML...
vscode实现markdown流程图
热门推荐
LaySwift
03-06 2万+
1,vscode原生支持markdown，导出需要插件，基于node.js，需要node.js环境。 2,只需要装一个预览插件神器：Markdown Preview Enhanced。 除了常规的功能外，特别要提出的是两个功能： （1）图像 Markdown Preview Enhanced 内部支持 mermaid, PlantUML, WaveDrom, GraphViz，Vega &...
Vscode 用MarkDown画流程图
fengliluohua的博客
11-09 3978
效果图 start=>start: 开始 input=>inputoutput: 输入 operation=>operation: 操作 condition=>condition: 操作出错？ output=>inputoutput: 输出 error=>operation: 请重新输入 end=>end: 结束 start->input input->operation operation->condition condition(no,bo
VS Code实现markdown画流程图
lee
12-02 8710
安装最新的vscode编辑器，原生支持markdown语法。不会markdow的人可以去好好学下，写文档神器!!! 1、安装Markdown Preview Enhanced插件 2、本地新建test.md文件 输入： ```flow st=>start: 页面加载 e=>end: End:>http://www.google.com op1=>operat...
markdown_to_asciidoc-1.0.jar
04-21
mvn install:install-file -DgroupId=nl.jworks.markdown_to_asciidoc -DartifactId=markdown_to_asciidoc -Dversion=1.0 -Dpackaging=jar -Dfile=C:\Users\lizz\Downloads\markdown_to_asciidoc-1.0.jar
vscode-markdown-preview-enhanced：Visual Studio Code的“最佳” markdown预览扩展之一
02-03
Markdown Preview Enhanced是一个扩展，为您提供了许多有用的功能，例如自动滚动同步，， ， ， ，PDF导出，， 等 灵感来自很多和 。 随时提出问题，发布问题，提交请求请求和请求新功能。 有关此项目以及如何使用...
vscode-markdown-shortcuts：Visual Studio Code的Markdown快捷方式扩展
02-04
用于编辑Markdown（ .md ， .markdown ）文件的便捷快捷方式。 您还可以在任何其他文件中使用降价格式（请参阅配置设置） 快速切换项目符号点 轻松生成URL 将表格数据转换为表格 上下文和标题菜单集成 您可以...
markdown_tags:VSCode的扩展，以支持markdown标签的“转到定义”
05-03
这是扩展名“ gotodef”的自述文件。 写下简短描述后，我们建议包括以下各节。 特征 描述扩展程序的特定功能，包括扩展程序的屏幕截图。 图像路径是相对于此README文件的。 例如，如果扩展项目工作空间下有一个图像...
Markdownjs:javascript中的Markdown解析器
05-02
Markdown.js 我找不到一个很好的客户端markdown-to-html转换器，所以我决定自己使用JavaScript，jQuery和正则表达式制作一个。 我已尽力不介绍自己的风格（或使用GitHub的风格）并保持。 检出index.html文件以演示脚本的功能。 ###功能大多数baisc Markdown功能都可以正常工作： 标头（6个级别） 粗体 斜体文字 删除线文字 无序列表 分频器（厚而薄） 内联HTML 换行 代码 ####示例Bellow是演示文件中输入内容的图像： 在包含输入的div上运行脚本后，结果如下所示： ＃＃＃主要特征 我的脚本的其他一些关键功能是： 可以从使用默认的html标签（例如标题的h1，h2，h3）切换到具有自定义类的spantag。 两种类型的分隔线，薄型（---）和厚型（===）。 相对较快，演示文件在使用5年的Mac
vscode-markdown-checkboxes:VS Code 扩展，为内置的 Markdown 预览添加了对复选框语法的支持
05-29
向 VS Code 的内置降价预览添加复选框/任务列表支持： 特征 在VS Code的内置markdown预览中增加了对Github的- [ ]和- [x]复选框语法的支持
vscode-markdown-mermaid:将人鱼图和流程图支持添加到VS Code的内置markdown预览中
04-28
Markdown预览美人鱼支持 将人鱼图和流程图支持添加到VS Code的内置markdown预览中 用法 使用mermaid围栏代码块在markdown中创建图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 您也可以使用:::块： ::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ::: 美人鱼 当前支持美人鱼版本8.9.0。 添加自定义CSS支持 您可以使用内置功能来添加自定义CSS。 可以在找到更多信息。 例如，像这样添加Font Awesome： "markdown.styles": [ "https://use.fontawesome.com/releases/v5.7.1/css/al
VSCode编写markdown文档--安装使用教程
最新发布
qq_39030233的博客
06-16 2060
VSCode安装后的默认界面是只有英文的，如果想用中文界面，那么就需要安装对应的插件，vscode插件可以从扩展中心去搜索并安装。根据需要，选择下载相关插件（我下载了前3个，其余插件仅大致说明功能）。如图所示，根据电脑操作系统选取对应的软件进行安装。
(转)vscode实现markdown流程图
weixin_30299539的博客
08-29 1296
原文：https://blog.csdn.net/LaySwift/article/details/79458947 1,vscode原生支持markdown，导出需要插件，基于node.js，需要node.js环境。2,只需要装一个预览插件神器：Markdown Preview Enhanced。 3,Markdown Preview Enhanced的键盘映射，按ctrl...
如何在vscode中显示markdow大纲
weixin_35755562的博客
01-07 3124
你可以在 Visual Studio Code 中使用 Markdown All in One 扩展来显示 Markdown 大纲。 首先，你需要在 Visual Studio Code 中安装 Markdown All in One 扩展。你可以在扩展面板中搜索 "Markdown All in One" 并进行安装。 然后，打开你想要显示大纲的 Markdown 文件。在文件视图的顶部，你会看...
Markdown.js：强大的纯JavaScript Markdown解析器
gitblog_00026的博客
03-20 2706
Markdown.js：强大的纯JavaScript Markdown解析器 项目地址:https://gitcode.com/evilstreak/markdown-js Markdown是一种轻量级且易于阅读的标记语言，被广泛用于编写博客、文档和README文件。Markdown.js是由EvilStreak创建的一个开源项目，它是一个用纯JavaScript编写的Markdown解析库。如果...
wangEditor 富文本上传照片
Acitylion的博客
03-29 654
const E = window.wangEditor const editor = new E('#div1') editor.config.excludeMenus = [ 'video' ] editor.config.uploadImgParams = { token: sessionStorage.getItem('token') } editor...
vscode打造最佳的markdown编辑器
weixin_34088838的博客
01-09 746
参考：https://www.jianshu.com/p/18876655b452 在macos下也设置成功：
vscode markdown
07-20
VSCode的Markdown扩展提供了丰富的功能，使得编写Markdown文档变得更加高效和便捷。首先，VSCode支持Markdown的语法高亮显示，方便我们识别和编写不同的Markdown标记。其次，VSCode提供了快捷键和自动完成功能，帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值