百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Markdown(编辑器)工具与使用总结

myzbx 2025-04-27 15:06 10 浏览

对于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'属性文字。

![alt 属性文本](图片地址)

![alt 属性文本](图片地址 "可选标题")

或使用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>
<summary>这里是摘要部分。</summary>
这里是细节部分。
</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
function addTwoNumbers (num1, num2) {
- return 1 + 2
+ return num1 + num2
}
```

发现只有Typora和印象笔记支持。IDEA要用Markdown Editor插件支持。

希望大家能一如既往开心愉快!不管大环境如何,都能保持一颗积极乐观的心态,用心对待生活。

往期内容:

抖音有哪些主要功能

过年10大风俗,9大禁忌全了解

或许我们都错了,一下放开我们只能自己硬扛

相关推荐

一键生成高颜值图表!让你的文字瞬间有画面感,职场人必备!

哈喽,打工人们!忙碌的周中,大熊又来给你们带来一个超实用的效率神器啦!这次的宝藏网站绝对是那种用过就离不开的"真香"型产品!假设你明天就要做重要汇报,可面对一大堆密密麻麻的文字材料,你...

批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式

Word文档是我们工作中经常会打交道的一种文档格式,我们也经常会有需要对Word文档进行格式转换的需求,比如将Word格式转换为PDF、将Word文档转换为Excel、将Word...

绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)

大家好,我是一名酷爱研究AI的产品经理,最近我有个新发现:那些花了你3天做出来的PPT,现在用AI可以1小时搞定!而且颜值还高!为什么AI做PPT比传统方式效率高10倍?我用一张图就能告诉你:AI生成...

ztext - 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的3D风格,还能制作旋转动效,有了ztext.js,只需要几行代码。ztext能做什么ztext.js是一个能把常规的平面文字变成3D样式的前端开源代码库,让开发者...

文字内插入小图片,也太可爱了吧(文字中怎么插图片)

图文排版H5手机版秀米有小伙伴留言问添加图片的时候可不可以把图片添加到文字之间比如下面这句话中的小贴纸图片后面可以接着输入文字其实吧这就是咱们的『文字内插入小图片』功能嘛可以用来在文字内加个表情包又...

Linux环境下C++代码性能分析方法(linux怎么写c++代码)

技术背景在开发C++应用程序时,找出代码中运行缓慢的部分是进行性能优化的关键。在Linux系统上,有多种工具和方法可用于对C++代码进行性能分析,每种方法都有其特点和适用场景。实现步骤手动中断调试法在...

SVG互动图文,让你的文章更有趣!教你4种简单易学的黑科技玩法!

如果你是一个公众号创作者,那么你一定想知道如何让你的文章更加吸引人,更加有趣,更加有创意。你可能已经尝试过各种图文排版技巧,但是你是否知道,有一种黑科技可以让你的文章变得更加酷炫,更加互动,更加爆款?...

Videoscribe怎么实现实心中文汉字的手绘制作

很多朋友在制作手绘视频的时候,不知道怎么输入实心的中文汉字,之前我们已经给大家分享了怎么输入汉字的方法,但是有一点遗憾的是输出的汉字是空心的手绘展示,在视觉上并不是非常的美观。经过大家不断的探索,终于...

一款用于将文本转化成图表的现代化脚本语言

大家好,又见面了,我是GitHub精选君!今天要给大家推荐一个GitHub开源项目terrastruct/d2,该项目在GitHub有超过10.3kStar,用一句话介绍该项目就是:...

探秘 Web 水印技术(制作水印网站)

作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...

不忍心卸载的五款神仙工具(不忍心卸载的五款神仙工具是什么)

001.效率工具uTools-装机必备的生产力工具集uTools是一款非常强大的可以装下几乎所有效率工具的电脑生产力工具集,目前拥有Windows、Mac和Linux三个版本。软件界面...

「SVG」飞花令!这份最高检工作报告“超有料”

原标题:【SVG】飞花令!这份最高检工作报告“超有料”栏目主编:秦红文字编辑:沈佳灵来源:作者:最高人民检察院...

svg|2025政府工作报告,有没有你关心的数据?

··<setattributeName="visibility"begin="click+0s"dur="1ms"fill="freeze"restart="never"to="hi...

videoscribe只能输入英文,如何输入中文文本?

videoscribe只能输入英文,如何输入中文文本?打开VideoScribe软件,打开要添加中文字体的位置。打开Photoshop并在文件中创建一个新的透明背景图层。注意:必须是透明背景层。...

五个流行的SVG在线编辑器(svg编辑工具)

随着响应网络的发展,越来越多的高质量的SVG在线编辑器被公众所熟知。SVG矢量图形也越来越受欢迎,以便在任何设备上呈现图像,甚至一些易于使用的SVG在线编辑器,可以替代PS,本文总结了五种流行的SVG...