Markdown语法备忘录

581 阅读3分钟

这不是一篇教你如何入门 Markdown 语法的文章,它存在的目的是记录我们平常不经常使用的语法,例如如何调整图片的宽度信息;由于这些语法我们不经常使用,所以到用时总是会忘记,此时就需要一篇文章来记录这些不常用的语法,需要用到但又忘记的时候打开来看一下即可。

基于这个原则,文章不会有如何声明标题这样的语法。

注意:文章中用到了很多 HTML 语法,某些平台可能不支持这些语法。


多行段落

默认情况下多行空白内容只会显示一行;可以使用 <br></br> 实现多行效果。

第一行

<br></br>
<br></br>
第二行

第一行





第二行

单行注释

由于是注释内容,所以你看不到实际内容,这是正常现象(如果你看到了实际内容,说明该平台不支持该语法)。

[//]: 这是一行注释

多行注释

<!--
我是第一行注释,
我是第二行注释。
-->

空格

默认情况下多个空格只会显示为一个空格,可以使用 &nbsp; 实现多个空格的效果。

文字1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文字2

文字1        文字2

链接的悬停文案

[百度](https://www.baidu.com "当鼠标悬停在文字上方时,你会看到它")

百度(ps: 把鼠标悬停在「百度」上,你能看到悬停文案)

图片的悬停文案

![阿西河图片](https://p.upyun.com/docs/cloud/demo.jpg "当鼠标悬停在文字上方时,你会看到它")

阿西河图片

图片自定义对齐方式和尺寸等参数

<div style="text-align: center;background-color: #b6ffc8;">
    <img 
        src="https://p.upyun.com/docs/cloud/demo.jpg" 
        alt="阿西河图片" 
        title="阿西河图片Title" 
        style="width:300px;height:300px;"
    >
</div>
阿西河图片

代码高亮

```c
int main(int argc, const char * argv[]) {
    printf("Hello World!");
    return 0;
}
```
int main(int argc, const char * argv[]) {
    printf("Hello World!");
    return 0;
}

大部分语言的关键字都是其名称的小写形式,例如 JavaScript 对应的关键字是 javascript,故而我只记录了一些特殊的关键字:

语言名关键字
C++cpp
c#cs
Objective-Cobjc

跳转到指定标题

[点击跳转到「多行段落」标题](#多行段落)

点击跳转到「多行段落」标题

跳转到指定文案

要跳转处的文案必须这样写:<span id="anchor1">默认情况下</span>

[点击跳转到指定位置「默认情况下」](#anchor1)

点击跳转到指定位置「默认情况下」

脚注

脚注1[^1]

脚注1 1

任务列表

- [x] 已完成的任务
- [ ] 未完成的任务
  • 已完成的任务
  • 未完成的任务

删除线

这是 ~~删除线~~

这是 删除线

字体

<font face="黑体" size=5>我是黑体字</font>
<font face="微软雅黑" size=5>我是微软雅黑</font>

我是黑体字
我是微软雅黑

文字颜色

<font color=#0099ff>我的文字颜色是蓝色</font>

我的文字颜色是蓝色

上标

n<sup>2</sup> = n * n

n2 = n * n

下标

H<sub>2</sub>O

H2O

背景颜色

<p style="background-color: #b6ffc8;"><font color=#000>背景是绿色</font></p>

背景是绿色

文字对齐方式

<p style="text-align: left;background-color: #b6ffc8;"><font color=#000>文字左对齐</font></p>
<p style="text-align: center;background-color: #b6ffc8;"><font color=#000>文字居中对齐</font></p>
<p style="text-align: right;background-color: #b6ffc8;"><font color=#000>文字右对齐</font></p>

文字左对齐

文字居中对齐

文字右对齐

插入音频

<iframe 
    frameborder="no" 
    border="0" 
    marginwidth="0" 
    marginheight="0" 
    width=100% 
    height=auto 
    src="https://music.163.com/outchain/player?type=2&id=528478901&auto=1&height=66">
</iframe>

插入视频

<iframe 
    src="https://player.bilibili.com/player.html?aid=10631344&cid=17548810&page=1" 
    scrolling="no" 
    style="border:0;width:100%;height:auto;min-height:790px;"
    allowfullscreen="true"> 
</iframe>

使用Mermaid画图

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```
sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

Footnotes

  1. 脚注1