MarkDown 教学

头像
DoubleAm
     广东
    阅读 5 分钟

    ?> 这是一个 MarkDown 教学

    标题

    <!-- tabs:start -->

    效果

    <!-- markdownlint-disable-next-line single-title -->

    标题 1 {docsify-ignore}

    标题 2 {docsify-ignore}

    标题 3 {docsify-ignore}

    标题 4 {docsify-ignore}
    标题 5 {docsify-ignore}
    标题 6 {docsify-ignore}
    Markdown
    # 标题 1

## 标题 2

### 标题 3

#### 标题 4

##### 标题 5

###### 标题 6

    <!-- tabs:end -->

    Text

    <!-- tabs:start -->

    效果

    Body text

    Bold text

    Italic text

    Strikethrough

    <mark>Marked text</mark>

    <pre>Preformatted text</pre>

    Small Text

    This is subscript

    This is superscript

    Markdown
    Body text

**Bold text**

*Italic text*

~~Strikethrough~~

<mark>Marked text</mark>

<pre>Preformatted text</pre>

<small>Small Text</small>

This is <sub>subscript</sub>

This is <sup>superscript</sup>

    <!-- tabs:end -->

    Links

    <!-- tabs:start -->

    效果

    Inline link

    Inline link with title

    Reference link by name

    Reference link by number

    [Reference link by self]

    Markdown
    [Inline link](https://google.com)

[Inline link with title](https://google.com "Google")

[Reference link by name][link1]

[Reference link by number][1]

[Reference link by self]

[link1]: https://google.com
[1]: https://google.com
[Reference link by self]: https://google.com

    <!-- tabs:end -->

    Lists

    <!-- tabs:start -->

    效果

    Ordered Lists

    1. Ordered 1

    2. Ordered 2

      1. Ordered 2a
      2. Ordered 2b
      3. Ordered 2c
    3. Ordered 3

    Unordered Lists

    • Unordered 1

    • Unordered 2

      • Unordered 2a
      • Unordered 2b
      • Unordered 2c
    • Unordered 3

    Task Lists

    • [x] Task 1

    • [ ] Task 2

      • [x] Subtask A
      • [ ] Subtask B
    • [ ] Task 3
    Markdown
    **Ordered Lists**

1. Ordered 1
1. Ordered 2
   1. Ordered 2a
   1. Ordered 2b
   1. Ordered 2c
1. Ordered 3

**Unordered Lists**

- Unordered 1
- Unordered 2
  - Unordered 2a
  - Unordered 2b
  - Unordered 2c
- Unordered 3

**Task Lists**

- [x] Task 1
- [ ] Task 2
  - [x] Subtask A
  - [ ] Subtask B
- [ ] Task 3

    <!-- tabs:end -->

    Blockquotes

    <!-- tabs:start -->

    效果

    横空出世，莽昆仑，阅尽人间春色。
    飞起玉龙三百万，搅得周天寒彻。

    - 教员

    Markdown
    > 横空出世，莽昆仑，阅尽人间春色。  
> 飞起玉龙三百万，搅得周天寒彻。
>
> `- 教员`

    <!-- tabs:end -->

    Code

    <!-- tabs:start -->

    效果

    This is inline code

    const add = (num1, num2) => num1 + num2;
const total = add(1, 2);

console.log(total); // 3
    <body>
  <p>Hello</p>
</body>
    Markdown
    This is `inline code`

```javascript
const add = (num1, num2) => num1 + num2;
const total = add(1, 2);

console.log(total); // 3
```

```html
<body>
  <p>Hello</p>
</body>
```

    <!-- tabs:end -->

    Notices

    <!-- tabs:start -->

    效果

    !> Important 重要提醒

    ?> Tip 提示建议

    Markdown
    !> **Important** 重要提醒

?> **Tip** 提示建议

    <!-- tabs:end -->

    Tabs

    <!-- tabs:start -->

    效果

    <!-- tabs:start -->

    English

    Hello!

    French

    Bonjour!

    Italian

    Ciao!

    <!-- tabs:end -->

    MarkDown

    <!-- tabs:start -->

#### **English**

Hello!

#### **French**

Bonjour!

#### **Italian**

Ciao!

<!-- tabs:end -->

    <!-- tabs:end -->

    Tables

    <!-- tabs:start -->

    效果
    表头A表头B表头C
    内容居左内容居中内容居右
    内容居左内容居中内容居右
    Markdown
    | 表头A    |  表头B   |    表头C |
| :------- | :------: | -------: |
| 内容居左 | 内容居中 | 内容居右 |
| 内容居左 | 内容居中 | 内容居右 |

    <!-- tabs:end -->

    Keyboard

    <!-- tabs:start -->

    效果

    ↑ Arrow Up

    ↓ Arrow Down

    ← Arrow Left

    → Arrow Right

    ⇪ Caps Lock

    ⌘ Command

    Markdown
    <kbd>&uarr;</kbd> Arrow Up

<kbd>&darr;</kbd> Arrow Down

<kbd>&larr;</kbd> Arrow Left

<kbd>&rarr;</kbd> Arrow Right

<kbd>&#8682;</kbd> Caps Lock

<kbd>&#8984;</kbd> Command

    <!-- tabs:end -->

    Horizontal Rule

    <!-- tabs:start -->

    效果
    Markdown
    ---

    <!-- tabs:end -->

    Images

    <!-- tabs:start -->

    效果

    Inline-style

    title=

    Reference-style

    alt text

    Markdown
    **Inline**

![alt text](http://a.biugle.cn/images/xixi.png "My Blog")

**Reference**

![alt text][logo]

[logo]:http://a.biugle.cn/images/xixi.jpg "My Blog"

    <!-- tabs:end -->

    Emoji

    A complete list is available here ===> Emoji Cheat Sheet

    <!-- tabs:start -->

    效果













































































    Markdown
    :bowtie:
:smile:
:laughing:
:blush:
:smiley:
:relaxed:
:smirk:
:heart_eyes:
:kissing_heart:
:kissing_closed_eyes:
:flushed:
:relieved:
:satisfied:
:grin:
:wink:
:stuck_out_tongue_winking_eye:
:stuck_out_tongue_closed_eyes:
:grinning:
:kissing:
:kissing_smiling_eyes:
:stuck_out_tongue:
:sleeping:
:worried:
:frowning:
:anguished:
:open_mouth:
:grimacing:
:confused:
:hushed:
:expressionless:
:unamused:
:sweat_smile:
:sweat:
:disappointed_relieved:
:weary:
:pensive:
:disappointed:
:confounded:
:fearful:
:cold_sweat:
:persevere:
:cry:
:sob:
:joy:
:astonished:
:scream:
:neckbeard:
:tired_face:
:angry:
:rage:
:triumph:
:sleepy:
:yum:
:mask:
:sunglasses:
:dizzy_face:
:imp:
:smiling_imp:
:neutral_face:
:no_mouth:
:innocent:
:alien:
:yellow_heart:
:blue_heart:
:purple_heart:
:heart:
:green_heart:
:broken_heart:
:heartbeat:
:heartpulse:
:two_hearts:
:revolving_hearts:
:cupid:
:sparkling_heart:
:sparkles:
:star:
:star2:

    <!-- tabs:end -->

    Alerts

    <!-- tabs:start -->

    效果

    [!NOTE]
    An alert of type 'note' using global style 'callout'.

    [!TIP]
    An alert of type 'tip' using global style 'callout'.

    [!WARNING]
    An alert of type 'warning' using global style 'callout'.

    [!ATTENTION]
    An alert of type 'attention' using global style 'callout'.

    Markdown
    > [!NOTE]
> An alert of type 'note' using global style 'callout'.

> [!TIP]
> An alert of type 'tip' using global style 'callout'.

> [!WARNING]
> An alert of type 'warning' using global style 'callout'.

> [!ATTENTION]
> An alert of type 'attention' using global style 'callout'.

    <!-- tabs:end -->

    Summary

    <!-- tabs:start -->

    效果

    <details>

    <summary>我的列表(点击打开/折叠)</summary>

    • 123
    • abc

    </details>

    Markdown
    <details>

<summary>我的列表(点击打开/折叠)</summary>

- 123
- abc

</details>

    <!-- tabs:end -->

    前端
    DoubleAm
    10 声望0 粉丝
    « 上一篇
    Docker 命令教学
    下一篇 »
    Git 教学

    引用和评论

    推荐阅读
    头像
    github 项目分享

    DoubleAm阅读 352

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新