vscode编写markdown

  • [1. 需求分析](#1. 需求分析)
  • [2. 环境搭建](#2. 环境搭建)

1. 需求分析

最近在网上折腾了好久Markdown的写作环境,作为一个普通用户,总结一下个人对于Markdown写作环境的几点需求。由于本人刚接触Markdown不久,因此,需求也比较简单,想看具体搭建步骤的可以直接跳到第二章环境搭建

  1. 本地存储。这一点主要是出于隐私要求,由于记录内容和个人强相关,以目前的网络环境来看,文件存在本地最为安全。
  2. 云端同步。这一条和第一点并不矛盾,在作者想要发布的时候,能够方便地将文档发布到云端,不想发布的时候,只在本地存储,而当云端文档发生变化时,也能及时pull到本地。
  3. 实时预览。所写即所见,写出来的同时能够看到效果,这对于修改和写作非常重要!反之,没有预览效果,用户难以把握最终完成效果。部分编辑器虽然有预览的功能,但预览需要手动点击或执行快捷键操作,这种非实时的预览,会导致用户在写作时,注意力不断被打断,写作体验非常不流畅。
  4. 同步滑动原文定位 。当文档过长时,预览和原文往往很难对应起来,这表现为两个方面:
    • 编辑或修改完原文之后,不知道最终预览情况,这个时候原文和预览同步滑动,可以帮用户快速定位到当前编辑的位置,并查看预览效果。
    • 当用户发现预览没有达到预期效果,并尝试进行更改时,如果预览不支持反向定位到原文,那么用户可能会花费很长的时间才能找到原文中对应的位置。
  5. 工具栏。虽然Markdown语法简单,容易学习,但是对于普通用户来说,依然存在学习门槛,而且一段时间不使用的话,语法和快捷键操作很容易忘记。如果编辑器有工具栏,那么用户的学习成本就大大降低了。毕竟大多数用户并不是经常写作,而且工作生活中需要学习的东西已经太多了,即使是简单的语法,对于普通用户来说,学习成本也会很高(学习成本并非线性增长)。
  6. 图片上传。在使用各类编辑器之前,我原以为这是一个非常常规的需求,然而网上各类方法对于这个功能的实现并不理想。
  7. 背景颜色可变
  8. 支持表格,流程图等语法
  9. 目录生成,也称TOC生成。

2. 环境搭建

总体思路是,采用vscode作为文本编辑器,同时利用各类插件,实现以上各类需求。vscode的安装这里就不赘述了。这里重点介绍使用到的Markdown插件。

  1. Markdown All in One。支持实时预览,同步滑动,快捷键,目录生成等各种功能。打开命令面板,在其中输入mio,可以快速查找该插件支持的各种命令。
  2. learn-markdown。微软官方推出的markdown插件,对于小白而言,最好用的是有一个工具栏常驻在状态栏里,避免记忆常用的快捷键。
  3. 博客园cnblogs客户端。博客园推出的官方插件,借用该插件可以实现图片上传,云端同步的功能。
  4. Markdown TOC & Chapter Number。支持右键目录生成,标题编号。如果熟练使用了Markdown All in One的目录生成功能,该插件可选。
  5. Markdown Theme Kit。微软官方推出的markdown插件,支持几种markdown主题,当然也可以直接改变vscode的theme。

以上插件均为本人亲测后,感觉使用体验良好的插件,如果大家还有用过不错的插件,欢迎推荐和交流。

补充一些网友推荐的其他插件,这里汇总一下:

  1. Picgo:图床,也可以用来上传图片,进行图片管理;
  2. Pangu-Markdown:格式化文档;
  3. Marp for VS Code:Markdown转PPT;
  4. markmap:Markdown转思维导图。
    谢谢各位网友的推荐!
相关推荐
阿斯卡码2 小时前
jupyter添加、删除、查看内核
ide·python·jupyter
dllmayday3 小时前
VSCode 多工程联合调试
ide·vscode·编辑器
霖雨3 小时前
使用Visual Studio Code 快速新建Net项目
java·ide·windows·vscode·编辑器
一丝晨光5 小时前
编译器、IDE对C/C++新标准的支持
c语言·开发语言·c++·ide·msvc·visual studio·gcc
镭封6 小时前
android studio 配置过程
android·ide·android studio
fll9802059 小时前
配置修改Vim编辑器中TAB键的缩进长度
linux·编辑器·vim
七月的和弦9 小时前
将vscode的终端改为cygwin terminal
ide·vscode·编辑器
weixin_3870021510 小时前
vscode使用之vscode-server离线安装
ide·vscode·编辑器
逐·風10 小时前
Unity编辑器的高级扩展技术
unity·编辑器·游戏引擎
cmdyu_14 小时前
在vscode实现用和Chrome开发者工具中相同的快捷键进行面板切换
ide·chrome·vscode