【Markdown】Markdown自学笔记-基础篇

已于 2024-01-07 20:30:43 修改
阅读量911 收藏 20
点赞数 20
文章标签： 笔记 前端 vscode
于 2023-12-18 18:27:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/riskmoumou/article/details/135068261
版权

文章目录

前言

该笔记用于总结markdown的自学成果，便于后续使用

准备工作

使用环境

Visual Studio Code
相关扩展安装(打勾的为必需)

  • Markdown Preview Enhanced
  • Office Viewer(Markdown Editor)
  • Markdown Editor
  • Markdown All in One
  • learn-markdown

基本语法

标题

各级标题的演示

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

演示效果

我是一级标题

我是二级标题

我是三级标题

我是四级标题
我是五级标题
我是六级标题

替代表达方式

一级标题
=========
text  
二级标题
---------
text

演示效果

一级标题

text
二级标题

text

使用===表示上一行为一级标题或者使用---表示上一行为二级标题

创造段落

我真的很喜欢Markdown。

我想从现在开始我会用它。

演示效果

我真的很喜欢Markdown。

我想从现在开始我会用它。

你需要做的就是在段落之间键入一个空行即可,不要使用 空格或者 制表符Tab

如何换行 

这是第一行。   
这是第二行。

演示效果

这是第一行。
这是第二行。

你需要做的就是在段落的末尾键入两个或者更多 空格后按下回车(Enter)

强调的使用

粗体

我喜欢 **粗体**.

我喜欢 __粗体__.

爱 **是** 粗体

演示效果

我喜欢 粗体.

我喜欢 粗体.

爱 是 粗体

你需要做的就是在单词或短语的前后加上两个星号*或下划线_

斜体

*猫在喵*.

_猫在喵_.

一只*猫*在叫

演示效果

猫在喵.

猫在喵.

一只猫在叫

你需要做的就是在单词或短语的前后加上一个星号*或下划线_

斜体+粗体

***重要*** 文本.  
 
___重要___ 文本.  

__*重要*__ 文本.  
 
**_重要_** 文本.

演示效果

重要 文本.

重要 文本.

重要 文本.

重要 文本.

你需要做的就是在单词或短语的前后加上三个星号*或下划线_

星号*或下划线_可以按照个人偏好混合使用来实现同样的功能

引用

> 笑

演示效果

笑

你需要做的就是在段落前面加一个>

多段落引用

> 第一段
>
> 第二段

演示效果

第一段

第二段

在段落之间的空白行上加一个>

嵌套引用

> 第一段
>
>> 第二段

演示效果

第一段

第二段

在要嵌套的段落前面添加>>

引用时使用其他元素

>##### 季度业绩看起来很棒!
>
> - 收入破纪录。
> - 利润比以往任何时候都高。
>
> 一切都**顺利**。

演示效果

季度业绩看起来很棒!
  • 收入破纪录。
  • 利润比以往任何时候都高。

一切都顺利。

不是所有的元素都支持这一点,你需要观察一下哪些生效了

列表

你可以使用有序列表或者无序列表

有序列表

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

5. 第一项
6. 第二项
7. 第三项
8. 第四项

9. 第一项
10. 第二项
11. 第三项
5. 第四项

演示效果

  1. 第一项

  2. 第二项

  3. 第三项

  4. 第四项

  5. 第一项

  6. 第二项

  7. 第三项

  8. 第四项

  9. 第一项

  10. 第二项

  11. 第三项

  12. 第四项

不用遵循数字顺序排列,但是必须从数字1开始

嵌套列表 

1. 第一项
2. 第二项
3. 第三项
    1. 缩进项目
    2. 缩进项目
4. 第四项

演示效果

  1. 第一项
  2. 第二项
  3. 第三项
    1. 缩进项目
    2. 缩进项目
  4. 第四项

若要在有序列表中嵌套行项，请将项缩进四个空格 或一个制表符Tab

无序列表

- 第一项  
- 第二项  
- 第三项  
- 第四项  

* 第一项  
* 第二项  
* 第三项  
* 第四项  

+ 第一项  
* 第二项  
- 第三项  
+ 第四项

演示效果

  • 第一项
  • 第二项
  • 第三项
  • 第四项
  • 第一项
  • 第二项
  • 第三项
  • 第四项
  • 第一项
  • 第二项
  • 第三项
  • 第四项

在行项前面添加破折号-、星号*或加号+

上述混合使用也可以

嵌套无序列表

- 第一项
- 第二项
- 第三项
    - 缩进项目
    - 缩进项目
- 第四项

演示效果

  • 第一项
  • 第二项
  • 第三项
    • 缩进项目
    • 缩进项目
  • 第四项

若要在无序列表中嵌套行项，请将项缩进四个空格 或一个制表符Tab

在列表中加入元素

要在列表中添加另一个元素，同时保持列表的连续性，请将
元素缩进四个空格或一个制表符

段落
* 这是列表中的第一项。
* 这是清单上的第二项。

    我需要在第二项下面再加一段。

* 这是清单上的第三项。

演示效果

  • 这是列表中的第一项。

  • 这是清单上的第二项。

    我需要在第二项下面再加一段。

  • 这是清单上的第三项。

引用
* 这是列表中的第一项。
* 这是清单上的第二项。
    > 引用在这里看起来很棒。
* 这是清单上的第三项。

演示效果

  • 这是列表中的第一项。
  • 这是清单上的第二项。

    引用在这里看起来很棒。

  • 这是清单上的第三项。

代码块

1. 打开文件。
2. 在第21行找到以下代码块:

        <html>
          <head>
            <title>Test</title>
        </head>

3. 更新标题以匹配您的网站名称。

演示效果

  1. 打开文件。

  2. 在第21行找到以下代码块:

    <html>
  <head>
    <title>Test</title>
</head>

  3. 更新标题以匹配您的网站名称。

代码块通常缩进四个空格 或一个制表符Tab 。当它们在一个列表中，则需要将它们缩进八个空格或两个制表符。但这样通常有些繁琐

1. 打开文件。
2. 在第21行找到以下代码块:
    ```html
        <html>
          <head>
            <title>Test</title>
        </head>
    ```
3. 更新标题以匹配您的网站名称。

演示效果

  1. 打开文件。
  2. 在第21行找到以下代码块:
        <html>
      <head>
        <title>Test</title>
    </head>
  3. 更新标题以匹配您的网站名称。

因此,通常我们会使用"```"将代码框起来,你可以同时在"```"后标明这段代码使用的语言,以此显示对应的语法高亮

你也可以使用~~~实现相同的效果

图片

1. 打开文件。
2. 惊叹于它的美丽。

	![Boost Note](https://i-blog.csdnimg.cn/blog_migrate/5def04c7af2e32e83234c3ee6c3f2831.jpeg)

3. 关闭文件

演示效果

  1. 打开文件。
  2. 惊叹于它的美丽。

Boost Note

  1. 关闭文件

使用 ![ ] ( 图片链接(path/URL) "图片描述") 的格式即可

行内代码

快捷键`ctrl+F`

演示效果

快捷键ctrl+F
使用`将其框起来即可

转义符号

``Use `code` in your Markdown file.``

演示效果

Use `code` in your Markdown file.

*使用 `` 将其框起来即可,也可以使用 \对单个字符进行转义 *

\可以转义的字符如下所示

CharacterName
\反斜线
`勾号
*星号
_下划线
{}花括号
[]括号
()圆括号
#井号
+加号
-减号（连字号）
.句号
!感叹号

水平线

***
---
___

演示效果

*使用至少三个一样的* 或者 _ 或者 - *

链接

Use [Duck Duck Go](https://duckduckgo.com).

演示效果

Use Duck Duck Go.

[链接文本] (链接)

给链接添加标题

Use [Duck Duck Go](https://duckduckgo.com "My search engine").

演示效果

Use Duck Duck Go.

将URLs或者邮箱地址转换为链接

<https://eff.org>  
<fake@example.com>

演示效果

https://eff.org
fake@example.com

你只需要用<>将其框起来就可以了

强调链接

I love supporting **[EFF](https://eff.org)**.  
This is the *[EFF](https://eff.org)*.

演示效果

I love supporting EFF.
This is the EFF.

你只需要用一个*将[链接文本] (链接)框起来表示斜体,或者两个*将其框起来表示粗体

引用样式的链接

[链接文本] [标签] 第一部分是链接的文本,第二部分是标签,你可以在两个[]之间放置一个空格(这不是必需的),标签支持字母,数字,空格,标点,但不区分大小写

第二部分可以放置在markdown文档的任意位置

你可以将其放在出现的段落之后

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit life styles"), and that means comfort.

演示效果

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

你也可以将其放在文档的末尾,以类似尾注或者脚注的方式

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a [hobbit-hole][1], and that means comfort.

[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

演示效果

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a hobbit-hole, and that means comfort.

扩展语法

扩展语法并非在所有Markdown应用程序中都可用,这一点需要自行调整

表

| 语法 | 描述 |
| ----------- | ----------- |
| 页眉 | 标题 |
| 段落 | 文本 |

| 语法 | 描述 |
| --- | ----------- |
| 页眉 | 标题 |
| 段落 | 文本 |

演示效果

语法描述
页眉标题
段落文本
语法描述
页眉标题
段落文本

单元格的长度可以调整,尽管调整前后的演示效果没有区别

事实上,使用 - 与 | 创建表可能十分繁琐,我们可以使用Markdown 表格生成器来加速这一过程

对齐

  • 水平向左 :---
  • 水平居中 :---:
  • 水平向右 ---:
| 语法 | 描述 | 测试文本 |
| :--- | :---: | ---: |
| 页眉 | 标题 | Here's this |
| 段落 | 文本 | And more |

演示效果

语法描述测试文本
页眉标题Here’s this
段落文本And more

表格中的文本格式

你可以在表格中设置文本的格式。例如，链接、代码(单词)或短语(只使用`，而不是代码块)和强调
你不能添加 标题、块引号、列表、水平规则、图像或HTML标签

你可以使用 &#124 替代 |

脚注

这是一个简单的脚注[^a]，这是一个较长的脚注[^bignote]。

[^a]:这是第一个脚注。

[^bignote]:这里有多个段落和代码。

缩进段落，使其包含在脚注中。

演示效果

这是一个简单的脚注1，这是一个较长的脚注2。

缩进段落，使其包含在脚注中。

你需要做的就是在对应位置后写上[数字或者单词,不能有空格或者制表符],之后在文档的任意位置写上[脚注]: 内容

标题ID

### My Great Heading {#custom-id}

[Heading IDs](#heading-ids)

演示效果

My Great Heading {#custom-id}

Heading IDs

删除线

The world is ~~flat~~ round.

演示效果

The world is flat round.

你需要做的就是将要添加删除线的部分前后用~~框起来

任务列表

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

演示效果

  • Write the press release
  • Update the website
  • Contact the media

- [ ] 表示任务列表,- [x]表示任务列表已经完成

自动将URL转换为链接

http://example.com

演示效果

http://example.com
许多Markdown处理器支持这种转换,即使你没有用括号将链接括起来，当然，也有不支持的

URL取消自动链接

`http://example.com`

演示效果

http://example.com

跟行内代码一样,用`框起来即可

备忘单

基本语法

ElementMarkdown Syntax
标题# H1 ## H2 ### H3
粗体bold text
斜体italicized text
块引用> blockquote
有序列表1. First item 2. Second item 3. Third item
无序列表- First item - Second item - Third item
代码code
水平规则—
链接链接名
图片

扩展语法

ElementMarkdown Syntax
表—
隔离代码块{}
脚注Here’s a sentence with a footnote. [^1] [^1]: This is the footnote.
标题ID### My Great Heading {#custom-id}
删除线The world is flat around.
任务列表- [x] Write the press release - [ ] Update the website

参考资料

  • 书籍
    • 《The Markdown Guide》
  • 网站
    • Markdown 官方教程 https://markdown.com.cn/
    • 手动创建Markdown目录 https://www.cnblogs.com/eternityz/p/12269872.html
  • 快捷键
    • 快捷键总结 http://t.csdnimg.cn/hbGa4

  1. 这是第一个脚注。 ↩︎

  2. 这里有多个段落和代码。 ↩︎

riskmoumou
关注
  • 20
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Markdown语法
include_world_的博客
09-15 1363
6000字带你快速入门Typora，熟悉Markdown基本语法，进阶技巧，让码字变成一种享受
markdown-it-multimd-table:用于markdown-it markdown解析器的Multimarkdown表语法插件
04-29
用于markdown-it markdown解析器的MultiMarkdown表语法插件介绍Markdown规范仅定义表的基础。 当用户需要诸如colspan类的常用功能时，他们必须回退到原始HTML。 用HTML编写表格确实冗长且麻烦。 该插件使用...
【markdown】markdown自学笔记（进阶篇）
riskmoumou的博客
01-07 982
本篇内容涉及markdown的基础语法与规范的建议.以及后续的进阶语法(扩展语法主要基于Markdown Preview Enhanced)
自学-Markdown-万字总结，用法大汇总
篝火001的博客
04-25 2187
Markdown用法大汇总
2024-07-22 markdown学习笔记，社招面试技巧和注意事项
m0_61369360的博客
04-20 987
算法的准备时间比较长，是一个长期的过程。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。链接：https://pan.baidu.com/s/1LJCeVke0qfkJ1zCN17-F-Q。Markdown 区块。
MarkDown语法浅析：基础语法篇
m0_57158496的博客
12-09 1164
本篇学习笔记详细讲述基础MarkDown语法与简单HTML5标签，把CSDN博文搞得美美哒✌ (本文获得CSDN质量评分【89】) 【学习的细节是欢悦的历程】 Python 官网：https://www.python.org/ Free：大咖免费“圣经”教程《 python 完全自学教程》，不仅仅是基础那么简单……   自学并不是什么神秘的东西，一个人一辈子自学的时间总是比在学校学习的时间长，没有老师的时候总是比有老师的时候多。             —— 华罗庚 My CSD
【白水】对于markdown笔记与资料管理的思考与优化尝试【持续更新】
hlxx525的博客
07-25 434
关键词 markdown、笔记、文献管理、流程图、思路、爬虫 前言 读书笔记千万种，各大笔记思路几乎都是相似的怎么才能用markdown加上python的一些基础的代码逻辑完成文献管理，尽量高效快捷的完成。 我算是大学那种真实混子（想着20h就可以完成一门中等难度科目，完成学科的基础考试，除非有大量的计算题） 读书笔记流程 关于obsidian资料管理的流程准则 ...
狂神说java java基础篇 学习笔记
weixin_45975667的博客
03-29 1648
狂神说java java基础篇学习笔记，包括了狂神基础视频的所有内容
Java自学笔记
kumokumo1的博客
04-26 161
Java自学笔记欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mark...
Linux之自学shell编程 -学习笔记
xukeke12138的博客
07-13 301
Linux知识体系：（"[]"表示不需要的先修知识） Linux基础知识、Linux的用户管理和账户管理、Linux文件管理、Linux的文件系统； 字符处理：文本搜索（grep）、排序（sort）、删除重复内容（uniq）、截取文本（cut）、文本转换（tr）、文本合并（paste）、分割大文件（split）； [网络管理]；[进程管理]；[软件安装：rpm/yum]；[编辑器]； 正则表达式：通配符、[文本处理工具sed、awk]； 目标是写出用shell编程实现ftp自动登录备份的程序（当然也包括对f
前端开源库-markdown-it-for-inline
08-29
Markdown是一种轻量级的标记语言，广泛应用于博客、文档、笔记等场景，它以易于阅读和写作的方式组织文本，而Markdown-it-for-inline则进一步增强了这种体验，特别是在处理内联元素时。 Markdown的基本语法包括标题...
markdown-it-charts:markdown-it图表插件
05-13
markdown-it的图表插件。 快速轻松地扩展markdown-it。 支持chart.js，echarts，highcharts，CHARTIST，c3.js，tauCharts。 安装 node.js和Bower： npm install markdown-it-charts --save bower install markdown-...
markdown-it-image-size:向markdown-it呈现的图像标签添加宽度和高度
03-05
Markdown-it-image-size的实现原理可能是这样的：首先，它会监听Markdown-it解析器的`'image'`事件，这是当解析器遇到一个图片标签时触发的。然后，插件会检查图片链接后面是否有尺寸信息，如果有，它将提取这些信息...
markdown-it-incremental-dom：使用增量DOM的markdown-it渲染器插件
02-04
让我们看看主要功能： : 或需求 > = 4.0.0（推荐最新版本> = 8.4.0，此插件使用它） > = 0.5.x例子节点import * as IncrementalDOM from 'incremental-dom'import MarkdownIt from 'markdown-it'import ...
vite5+vue3开发阅读APP实战笔记20240725
最新发布
Python私教
07-25 413
修改src/page/home/index.vue，使用组件和API。注意，这里无论是组件还是API，都不需要我们手动引入，我们配置了自动导入以后，vite会帮我们自动导入。创建 src/page/home/index.vue。修改 vite.config.js。修改vite.config.js。修改 src/main.js。修改src/App.vue。
学习笔记-系统框图传递函数公式推导
weixin_45875994的博客
07-24 817
输出C(s)是前向路径（通过G(s)）的输出与反馈路径（通过H(s)）的输出之差（在负反馈系统中）。因此，我们可以写出以下关系式：这里，G(s)R(s)是前向路径的输出，而G(s)H(s)C(s)是反馈路径的输出（注意，反馈路径的输出先经过H(s)，再与前向路径的输出相减）。
Typora笔记上传到CSDN
m0_48362854的博客
07-25 544
我花了一个小时弄这个 找了很多csdn的笔记 都弄完感觉最方便的还是直接在csdn上写（因为有的之前不是用的阿里云oss 而是gitee 免费仓库 但是好像后来不能使用了 就会导致你上传的笔记图片不显示 很麻烦 使用阿里云或者腾讯云的话 需要花钱 虽然两块钱用一年 但是感觉也是很麻烦 不如直接在网页上写写算了 当然如果笔记图片很多的 还是建议配置一下 ）参考这个配置完阿里云oss 没什么问题 但是PicGo也是参考他的 因为版本是旧的 可以点击我下边的官方链接下载。图片的链接是本地的 当然没法显示。
SAP PP学习笔记31 - 计划运行的步骤2 - Scheduling(日程计算)，BOM Explosion(BOM展开）
shi_ly的专栏
07-24 782
本章主要讲Scheduling(日程计算),其中包括 外部调达中的调度，生产订单中的调度，修改需求日期(其实就是在物料中增加安全时间和BOM中的提前期偏置量)。另外还讲了BOM展开的内容，详细讲了BOM选择的各种方法，除了按数量选BOM之外，还有其他比如 按日期，按生产版本等，而其中按日期又分为按订单开始日期，订单终了日期等，越趋复杂。
markdown-navbar更改data-id
05-30
要更改 `markdown-navbar` 组件中生成的导航链接的 `data-id` 属性，你可以使用 `remark` 和 `remark-slug` 插件来为 markdown 中的标题添加自定义的 `slug`，然后在 `markdown-navbar` 中使用 `slug` 来覆盖默认的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值