Markdown语法——基础语法篇(平台:vscode)
Markdown基础语法
写在前面:
此篇博客虽然讲的是Markdown的基本语法,但我认为作为日常书写记录的语法完全够用了!
扩展语法篇的内容相对较难,针对的是一些特别需求,如合并单元格,设置文字背景色等内容。由于Markdown本身没有提供相应语法,更多是使用HTML语言实现的。在这篇博客的相关内容处也放置了对应扩展内容的说明和链接,可以直接跳转。如果想学习扩展语法,也可以点击这里,跳转Markdown扩展语法篇。
此篇博客主要借鉴了Markdown官方教程文档。
本篇博文(以及所有博客)的 .md/html 文档都在我的 GItee 仓库中,我会根据博客实时更新的,有需要的伙伴可以自行下载~!
推荐学习Markdown的理由
Markdown是一种轻量级标记语言,可用于在纯文本文档中添加格式化元素,其由John Gruber于2004年创建,如今已成为世界上最受欢迎的标记语言之一。
有些人可能会有疑问,Markdown 也是文本语言,与 Word 似乎并没有什么不同,而且Word的功能更加多样强大,为什么还要花费时间去学习Markdown语法?
以我为例,我是一个有点强迫症的人。如果是要示人的 Word 文档,我会格外纠结字号、字体、行间距,甚至有些重要文字会去修改字间距等等,这些操作都让我不得不暂停灵感,移动鼠标,修改属性,再回归文字。但正如官方教程所说:Markdown 让人们更多地关注内容本身而非排版。
此外:
- Markdown 导出格式多样。可导出 HTML、PDF 、 WORD 以及本身的 .md 格式的文件。
- Markdown 因简洁、高效、易读、易写被大量使用,如Github、Wikipedia、简书等。
- Markdown 的语法十分简单,常用的标记符号不超过十个,用于日常写作记录绰绰有余,不到半小时就能完全掌握。
以上都是Markdown的优点,特别是代码方面,它的代码块支持语法高亮,看起来十分赏心悦目,BTW我最初就是为了代码去学习的Markdown。
用Markdown写博客也是非常友好的,这篇博客就是用Markdown写的,目前的使用最多的mkd编辑器可能是Typora,但贫穷使我捣鼓了一阵子的Vscode,安装插件后也非常丝滑,写好的博客可以直接上传到博客平台。
给大家看看写mdk时的截屏,左边是书写mkd文本的区域,右边是实时渲染区。渲染效果正好,多一分花哨,少一分平淡。
好啦,话不多说,下面是正文。
标题语法
书写:
- 在标题前添加井号
#
; #
的数量代表了标题的级别;- 考虑到不同mkd应用程序的兼容性,在
#
和标题之间用一个空格进行分隔。
示例:
# Heading level 1(<h1>)
## Heading level 2(<h2>)
换行语法
书写:
- 法1:在一行末尾添加至少两个空格然后按回车键;
- 法2:在行末使用
<br>
(line break)创建一个换行。
示例:
This is the first line.
And this is the second line. <br>And this is the third line.
效果:
This is the first line.
And this is the second line.
And this is the third line.
段落语法
书写:在段落之间使用空白行进行分隔。
示例 & 效果:
I really like using Markdown.
I think I`ll use it format all of documents from now on.
强调语法
粗体(Bold)
书写:
- 法1:在要加粗的文字前后各添加两个星号
**
,如**text here**
; - 使用一对标签
<strong>text here</strong>
,实现文字加粗。
示例:
**The bold text.**
<strong>The bold text.</strong>
效果:
The bold text.
The bold text.
斜体(Italic)
书写:
- 法1:在要斜体显示的文字前后各添加一个星号
*
,如*text here*
; - 使用一对标签
<em>text here</em>
,实现文字斜体显示。
示例:
Italicized text is the *cat’s meow*.
Italicized text is the <em>cat’s meow</em>.
效果:
Italicized text is the cat’s meow.
Italicized text is the cat’s meow.
粗体和斜体
书写:
- 法1:在要加粗并斜体显示的文字前后各添加三个星号
***
,如***text here***
; - 法2:添加对称的
<strong><em>text here</em></strong>
,实现文字斜体显示。
示例:
***This text is really important.***
<strong><em>This text is really important.</em></strong>
效果:
This text is really important.
This text is really important.
删除线
书写:在删除显示的文本前后添加两个波浪号~~
,如~~text here~~
。
示例:
给你一朵~~红玫瑰~~黄玫瑰的记忆
效果:
给你一朵红玫瑰黄玫瑰的记忆
文字居中
使用居中标签<center></center>
设置文字居中显示。
示例:
<center>text here</center>
效果:
引用语法
书写:在要引用的段落前添加>
符号创建引用块。
示例:
> this is a cite.
效果:
this is a cite.
块引用可以包含多个段落,为段落之间的空白行添加一个>
即可。
示例:
> 我给你你出生多年前的
>
> 一朵黄玫瑰的记忆
效果:
我给你你出生多年前的
一朵黄玫瑰的记忆
分割线语法
书写:在单独一行上使用三个破折号---
,该行不能包含其他内容。
示例:
---
列表语法
有序列表
书写 & 效果:
- 在每个列表前添加紧跟英文句点
.
的数字; - 数字不必顺序排列,但要从1起始;
- 缩进一个或多个列表(Tab)可创建嵌套列表。
- 看
- 这个列表本身就是渲染效果
无序列表
书写:
- 在每个列表前添加
-
创建无序列表; - 缩进一个或多个列表(Tab)可创建嵌套列表。
示例:
- First item
- Second item
- First item
- Second item
- First item
效果:
-
First item
-
Second item
- First item
- Second item
- First item
代码语法
行内代码
书写:
- 将要显示成代码的文字包裹在反引号(`)中,以创建行内代码;
- 如果文字中包含反引号,使用双反引号将其包裹。
示例:
Use `code` in my documents.
``Use `code` in my documents.``
效果:
Use code
in my documents.
Use `code` in my documents.
代码块
书写:
- 在代码块前后添加三个反引号
```
或波浪号~~~
; - 若要使用语法高亮,需在代码块前的三个反引号后指定语言(
c c++ java HTML
等)。
示例:
```c
int main()
{
int i = 0;
printf("%d\n", i);
return 0;
}
```
效果:
int main()
{
int i = 0;
printf("%d\n", i);
return 0;
}
表格语法
书写要点:
- 使用三个或多个连字符
---
创建每列的标题; - 使用管道
|
分隔每列; - 在标题连字符
---
左侧或右侧添加冒号:
设置表格内文字的位置。:---
使表格内的文本左对齐:---:
使表格内的文本居中---:
使表格内的文本右对齐
示例:
|title1|title2|title3|
|:---|:---:|---:|
|`code`|text|**bold**|
||<https://markdown.com.cn/extended-syntax/tables.html>|
效果:
title1 | title2 | title3 |
---|---|---|
code |
text | bold |
https://markdown.com.cn/extended-syntax/tables.html |
-
转义管道字符,需使用HTML字符代码
|
,使表中显示|
。
数学公式
书写:
- 在LaTex语法前后分别插入一个
$
创建行内公式; - 在LaTex语法前后分别插入两个
$
创建行间公式; - 运算符的元素多于两个时,用中括号
{}
将元素括起来。
- 推荐插件:
MarkdownTools
有常用符号,还可以在线设计公式。
常见符号:
符号或结构 | 语法 |
---|---|
\(\alpha\) | \alpha |
\(\beta\) | \beta |
\(\chi\) | \chi |
\(\frac{ab}{cd}\) | \frac{ab} |
\(\sqrt{abc}\) | \sqrt |
上标 | ^ |
下标 | _ |
示例:
牛顿第二定律公式是:$F=ma$。
$$v_t^2-v_0^2=2ax$$
效果:
牛顿第二定律公式是:\(F=ma\)。
链接语法
链接title是当鼠标悬停在链接上时会出现的文字。
语法:
[超链接显示名](超链接地址 "超链接title")
书写要点:
- 链接显示文本放在中括号内
[显示文本]
; - 链接地址放在显示文本后面的括号内
[显示文本](URL)
; - 若要添加链接title,需要添加在超链接地址后,中间以一个空格连接。
(URL "超链接title")
示例:
这是一个链接[Markdown语法](https://markdown.com.cn/basic-syntax/ "官方Markdown语法教程网站")。
效果:
这是一个链接Markdown语法。
网址和Email地址
书写:将链接的网址和Email放在尖括号<>
内,使其变成可点击的链接。
示例:
<https://markdown.com.cn/basic-syntax/>
<3568970551@qq.com>
效果:
https://markdown.com.cn/basic-syntax/
3568970551@qq.com
带格式化的链接
书写:
- 强调链接,在链接前后增加相应个数的星号实现相应的强调效果;
- 若要将链接显示为代码,需在方括号中添加反引号。
示例:
I love this ***[instructions](https://markdown.com.cn/basic-syntax/)***.
I love this [`instructions`](https://markdown.com.cn/basic-syntax/).
效果:
I love this instructions.
I love this instructions
.
图片语法
普通图片
书写:![图片alt](图片链接 "图片title")
书写:在感叹号!
后的方括号内添加替代文本,图像的Markdown链接放在圆括号内,链接后可以增加一个可选的title。
- 如果和我一样使用Vscode写md文档,推荐使用插件Image Paste,直接去扩展搜索下载就可以了。使用该插件后,复制图片,再粘贴到文档任意位置,可自动产生图片链接。
示例:
![Alt text](https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg"这是章鱼哥")
效果:
![](https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg)
链接图片
语法:
[![Alt text](Markdown "title")](URL)
书写:将图像的Markdown扩在方括号内,然后在方括号后的圆括号内添加跳转链接。
示例:
[![Alt text](https://img2023.cnblogs.com/blog/3258107/202311/3258107-20231107210109373-1183604037.jpg "跳去Bing搜索")](https://cn.bing.com/?ensearch=1&mkt=zh-CN)
转义字符语法
我们想书写上述语法中出现的符号,如
* ~
等,却不想行使他们的对应功能,就要使用转义字符语法。
书写:在要显示但用于格式化Markdown文档的字符前,添加反斜杠字符\
。
示例:\* 一朵黄玫瑰的记忆。
效果:* 一朵黄玫瑰的记忆。
自动网址链接
许多Markdown处理器会自动将URL转换为链接。这意味着即使输入的网址未使用Markdown语法,处理器也会自动将其转换为链接。
如果不希望自动链接URL,可以将其变成行内代码的形式。
示例:
https://markdown.com.cn/extended-syntax/automatic-url-linking.html
https://markdown.com.cn/extended-syntax/automatic-url-linking.html