搜索
首页开发工具VSCode一文全面搞定Markdown语法(附图文示例)

前言

写过博客或者github上面的文档的,应该知道Markdown语法的重要性,不知道的朋友们也别着急,一篇博客轻松搞定Markdown语法。话说这个语法超级简单,一看就会,不信你点进来看看。

1.快捷键

功能 快捷键
加粗 Ctrl B
斜体 Ctrl I
引用 Ctrl Q
插入链接 Ctrl L
插入代码 Ctrl K
插入图片 Ctrl G
提升标题 Ctrl H
有序列表 Ctrl O
无序列表 Ctrl U
横线 Ctrl R
撤销 Ctrl Z
重做 Ctrl Y

2. 基本语法

2.1 字体设置斜体、粗体、删除线

*这里是文字*
_这里是文字_
**这里是文字**
***这里是文字***
~~这里是文字~~

一文全面搞定Markdown语法(附图文示例)

2.2 分级标题

写法1:

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题  

这个写法和 **文字**效果是一样的

一文全面搞定Markdown语法(附图文示例)

写法2:

这是一个一级标题
============================

或者

二级标题
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

一文全面搞定Markdown语法(附图文示例)

2.3 链接

(1)插入本地图片链接

语法规则,有两种写法: 

一文全面搞定Markdown语法(附图文示例)

注意:这个图片描述可以不写。

示例图如下: 

一文全面搞定Markdown语法(附图文示例)

(2)插入互联网上图片

语法规则: 

一文全面搞定Markdown语法(附图文示例)

注意:这个图片描述可以不写。

示例如下: 

一文全面搞定Markdown语法(附图文示例)

(3)自动连接 

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用包起来, Markdown 就会自动把它转成链接。也可以直接写,也是可以显示成链接形式的 

例如: 

一文全面搞定Markdown语法(附图文示例)

2.4 分割线

你可以在一行中用三个以上的星号(*)、减号(-)、底线(_)来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。 

一文全面搞定Markdown语法(附图文示例)

2.5 代码块

对于程序员来说这个功能是必不可少的,插入程序代码的方式有两种,一种是利用缩进(tab), 另一种是利用英文“`”符号(一般在ESC键下方,和~同一个键)包裹代码。

(1)代码块:缩进 4 个空格或是 1 个制表符。效果如下:
一文全面搞定Markdown语法(附图文示例)

(2)行内式:如果在一个行内需要引用代码,只要用反引号`引起来就好(一般在ESC键下方,和~同一个键) 

一文全面搞定Markdown语法(附图文示例)

(3)多行代码块与语法高亮:在需要高亮的代码块的前一行及后一行使用三个单反引号“`”包裹,就可以了。
示例如下: 

一文全面搞定Markdown语法(附图文示例)

(4)代码块里面包含html代码 

在代码区块里面, & 、 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制贴上,剩下的 Markdown 都会帮你处理。

注意:简书代码块里不支持html。

示例如下: 

一文全面搞定Markdown语法(附图文示例)

2.6 引用

在被引用的文本前加上>符号,以及一个空格就可以了,如果只输入了一个>符号会产生一个空白的引用。

(1)基本使用 

使用如下图所示: 

一文全面搞定Markdown语法(附图文示例)

(2)引用的嵌套使用 

使用如图所示:
一文全面搞定Markdown语法(附图文示例)
(3)引用其它要素 

引用的区块内也可以使用其他的 Markdown 语法,包括标题、列表、代码区块等。 

使用如图所示: 

一文全面搞定Markdown语法(附图文示例)

2.7 列表

(1)无序列表 

使用 *, ,- 表示无序列表。 

注意:符号后面一定要有一个空格,起到缩进的作用。 

一文全面搞定Markdown语法(附图文示例)

(2)有序列表 

使用数字和一个英文句点表示有序列表。 

注意:英文句点后面一定要有一个空格,起到缩进的作用。 

一文全面搞定Markdown语法(附图文示例)

(3)无序列表和有序列表同时使用 

一文全面搞定Markdown语法(附图文示例)

(4)列表和其它要素混合使用 

列表不光可以单独使用,也可以使用其他的 Markdown 语法,包括标题、引用、代码区块等。

注意事项:

(1)加粗效果不能直接用于列表标题里面,但是可以嵌套在列表里面混合使用。
(2)列表中包含代码块(前面加2个tab或者8个空格,并且需要空一行,否则不显示)。
.
使用示例如下图: 

一文全面搞定Markdown语法(附图文示例)

(5)注意事项 

在使用列表时,只要是数字后面加上英文的点,就会无意间产生列表,比如2017.12.30 这时候想表达的是日期,有些软件把它被误认为是列表。解决方式:在每个点前面加上就可以了。

如下图所示: 

一文全面搞定Markdown语法(附图文示例)

2.8 表格

表格的基本写法很简单,就跟表格的形状很相似: 

一文全面搞定Markdown语法(附图文示例)

表格对齐方式:我们可以指定表格单元格的对齐方式,冒号在左边表示左对齐,右边表示有对齐,两边都有表示居中。

如下图所示: 

一文全面搞定Markdown语法(附图文示例)

3. 常用技巧

3.1 换行

方法1: 连续两个以上空格 回车
方法2:使用html语言换行标签:

3.2 缩进字符

不断行的空白格   或  半角的空格   或  全角的空格   或   

一文全面搞定Markdown语法(附图文示例)

3.3 特殊符号

(1)对于 Markdown 中的语法符号,前面加反斜线即可显示符号本身。

示例如下: 

一文全面搞定Markdown语法(附图文示例)

(2)其他特殊字符,示例如下: 

一文全面搞定Markdown语法(附图文示例)
想知道字符对应的Unicode码,可以看这个网站:https://unicode-table.com/cn/

附上几个工具对特殊字符的支持的对比图:

一文全面搞定Markdown语法(附图文示例)

3.4 字体、字号与颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的!

CSDN-markdown编辑器是其衍生版本,扩展了Markdown的功能(如表格、脚注、内嵌HTML等等)!对,就是内嵌HTML,接下来要讲的功能就需要使用内嵌HTML的方法来实现。

字体,字号和颜色编辑如下代码 

一文全面搞定Markdown语法(附图文示例)

具体颜色分类及标记请看下表: 

一文全面搞定Markdown语法(附图文示例)

3.5 链接的高级操作

链接的高级操作(这个需要掌握一下,很有用)

1.行内式

这个在上文第二条基本语法的 链接这个小节已经过,这里就不继续讲解了。

2.参考式链接

在文档要插入图片的地方写![图片或网址链接][标记],在文档的最后写上[标记]:图片地址 “标题”。(最后这个”标题”可以不填写)

示例如下:
一文全面搞定Markdown语法(附图文示例)

3.内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

4.锚点

锚点其实就是页内超链接。比如我这里写下一个锚点,点击回到目录,就能跳转到目录。 在目录中点击这一节,就能跳过来。

注意:在简书中使用锚点时,点击会打开一个新的当前页面,虽然锚点用的不是很舒服,但是可以用注脚实现这个功能。

语法说明:

在你准备跳转到的指定标题后插入锚点{#标记},然后在文档的其它地方写上连接到锚点的链接。

使用如下图所示: 

一文全面搞定Markdown语法(附图文示例)

5.注脚

语法说明:

在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注,脚注前必须有对应的脚注名字。

示例如下: 

一文全面搞定Markdown语法(附图文示例)

注:

  • 脚注自动被搬运到最后面,请到文章末尾查看,并且脚注后方的链接可以直接跳转回到加注的地方。

  • 由于简书不支持锚点,所以可以用注脚实现页面内部的跳转。

3.6 背景色

Markdown本身不支持背景色设置,需要采用内置html的方式实现:借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色的功能。举例如下:

<table><tr><td bgcolor=orange>背景色是:orange</td></tr></table>

一文全面搞定Markdown语法(附图文示例)

3.7 emoji表情符号

emoji表情使用:EMOJICODE:的格式,详细列表可见 

https://www.webpagefx.com/tools/emoji-cheat-sheet/

当然现在很多markdown工具或者网站都不支持。

下面列出几个平台的对比:

工具或网站 是否支持emoji表情符号
简书
MarkDownPad 否(不知道付费版是否支持)
有道云笔记
zybuluo.com
github

一文全面搞定Markdown语法(附图文示例)

4. 高端用法

4.1 Latex数学公式

使用LaTex数学公式

1.行内公式:使用两个”$”符号引用公式:

$公式$

2.行间公式:使用两对“$$”符号引用公式:

一文全面搞定Markdown语法(附图文示例)                       

4.2 流程图

这里简单介绍一下流程图的语法,仅作为了解,如下图所示: 

一文全面搞定Markdown语法(附图文示例)

4.3 制作一份待办事宜—-Todo 列表

一文全面搞定Markdown语法(附图文示例)

4.4 绘制 序列图

一文全面搞定Markdown语法(附图文示例)

4.5 绘制 甘特图

一文全面搞定Markdown语法(附图文示例)

5. Markdown工具

1.markdownpad软件,就是利用markdown语言写笔记的。官网下载地址:http://markdownpad.com/

软件安装之后的示意图如下图所示:
一文全面搞定Markdown语法(附图文示例)

2.有道云笔记支持markdownpad语法。官方网址:http://note.youdao.com/ 它有在线网页版以及PC端可以下载。当然有道云笔记也支持html语法。

网页版使用markdown示例图如下:
一文全面搞定Markdown语法(附图文示例)

3.在线编辑markdown https://www.zybuluo.com/mdeditor

以上是一文全面搞定Markdown语法(附图文示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:csdn。如有侵权,请联系admin@php.cn删除
Visual Studio是用什么?Visual Studio是用什么?Apr 16, 2025 am 12:04 AM

VisualStudio支持多种编程语言,如C#、C 、Python、JavaScript等。1)它提供语法高亮、代码补全和错误提示,帮助编写代码。2)集成调试器可逐步执行代码、设置断点和查看变量值。3)支持版本控制系统如Git,管理代码变更和协同开发。4)项目管理功能组织和构建大型项目,确保可维护性和可扩展性。

vscode怎样打多行注释vscode怎样打多行注释Apr 15, 2025 pm 11:57 PM

VS Code 多行注释的方法有:1. 快捷键(Ctrl K C 或 Cmd K C);2. 手动添加注释符号(/ /);3. 选择菜单(“Comment Block”);4. 使用扩展;5. 递归注释(/* /)和块注释({/ 和 /})。多行注释有助于提高代码可读性和可维护性,但应避免过度使用。

vscode和pycharm有啥区别vscode和pycharm有啥区别Apr 15, 2025 pm 11:54 PM

VS Code 与 PyCharm 的主要区别在于:1. 扩展性:VS Code 是高可扩展的,拥有丰富的插件市场,而 PyCharm 默认功能更广;2. 价格:VS Code 免费开源,PyCharm 专业版付费;3. 用户界面:VS Code 现代友好,PyCharm 更复杂;4. 代码导航:VS Code 适用于小型项目,PyCharm 更适合大型项目;5. 调试:VS Code 基础,PyCharm 功能更强大;6. 代码重构:VS Code 基本,PyCharm 功能更丰富;7. 代码

vscode什么语言写的vscode什么语言写的Apr 15, 2025 pm 11:51 PM

VSCode 是用 TypeScript 和 JavaScript 编写的。首先,它的核心代码库是用 TypeScript 编写的,这是一种扩展了 JavaScript 并增加了类型检查功能的开源编程语言。其次,VSCode 的一些扩展和插件是用 JavaScript 编写的。这种组合使 VSCode 成为一款灵活且可扩展的代码编辑器。

vscode不联网怎么设置中文vscode不联网怎么设置中文Apr 15, 2025 pm 11:48 PM

离线设置 VS Code 为中文: 下载中文语言包、解压语言包文件、复制语言包文件、重启 VS Code、设置中文语言(可选择更改界面语言)。

vscode设置中文教程vscode设置中文教程Apr 15, 2025 pm 11:45 PM

VS Code 支持中文设置,可通过以下步骤完成:打开设置面板并搜索 "locale"。将 "locale.language" 设置为 "zh-CN"(简体中文)或 "zh-TW"(繁体中文)。保存设置并重启 VS Code。设置菜单、工具栏、代码提示和文档将显示为中文。还可自定义其他语言设置,如文件标签格式、条目描述和诊断流程语言。

vscode安装教程vscode安装教程Apr 15, 2025 pm 11:42 PM

如何安装 Visual Studio Code?下载安装程序安装安装程序启动 Visual Studio Code配置设置安装扩展开始编码

vscode怎么切换中文模式vscode怎么切换中文模式Apr 15, 2025 pm 11:39 PM

VS Code 切换中文模式的操作步骤:打开设置界面(Windows/Linux:Ctrl ,,macOS:Cmd ,)搜索 "Editor: Language" 设置在下拉菜单中选择 "中文"保存设置重启 VS Code

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器