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转思维导图。
    谢谢各位网友的推荐!
相关推荐
VidDown10 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
摇滚侠10 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
霸道流氓气质10 天前
Trae IDE 新手入门指南
ide
VidDown10 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦10 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown10 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐10 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM3210 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发
bloglin9999910 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
终将老去的穷苦程序员10 天前
IntelliJ IDEA 的安装教程
java·ide·intellij-idea