优秀的编程知识分享平台

网站首页 > 技术文章 正文

一篇就上手:Markdown实用技巧(markdown-it)

nanyue 2024-09-27 13:06:38 技术文章 23 ℃

最近开始用Markdown做笔记,感觉非常好用,这里我先分享一下学习Markdown语法的笔记,稍后我会发布视频教程,欢迎大家关注^_^

什么是Markdown

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber,1973年—)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。它很适合排版简洁的文档、例如笔记、说明文档,但并不适合复杂的排版需求。

应用场景

很多支持写文档的网站或者应用软件都支持Markdown,例如程序员常需要访问的GitHub,用于写作的网站简书,还有像用来写笔记的Notion或者Obsidian。

在Markdown代码中也可以包含一些HTML代码来实现相应的效果,相同的Markdown代码在不同的工具或在线编辑器中显示的效果可能会略有不同,有的工具可能还提供定制的语法,这里先对通用的语法做介绍。

语法

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

换行

2个以上空格 或 <br>

字体样式

代码:

**这是粗体文本。**
*这是斜体文本。*
~~删除线~~
E=MC<sup>2</sup>
H<sub>2</sub>O
<u>这是下划线</u>


显示:

这是粗体文本。
这是斜体文本。
删除线
E=MC2
H2O
这是下划线

水平线/分割线

使用三个或以上的 -* 或者 _ 来创建分割线。(和下面的内容之间要有空行,否则成了标题1)

列表

有序

代码:

1. 第一项  
1. 第二项  
1. 第三项  
1. 第四项


显示:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

无序

代码:

* 无序列表项1
* 无序列表项2
* 无序列表项3


显示:

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3

下级列表和缩紧4格插入项目内容

代码:

1. 第一项  
    * 无序列表项 1
    * 无序列表项 2
    * 无序列表项 3
1. 第二项  
1. 第三项  
1. 第四项


任务列表

代码:

- [ ] 任务1

- [x] 任务2

- [ ] 任务3


引用

代码:

> 这是一段引用
> 引用可以跨多行
>> 里面还可以套着引用


链接和锚点

增加链接

[链接文本](https://www.example.com)

网址和email

<https://www.example.com>
<fake@example.com>

锚点

这不是[引用](#引用)

插入图片

图片

![图片替代alt文本|显示宽度](图片地址 "图片title")

![图片替代alt文本][引用代码]

[引用代码]: 图片地址

图片链接

[![图片替代alt文字](图片地址)](链接地址)

表格

代码:

| ID | 书名 | 作者 |
|:---:|:---|---:| 
| 1 | 呐喊 | 鲁迅 | 
| 2 | 茶馆 | 老舍 | 
| 3 | 哈姆雷特 | 莎士比亚 |


显示:

ID

书名

作者

1

呐喊

鲁迅

2

茶馆

老舍

3

哈姆雷特

莎士比亚

显示代码

1个反引号扩起单行代码,在行内显示

如这段说明文字:

换行<br> ,特殊字符|转码用反斜线\

对应代码中的<br>就用了单引括起:

>换行`<br>` ,特殊字符\|转码用反斜线\\

另外,这句话中还用到了转义字符\

3个反引号扩起多行的代码块

    ```javascript
    const message = 'Hello, world!';
    console.log(message);
    ```

注释

%%dabde%%

嵌入网页

<iframe src='网址'></iframe>

最近发表
标签列表