Markdown(编辑器)工具与使用总结
myzbx 2025-04-27 15:06 4 浏览
对于markdown文档格式因网络文章、云笔记的兴起,及开源代码的文档应用,现已变更越来越来流行。markdown不止是HTML的简化版,更重要的是txt的升级版、word的轻量版、是笔记的最佳载体。markdown以编辑及保存纯文本方式,写作中添加简单符号即完成排版,所见即所得,让你专注于文字而不是排版,并可以轻松转换为 html、pdf等。
对于普通人或一般开发者,我们看下支持Markdown的编辑器有哪些合适我们使用,看完可使少走弯路,我对比了几款免费的Markdown编辑软件,希望对大家有帮助。
一、首先较多的是在线的Markdown编辑器
在线的Markdown编辑器有dillinger、Vditor等,还有不少浏览器插件支持的Markdown编辑,但这是这篇文章介绍的重点,我们主要介绍下现流行好用本地运行并且免费的Markdown编辑器有哪些。
1.1、能本地运行的免费Markdown编辑器
刚开对Markdown编辑器并未重视,以为这个小功能,很多软件都可做好,当我在进行一个新项目开展时,因为是敏捷项目,所以要在README.md中将说明及计划等一并说明,就离不开Markdown的编辑浏览。用了几个工具,发现要用好Markdown也不是那么简单的,重点是要有好的编辑器。刚开始用MarkdownPad2用得一脸懵,是一个英文软件不说,还不能即时预览,介绍是说:多功能Markdown编辑器。但用起很不顺手就放弃了,继续找了几款软件进行了对比。在软件管家上查,Markdown编辑器也真的不多呀。
1.2、IDEA的Markdown插件
用了这个插件就爱上了,主要是就集成在开发工具中,使用非常方便,可见即所得,编辑与预览位置同步。
发现IDEA的Markdown虽然好用,但也不是所有功能都支持,有些高级功能就不支持,可以手动更新一个Markdown插件的内容。
由于mermaid项目经常发版,所以最好使用npm获取最新版本,在命令行下输入npm i mermaid; 安装完成后在node_modules中找到memard.js文件,拷贝到IDEA的指定目录:JetBrains\IdeaIC2022.2\markdown\download\mermaidlanguageextension\mermaid |
最简单的是直接在Markdown配置中安装支持的图形插件。
请打开“设置/首选项”(Ctrl+Alt+S),转到“语言和框架|Markdown”页面并单击“PlantUML框架未安装”警告旁边的Install按钮。该框架将安装到IntelliJ IDEA缓存中。
1.3、HBuilder X
这个是国内一个专门用于开发小程序的IDE,比较出名的就是Markdown编辑功能,是较早支持与一直号称最强大的markdown书写工具。我使用一个还是不错的,是一个小巧且强大的工具,就是markdown与预览不能同步滚动,但有个好处是有个“文件结构图”的功能,可目导航编辑。
1.4、Visual Studio Code
Vs Code估计大家都熟悉的,这个工具也是很早就自带支持Markdown编辑功能的IDE了。但功能就一个文本的编辑功能,有预览功能也能同步滚动,就是预览功能不完整,如表格并不是完整的表格样式,这就有点奇怪了。
1.5、印象笔记Markdown编辑
印象笔记是一个长青级的笔记类应用软件,并且支持多个平台(包括windows、Mac、苹果手机IOS、手机安卓端、及微信小程序等)。印象笔记顺应时代要求,也增加了支持Markdown编辑的功能,不单支持主流的 Markdown 语法,同时还支持相关样式、序号列表、任务列表、表格、TOC目录、多种图表、数学公式、流程图、时序图、甘特图等高级功能。使用起来还不错,就是并不是专业的Markdown编辑,你要打开外部*.md文件并不支持,是要在印象笔记新增笔记时选择Markdown类型笔记。
1.6、跨平台的Typora
二、最后简单整理一下Markdown的主要标签语法
2.1、标题
使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。
2.2、段落
在Markdown的段落没有特殊的格式,直接编写文本,段落的换行号是使用两个以上的空格加回车。段落的换行是使用两个以上空格加上回车。
2.2.1、字体
用1个星号*或底线_表示斜体;
用2个星号*或底线_表示粗体;
用3个星号*或底线_表示粗斜体;
2.2.2、分隔线
可在一行中用三个以上的星号*、减号-、底线_来建立一个分隔线,行内不能有其他东西,你也可以在星号或减号蹭插入空格。
2.2.3、删除线
如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线(~~)即可。
2.2.4 下划线
下划线可以通过HTML的标签来实现:<u>带下划线文本</u>
2.3、列表
2.3.1 有序列表
有序列表直接在文字有加上1. 2. 3. 来表示,符号和文字之间加上一个空格字符。
2.3.2 无序列表
无序列表使用星号(*)、加号(+)或者减号(-)作为标记。
2.3.3 列表嵌套
列表嵌套只需在子列表的选项前添加四个空格即可。
2.3.4 列表嵌套
2.4、区块
区块引用是在段落开头使用>符号,然后后面紧跟一个空格符号。另外区块是可以嵌套的,一个>符号是最外层,两个符号是第一层嵌套,以此类推。
2.4.1 区块中使用列表
2.4.2 列表中使用区块
如果要在列表项目内放进区块,那么就需要在>前添加四个空格和缩进。
2.5、代码框
如果是段落上的一个函数或片段的代码可以用两个'把它包起来。'print()' 函数
代码区块:
代码区块使用4个空格或者一个制表符(Tab键);也可以用'''包裹1段代码,并指定一种语言(也可以不指定)。
2.6、链接
[链接名称](链接地址) 或者 <链接地址>
高级链接:链接也可以用变量来代替,文档末尾附带变量地址。
2.7、图片
开头一个感叹号!
接着一个方括号,里面放上图片的代替文字;
接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的'title'属性文字。


或使用html方式:
<img src="http://www.txrjy.com/static/image/common/logo.gif" width=20%/>
像网址那样对图片使用变量:
2.8、表格
|表头1|表头2|
|----|----|
|单元格11|单元格12|
|单元格21|单元格22|
-: 设置内容或标题栏右对齐
:- 设置内容或标题栏左对齐
:-: 设置内容或标题栏居中对齐
2.9、支持HTML元素
不在Markdown涵盖范围之内的标签,都可以直接在文档里面用HTML撰写。
2.10、转义
Mrkdown支持以下这些符号前面加上反斜杠来帮助插入普通符号。
\ 反斜线 ` 反引号 * 星号 _ 下划线 {} 花括号 [] 方括号 () 小括号 # 井字号 + 加号 - 减号 . 英文句点 ! 感叹号 |
这个功能发现IDEA插件未支持。
2.11、数学公式
需要在编辑器中插入数学公式时,可以使用两个美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式来实现。
需要加载 Mathjax 对数学公式进行渲染。如果是在博客园用公式,需要到自己的博客园:管理》选项,勾选“启用数学公式支持”;如果是在typora软件:文件》偏好设置》markdown》扩展语法,勾选“内联公式”;其他的md编辑器应该也是差不多需要去设置渲染公式,不然显示不出来。
这个功能发现IDEA插件、vscode与HBuilderX未支持,只有印象笔记和Typora支持。
IDEA要用Markdown Editor插件支持。
2.12、文字颜色、大小、字体
通过html标签实现。
这个功能HBuilderX和Typora支持得最好,IDEA插件背景色未支持,发现印象笔记并不支持html标签。
2.13、隐藏细节
<details> |
2.14、表情符Emoji
emoji使用时复制后面的md代码即可(包括两个冒号),也可以直接复制emoji表情。
发现只有Typora支持,其他几个工具都不支持md代码显示表情。
2.15、计划安排(打钩)
段落前加“- [ ]“。注意的是,没有双引号,是’-’ + ‘空格’ + ‘[’ + ‘空格’ + ‘]’ + ‘空格’。
2.16、流程图
显示方向:
TB/TD( top bottom/top down)表示从上到下
BT(bottom top)表示从下到上
RL(right left)表示从右到左
LR(left right)表示从左到右
节点类型:
节点本身的展现形式,是通过不同括号来代表各自不同的形状,默认为矩形。
默认节点: A
矩形节点: B[矩形]
圆角矩形节点: C(圆角矩形)
圆形节点: D((圆形))
非对称节点: E>非对称]
菱形节点: F{菱形}
节点连线:
箭头连接 A1- ->B1
开放连接 A2- - -B2
虚线箭头连接 A3.->B3 或者 A3-.->B3
虚线连接 A4.-B4 或者 A4-.-B4
粗线箭头连接 A5==>B5
粗线开放连接 A6===B6
标签虚线箭头连接 A7-.text.->B7
标签开放连接 A8- -text- - -B8
支持定义样式:
样式写法跟矢量图(SVG)中CSS的写法一致,含有的属性有:
style 节点 样式
这个功能发现IDEA要同时安装PlantUML与mermaid插件来支持。
2.17、UML时序图
语法结构:
```mermaid sequenceDiagram 对象A->>对象B: 对象B你好吗?(请求) Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->>对象A: 我很好(响应) 对象A->>对象B: 你真的好吗? ``` |
消息格式:
【对象1】【箭头类型】【对象2】 : 消息内容 |
连接样式:一共6种箭头类型的样式:
- 实线:->
- 虚线:- ->
- 带箭头的实线:->>
- 带箭头的虚线:- ->>
- 带x的实线:-x
- 带x的虚线:- -x
激活方块:这部分有两种写法,第一种是显示通过语法实现,语法如下,会在指定对象的消息中增加,示例中李四;第二种直接在对象前面增加加减号(开始时用加号“+”,结束时用减号“-”),则在加号对应的对象上开始,减号对应的时间结束。
开始:activate 【对象】 结束:deactivate 【对象】 |
注释:
Note 【位置】 【对象】 |
注释显示的位置有三个,以被标记的对象中心为参考系,基于横跨多个时,可以都逗号分隔,如示例:
- right of
- left of
- over
循环(while):
loop 循环说明 【消息流】 end |
条件(if/else):
alt 条件说明 【消息流】 else 【消息流】 End |
示例内容太多了,为了防止太臃肿,把条件内容独立出来进行演示,当有else时,用alt,否则用opt。 |
opt 条件说明 【消息流】 end |
这个功能发现IDEA要同时安装PlantUML与mermaid插件来支持。
2.18、甘特图
这个功能发现IDEA要同时安装PlantUML与mermaid插件来支持。
2.19、脑图
markmap,几个工具都不支持,只有线上的Vditor支持,vs code需求另外安装markmap插件。IDEA要用Markdown Editor插件支持。
```mindmap - 教程 - 语法指导 - 普通内容 - 提及用户 - 表情符号 Emoji - 一些表情例子 - 大标题 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - 图片 - 代码块 - 普通 - 语法高亮支持 - 演示 Go 代码高亮 - 演示 Java 高亮 - 有序、无序、任务列表 - 无序列表 - 有序列表 - 任务列表 - 表格 - 隐藏细节 - 段落 - 链接引用 - 数学公式 - 脑图 - 流程图 - 时序图 - 甘特图 - 图表 - 五线谱 - Graphviz - 多媒体 - 脚注 - 快捷键 ``` |
2.20、图表
几个工具都不支持,只有线上的Vditor支持。
IDEA要用Markdown Editor插件支持。
```echarts { "title": { "text": "最近 30 天" }, "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } }, "legend": { "data": ["帖子", "用户", "回帖"] }, "xAxis": [{ "type": "category", "boundaryGap": false, "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"], "axisTick": { "show": false }, "axisLine": { "show": false } }], "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }], "series": [ { "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3, "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"] }, { "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2, "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"] }, { "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1, "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"] } ] } ``` |
2.21、五线谱
几个工具都不支持,只有线上的Vditor支持。
IDEA要用Markdown Editor插件支持。
```abc X: 24 T: Clouds Thicken C: Paul Rosen S: Copyright 2005, Paul Rosen M: 6/8 L: 1/8 Q: 3/8=116 R: Creepy Jig K: Em |:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\ "C7"_B2A "B7"=B3|"Em"EEE E2G| "C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\ 1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe| "G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\ "G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:| ``` |
2.22、Graphviz
几个工具都不支持,只有线上的Vditor支持。
IDEA要用Markdown Editor插件支持。
```graphviz digraph finite_state_machine { rankdir=LR; size="8,5" node [shape = doublecircle]; S; node [shape = point ]; qi node [shape = circle]; qi -> S; S -> q1 [ label = "a" ]; S -> S [ label = "a" ]; q1 -> S [ label = "a" ]; q1 -> q2 [ label = "ddb" ]; q2 -> q1 [ label = "b" ]; q2 -> q2 [ label = "b" ]; } ``` |
2.23、普通流程图Flowchart
几个工具都不支持,只有线上的Vditor支持。
节点类型:
目前官网提供7种节点,其实还有很多别的节点类型,但可能插件脚本还没支持。
- 开始(椭圆形):start
- 结束(椭圆形):end
- 操作(矩形):operation
- 多输出操作(矩形):parallel
- 条件判断(菱形):condition
- 输入输出(平行四边形):inputoutput
- 预处理/子程序(圣旨形):subroutine
节点定义:
变量名=>节点标识: 节点显示名
节点连线:
变量名1->变量名2->...->变量名n
连线样式:设置变量m和变量n之间连线的样式,具体样式由变量n后面key-value控制,需要两个变量之间有直接连线。语法中的连接符为(@>)。
变量名m@>变量名n({"key":"value"})
关键字:
yes/true:condition类型变量连接时,用于分别表示yes条件的流向
no/false:同上,表示否定条件的流向
left/right:表示连线出口在节点位置(默认下面是出口,如op3),可以跟condition变量一起用:cond(yes,right)
path1/path2/path3:parallel变量的三个出口路径(默认下面是出口)
节点状态:为节点设置不同的状态,可以通过不同的颜色显示,其中状态包括下面6个,含义如英文所示,不过CSDN中好像目前还不支持。
- past
- current
- future
- approved
- rejected
- invalid
IDEA要用Markdown Editor插件支持。
```flowchart st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op ``` |
2.24、可视化差异
```diff |
发现只有Typora和印象笔记支持。IDEA要用Markdown Editor插件支持。
希望大家能一如既往开心愉快!不管大环境如何,都能保持一颗积极乐观的心态,用心对待生活。 |
往期内容:
- 上一篇:矢量图形编辑应用程序-WinFIG
- 下一篇:SVG 绘制曲折线
相关推荐
- 建模大神都在用的软件,哝晓得不?
-
各位宝宝们,阿瑶又来啦!一日不见,甚是想念。今天阿瑶这篇文章是个连载文章连载四天大家走过路过不要错过哦!今天阿瑶先给大家来讲一讲Maya建模类型中的第一个多边形建模。各位宝宝们,赶紧拿好你们的小板凳,...
- 神器推荐 | 制作多边形网格从此不用愁
-
近来许多大数据分析、网络社群方面的PPT,特别喜欢使用多边形网格作为修饰,借以表示连接、关系、节点等抽象概念,比如▼虽然使用PPT自带的图形工具也能做出来,但是纯手工绘制那是相当耗时耗力,谁用谁知道▼...
- 谷歌最强推理模型gemini2.5pro登场,强的离谱~
-
25号晚上,谷歌直接放了一个大招,直接推出了gemini2.5pro的下一代推理模型。强到什么程度,据官网介绍的,在一系列需要高级推理的基准测试中都处于领先地位,并且是甩掉了后面模型一大截的差距。就好...
- 设计大神不传之秘,这个PPT隐藏的排版神器,让你提前1小时下班
-
最近好多学员在群里给我吐槽,说做工作汇报的时候经常碰到一大堆文字的时间轴页面,不管怎么排版都感觉又乱又丑,一眼看不到重点,就像这样:如果随便找一张模板套上去,很有可能显得浮夸:不如找来一张折线图,上升...
- 网站分享 | 想要作品有创意?不如学学如何玩转半色调吧
-
正当你想要为自己的设计作品增添新的创意元素发愁时,不如试试「半色调」能否给你带来新的灵感!什么是半色调?半色调又称灰度级,它是反映图像亮度层次、黑白对比变化的技术指标。也就是通过运用点、条纹或其他形...
- 想做半色调+低多边形+条纹效果?这个网站帮你一键生成!
-
如果想要为设计作品增添一些新意的元素,或许今天这个「矢量半色调」网站能带给你一些启发!什么是「半色调」效果呢,「半色调」是指运用点、条纹或其他形状的图案,根据元素大小或者疏密的不同,从而构成从远处看起...
- Excalidraw-免费的白板应用,能够画各种流程图架构图
-
一款完全免费的手绘风格绘图在线应用,能快速画出漂亮的流程图、示意图甚至是图表。关于ExcalidrawExcalidraw是一款轻量的手绘风格电子白板在线应用,无论是Windows/macO...
- 时间轴动画怎么加才惊艳?简单,腾讯御用PPT设计师直接爆料
-
大家应该收集或者见过很多不错的时间轴的页面设计吧?时间轴算是PPT制作中经常遇到的页面类型,个人述职、项目路演、企业介绍等等,都会用到时间轴来让用户更加直观地了解个人或公司。比如腾讯的时间轴页:又比如...
- 图片无限放大也不会模糊的秘密,矢量图的那些事
-
当你想在你的文档或者幻灯片中插入一个图片,感觉图片太小排版不太美观,我们放大一下图片,发现图片因为放大而变得模糊,严重影响视觉感受。这个视频我会告诉如何让图片放大、再放大都不会失真的方法。首先我们先来...
- 用热搜的方式打开推文?
-
热搜,向来是全民瞩目的焦点。要是把热搜元素融入到推文之中,那推文的趣味性必定直线上升!想必大家都很好奇,怎样在SVG交互推文中打造出热搜效果呢?不少品牌方账号中,90%以上的内容都采用了SVG,交...
- 羊角螺线如何应用到平面设计中?
-
羊角螺线是一段数学函数曲线。多用作缓和曲线,缓和直路线与圆曲路线之间曲线变化的作用。羊角螺线的特点是,从坐标原点开始,起始曲率为0,函数曲线的曲率呈线性增长。也就是说,羊角螺线可以完美链接直线与任何圆...
- cad转svg的软件有哪些?为你介绍这四个软件
-
cad转svg的软件有哪些?CAD(计算机辅助设计)是一种广泛使用的工具,用于创建和修改设计图纸。SVG(可缩放矢量图形)是一种开放标准,用于在Web上显示矢量图形。CAD转SVG是将CAD图纸转换为...
- 图片格式那么多,哪种更适合你?
-
本文介绍和比较几种常见图片文件格式的优缺点,并介绍不同的文件格式对Web应用程序性能的影响。有损vs无损图片文件格式有可能会对图片的文件大小进行不同程度的压缩,图片的压缩分为有损压缩和无损压缩两种。有...
- 一篇文章教会你使用SVG 画多边形
-
作者:前端进阶者来源:前端进阶学习交流大家好,我是前端进阶者。polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状,最后一点连接到第一点。元素通常用于绘制具有多个(3个或更多)...
- SVG 绘制曲折线
-
本节我们来学习如何在SVG中绘制曲折线,绘制曲折线可以使用<polyline>元素来实现。如何绘制曲折线曲折线就是通过一系列的直线连接多个点,然后组合成任意形状。曲折线可以通过S...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)