0

0

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

藏色散人

藏色散人

发布时间:2022-08-05 09:42:05

|

6510人浏览过

|

来源于csdn

转载

前言

写过博客或者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 字体设置斜体、粗体、删除线

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

7dc260b62c462229bb16a773584e89f.jpg

2.2 分级标题

写法1:

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题  

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

dca4a25bb640b2d13f5271b39478577.jpg

写法2:

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

或者

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

cee55f90cb86393e5e78306987f3603.jpg

2.3 链接

(1)插入本地图片链接

语法规则,有两种写法: 

这里写图片描述

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

示例图如下: 

840c6b9da0df6d236f5dd0be30c612f.jpg

(2)插入互联网上图片

语法规则: 

这里写图片描述

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

示例如下: 

92170e7d5ce48ba5ddd2bf7a077d358.jpg

(3)自动连接 

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

例如: 

27584dcfc69266c2e332093cff15204.jpg

2.4 分割线

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

8a8161b59ffa10fa641522dc5ef6745.jpg

2.5 代码块

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

(1)代码块:缩进 4 个空格或是 1 个制表符。效果如下:
456142201c09c6cf2086d78683501e8.jpg

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

8e0618af04fa78b52d1612c7cbb9fe7.jpg

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

20d7b6c834074f32cee59306423c4b9.jpg

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

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

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

示例如下: 

7e3d8595aea6880731a3a0007f173e5.jpg

2.6 引用

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

(1)基本使用 

使用如下图所示: 

d26856cd3c69b6f8d304f18f0696edf.jpg

(2)引用的嵌套使用 

使用如图所示:
这里写图片描述
(3)引用其它要素 

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

使用如图所示: 

2ca377144357017e8282bf03bf2198e.jpg

2.7 列表

(1)无序列表 

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

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

6888d1697d9df63e2d7d38f871a67cb.jpg

(2)有序列表 

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

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

b2301f9c3ab1916e898092e8d74bc63.jpg

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

4cb454acdab8a5c26be655558303f22.jpg

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

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

注意事项:

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

(5)注意事项 

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

如下图所示: 

3b029182e986363351a1e2700740ded.jpg

2.8 表格

互联网网络工作室公司模板(响应式)1.4.2
互联网网络工作室公司模板(响应式)1.4.2

互联网网络工作室公司模板(响应式)是一个响应式模板,安装即用,图片文本均已可视化,简洁后台易上手,支持伪静态、多种内容模型等。模板特点: 1、安装即用,自带人人站CMS内核及企业站展示功能(产品,新闻,案例展示等),并可根据需要增加表单 搜索等功能(自带模板) 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜

下载

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

87b7e1459ce0504a72547bda5e3f301.jpg

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

如下图所示: 

700b5fe7d1a9ce672e4a2b68132ce3e.jpg

3. 常用技巧

3.1 换行

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

3.2 缩进字符

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

da5297447e746fb540bbbab4c4a75c3.jpg

3.3 特殊符号

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

示例如下: 

这里写图片描述

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

这里写图片描述
想知道字符对应的Unicode码,可以看这个网站:https://unicode-table.com/cn/

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

7c89d1b2f3e1db2f51c142db041832e.jpg

3.4 字体、字号与颜色

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

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

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

这里写图片描述

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

这里写图片描述

3.5 链接的高级操作

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

1.行内式

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

2.参考式链接

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

示例如下:
这里写图片描述

3.内容目录

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

4.锚点

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

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

语法说明:

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

使用如下图所示: 

这里写图片描述

5.注脚

语法说明:

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

示例如下: 

这里写图片描述

注:

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

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

3.6 背景色

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

背景色是:orange

这里写图片描述

3.7 emoji表情符号

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

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

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

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

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

4c9dd9bdd6c995d94d6347751468720.jpg

4. 高端用法

4.1 Latex数学公式

使用LaTex数学公式

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

$公式$

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

c96c11eba11e3e180aa7018ce3205d7.jpg                       

4.2 流程图

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

这里写图片描述

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

这里写图片描述

4.4 绘制 序列图

这里写图片描述

4.5 绘制 甘特图

这里写图片描述

5. Markdown工具

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

软件安装之后的示意图如下图所示:
这里写图片描述

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

网页版使用markdown示例图如下:
这里写图片描述

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

相关专题

更多
html版权符号
html版权符号

html版权符号是“©”,可以在html源文件中直接输入或者从word中复制粘贴过来,php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

582

2023.06.14

html在线编辑器
html在线编辑器

html在线编辑器是用于在线编辑的工具,编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方,是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容,供大家免费下载使用。

637

2023.06.21

html网页制作
html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程,html是一种标记语言,它使用标记来描述文档结构和语义,并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容,供大家免费下载体验。

456

2023.07.31

html空格
html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符,被用于在网页中插入额外的空间,以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容,供大家免费下载体验。

240

2023.08.01

html是什么
html是什么

HTML是一种标准标记语言,用于创建和呈现网页的结构和内容,是互联网发展的基石,为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2844

2023.08.11

html字体大小怎么设置
html字体大小怎么设置

在网页设计中,字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性,还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧,帮助您在HTML中设置合适的字体大小。

500

2023.08.11

html转txt
html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容,供大家免费下载体验。

306

2023.08.31

html文本框代码怎么写
html文本框代码怎么写

html文本框代码:1、单行文本框【<input type="text" style="height:..;width:..;" />】;2、多行文本框【textarea style=";height:;"></textare】。

416

2023.09.01

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

10

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript 教程
TypeScript 教程

共19课时 | 1.7万人学习

C++教程
C++教程

共115课时 | 9.8万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号