Markdown learning

Markdown learning

Posted by beansugar on October 15, 2023

最近的事情已经多到让我身心俱疲的地步了,一直没时间写,而且遇到了很多问题(代码写不出来)。今天抽空晚上10点学一会,不然离自己的目标越来越远了~~希望尽快度过10月份吧。

仅作学习使用,本篇为B站UP主我是何方Markdown教学视频的学习笔记

标题的使用

用#的方式

一级标题“# 标题1 ”(#后必须带空格)
二级标题“## 标题2 ”

一直到六级标题“###### 标题六”

用===或—的方式

一级标题:在段落后面加三个以上===
二级标题:在段落后面加三个以上—

段落的使用和换行

markdown中直接输入即为段落

注意:段落前不能有超过一个空白字符(空格、制表符)。若超过,该文本会生成代码块而不是段落。
段落后面也不能有超过一个空白字符(空格、换行符),若超过一个换行符,会生成两个段落,若超过一个空格,会生成换行标签。

字体样式

  1. 粗体

这是粗体 如下所示

**这是粗体**  
__这是粗体__    
  1. 斜体

这是斜体 如下所示

 *这是斜体*  
 _这是斜体_
  1. 粗斜体

这是粗斜体 如下所示

***这是粗斜体***    
___这是粗斜体___  
**_这是粗斜体_**
__*这是粗斜体*__  
  1. 删除线

这是斜体 如下所示

 ~~这是斜体~~  

列表

  1. 有序列表

    以开头数字递增

    如下所示

      1. 有序列表  
      2. 有序列表
      3. 有序列表
         1. 有序列表
         2. 有序列表
    
    1. 有序列表
    2. 有序列表
    3. 有序列表
      1. 有序列表
      2. 有序列表
  2. 无序列表

    如下所示

    1.以-开头

    • 无序列表1
    • 无序列表1

        - 无序列表
        - 无序列表
      
  3. 以*开头

  • 无序列表
  • 无序列表

      * 无序列表
      * 无序列表
    
  1. 以+开头
  • 无序列表
  • 无序列表

      + 无序列表
      + 无序列表  
    

任务列表

有序任务列表

  1. 已选中
  2. 未选中

     1. [x] 已选中  
     2. [ ] 未选中
    

无序任务列表

  • 已选中
  • 未选中

      - [x] 已选中  
      - [ ] 未选中
    

引用

这是引用

> 这是引用

代码块

  1. 行内代码

    这是行内代码,使用两个`来引用

    这是行内`代码`,出现`的情况

    这是行内`代码`    
    这是行内`` `代码` ``
    
  2. 代码块

    在文本前加四个空格或者一个制表符

        这是代码
    
  3. 围栏式代码块(最常用)

    1. 用三个```
    int main()
    {
        return 0;
    }
    
    1. 用三个~~~
    int main()
    {
        return 0;
    }
    

分割线

在一行中存在三个或以上的星号(*), 减号(-),下划线(_)




***

---

___

超链接

  1. 常用带名称

The beansugar’s Blog

[The beansugar's Blog](https://github.com/beansugar001)
  1. 链接到其他Markdown页面

Markdown标题

[Markdown标题](./标题)
  1. 无标签链接

http://www.baidu.com/

<http://www.baidu.com/>
  1. 无标签邮箱链接

nanpan672@gmain.com

<nanpan672@gmain.com>
  1. 添加title(鼠标移上去后出现的详情页面)

Markdown标题

[Markdown标题](./标题 "nihao")
  1. 自动超链接

解析器会自动解析https://www.baidu.com/

解析器会自动解析https://www.baidu.com/
  1. 链接样式

可在[]内添加样式(或整个)

百度

[**百度**](https://www.baidu.com/)

图片

  1. 图片

这是一张咖啡图片

    ![这是一张咖啡图片](/img/post-bg-coffee.jpeg)
  1. 带链接的图片

[这是一张咖啡图片]

    [![这是一张咖啡图片](/img/post-bg-coffee.jpeg)]
  1. 带title(鼠标放上会有解释)的图片

这是一张咖啡图片

    ![这是一张咖啡图片](/img/post-bg-coffee.jpeg "这是title")

emoji表情

-😄
-✈️

image

内嵌HTML和react

直接写就行

#表格

  1. 表格使用竖线|区分每一列,在表头和表格体之间用至少三个减号-来做分隔
第一列 第二列 第三列
一行一列 一行二列 一行三列
二行一列 二行二列 三行三列
    |第一列|第二列|第三列|    
    |---|---|---|
    |一行一列|一行二列|一行三列|  
    |二行一列|二行二列|三行三列|  
  1. 表格的对齐方式

左对齐在左边加:,右对齐在右边加:,居中对齐在两边加:

第一列1111111111 第二列222222222222 第三列333333333333
一行一列 一行二列 一行三列
二行一列 二行二列 三行三列
|第一列|第二列|第三列|    
|:---|---:|:---:|
|一行一列|一行二列|一行三列|  
|二行一列|二行二列|三行三列|
  1. 可在表格内使用其他元素

如斜体、粗体、超链接、行内代码图片、emoji等

1 2
粗体 斜体
行内代码 超链接
🐱

脚注

  1. 基本用法

[^基本用法]

    [^基本用法]:内容1111  

    [^基本用法]
  1. 行内脚注

^[行内脚注]

    ^[行内脚注]  
  1. 作为常量

logo
再其他地方可以应引用 好处:可以增加代码的可读性和整洁性

公式

  1. 常用公式

markdown本身没有公式,但支持kates的语法。

用两个$来包裹起来

$a^2=b^2+c^2$

$a^2=b^2+c^2$
  1. 块公式

前后各用两个$$包裹,各自独占一行

\[f(x)=\int_{-\infty}^\infty \hat{f}(\xi),e^{2 \pi i \xi x}\,d\xi\]
$$
f(x)=\int_{-\infty}^\infty
    \hat{f}(\xi),e^{2 \pi i \xi x}\,d\xi
$$

图表

markdown本身不支持图标,但支持许多图表解释,如mermaid。

  1. 流程图
flowchart LR
    A[直角矩形]-->|链接文本|B(矩形)
    B-->C{选择}
    C-->|一|D[结果一]
    C-->|二|E[结果二]
```mermaid
flowchart LR
    A[直角矩形]-->|链接文本|B(矩形)
    B-->C{选择}
    C-->|一|D[结果一]
    C-->|二|E[结果二]
```
  1. 时序图

  2. 类图

  3. 状态图实体关系图

  4. 用户旅行图

  5. 甘特图

  6. 需求图

  7. Git记录图

  8. C4模拟图

注释

markdown本身不支持注释,但大部分解释器都是支持markdown的注释表的

<?注释内容>