Markdown学习笔记

markdown学习笔记

markdown学习笔记
 1.markdown介绍
 2.如何插入图片？
 3.如何插入表格？
 4.如何插入代码？
 5.如何插入链接
 6.其他布局操作

原生markdown语法

1.markdown介绍

  Markdown语法最早由John Gruber于2004年创立。为了区分于后来出现的各种衍生Markdown语法，故称为原生Markdown。
  自从John Gruber在2004年发布Markdown之后，Markdown进入了自由生长的状态，因为创始人John Gruber自2004年之后就没有更新过Markdown。
  由于原生Markdown只是一个轻量级的标记语言，很多功能不具备。为了扩充功能，很多Markdown拓展语法被开发出来。其中，著名的有GFM、PHP Markdown Extra、MultiMarkdown、Pandoc Markdown等等。

  现在这里使用的应该是GFM。
  原生Markdown发布后，最早在程序员圈内流行。由于Markdown的易读易写，而且对程序员很友好（支持块代码和行内代码），全球最大的代码托管平台Github引入了Markdown，并且对原生Markdown语法进行了拓展，并称之为Github Flavored Markdown，简称GFM。

2.如何插入图片？

  使用语法![描述文本]()即可添加图片，但图片的路径必须和markdown文件在一起，否则会出错。
  描述文本相当于重新给图名命了个名。
  

3.如何插入表格？

  使用|来分隔不同的单元格，使用-来分隔表头和其他行。
  在-的左右两侧使用:可以实现表格内左右对齐或居中。

表头	表头	表头
左对齐	居中	右对齐
:----	:----:	----:
左	中	右

4.如何插入代码？

  使用```语言来插入代码，语言为此代码使用的语言，用于说明代码并能提供代码高亮

    int i;
    scanf("%d", &i);
    if(i == 1)
    {
        print("hello world!");
    }
    else
    {
        print("good bye~");
    }

  也可以使用`在语句中添加一小段代码，例如：` print("yes") `。
  注意代码和`间要用空格隔开。

  代码中每包含多一个`，就需要用多一个`来包裹代码。

5.如何插入链接？

  使用语法[文本](链接 "悬浮文字")来创建文本超链接，当我们点击文本时会跳转到对应网址，当我们鼠标悬停在文本上时会显示悬浮文字，悬浮文字可不写。

  markdown教程

  也可以用<链接>直接放链接：https://www.appinn.com/markdown/

  对图片也可以进行超链接:（标准的Markdown文本是不支持居中对齐的，表格内的除外）
  
  还有一种更高级的索引链接：[文本][链接代号]+[链接代号]:链接
  链接代号必须一一对应，但链接的位置可以随意

  markdown教程、CSDN

  链接不光是网页链接，也可以是文档内的标题链接(只有使用#的标题才有用)，可以实现文档内索引：返回顶部。根据这个方法可以实现人造目录（原生markdown不支持@[TOC]创建目录）

6.其他布局操作

  斜体：*斜体*
  加粗：**加粗**
  删除线：~~删除线~~
  硬换行：在一段文字的后面加两个空格后再按回车就能实现换行
  软换行：在两段文字之间空一行（两次回车）
  空格：

名称	代码	长度
窄空格	 	半个字母的宽度
半角空格	 	一个字母的宽度
不换行空格	 	常规空格的宽度
全角空格	 	一个字的宽度

---

对Markdown语法的增强

  使用Markdown Preview Enhanced插件，若VS Code没有装这个插件，那么以下代码的功能都会无法正常显示。

1.自动生成目录

  在我们需要的地方写上[toc]就会自动根据#所在的标题生成目录。

2.各种文本操作

  直接换行将能够被认为是软换行，无需增加两个空格
  高亮：==高亮==
  上^标：上^标^
  下_标：下~标~
  emoji😄：:smile:
  脚注 ¹：[^1]+[^1]:脚注信息（脚注信息可放在任意位置）
  缩略信息：文本1+*[文本1]：缩略信息（缩略信息可放在任意位置）

  还支持用LaTeX写数学公式：
$${\int }_{-\infty }^{\infty }{e}^{-x^2}=\sqrt{\pi }$$

3.代码块显示行数并高亮

  在代码块第一个```后面加上{.line-numbers}即可显示行数。
  在{}内加上highlight=第几行-第几行就可以将第几行到第几行高亮显示出来。

    #include <stdio.h>

    int main(void)
    {
        printf("Markdown!");
        return 0;
    }

4.任务列表

  使用- []和- [x]可以列出完成和未完成的任务列表，并且可以进行互动，实现同步更改。

• 做笔记
• 学习Markdown
• 看书

5.表格单元格合并

  可以使用>和^或者空格来实现单元格的合并
  要想使用这个功能需要在设置里开启Enable Extended Table Syntax

aa	bb	cc
1		2
3	>	4
5	6
^	7	8

6.支持多种图像语言

Mermaid

WaveDrom

    {signal:
    [
        {name:'clk',wave:'p..Pp..P'},
        ['Master',
            ['ctrl',
                {name:'write',wave:'01.0....'},
                {name:'read',wave:'0...1..0'}
            ],
                {name:'addr',wave:'x3.x4..x',data:'A1 A2'},
                {name:'wdata',wave:'x3.x....',data:'D1'},
        ],
        {},
        ['slave',
            ['ctrl',
                {name:'ack',wave:'x01x0.1x'},
            ],
                {name:'rdata',wave:'x.....4x',data:'Q2'},
        ]
    ]
    }

GraphViz

    digraph G{
        A->B
        B->C
        B->D
    }

Vega-lite

    {
        "data":{
            "values":[
                {"a":"A","b":20},
                {"a":"B","b":55},
                {"a":"C","b":43},
                {"a":"D","b":91},
                {"a":"E","b":81},
                {"a":"F","b":53},
                {"a":"G","b":19},
                {"a":"H","b":87},
                {"a":"I","b":52}
            ]
        },
        "mark":"bar",
        "encoding":{
            "x":{"field":"a","type":"ordinal"},
            "y":{"field":"b","type":"quantitative"}
        },
        "width":500,
        "height":400
    }

Kroki

blockdiag {
  Kroki -> generates -> "Block diagrams";
  Kroki -> is -> "very easy!";

  Kroki [color = "greenyellow"];
  "Block diagrams" [color = "pink"];
  "very easy!" [color = "orange"];
}

Kroki

blockdiag {
  Kroki -> generates -> "Block diagrams";
  Kroki -> is -> "very easy!";

  Kroki [color = "greenyellow"];
  "Block diagrams" [color = "pink"];
  "very easy!" [color = "orange"];
}

---

1. 脚注信息 ↩︎