写博客必看 | 新博主必看 ｜ 学 Markdown 少走十年弯路

给博客主题写几个默认文章 = =

引言

  1. Markdown 是什么？

    • 一个轻量的标记语言，只需要按照约定格式编写文本，就能够被工具渲染成样式化的页面；
    • 因简单易学易编写，被广泛用来编写文章、文档等；
    • 比如我的博客里的每篇文章都是 Markdown 编写的；
    • Markdown 文件后缀为 .md。

  2. 为什么博客的 Markdown 文件能在浏览器中显示？

    • .md 文件被博客框架编译为 .html 文件
    • 所以下面语法中也会掺杂 HTML 元素用于编写文章。

语法

虽然 Markdown 是一门”语言”，但是要学习的语法特别少，键盘多打几次就记住了。

因为这篇文章用于指导编写博客，下面语法连带着 HTML 输出格式讲解，可以自己写样式美化。

标题

语法格式：# 标题内容，# 和标题之间要有空格，几个 # 代表几级标题。

# 一级标题


## 二级标题


### 三级标题


#### 四级标题


##### 五级标题


###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
<!-- 对应 HTML -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落

语法格式：空白行分隔，也就是段落之间要空一行。

这是一个段落，不管写多少字都是一个段落


这是第二个段落，跟上一个段落之间有空行

这是一个段落，不管写多少字都是一个段落

这是第二个段落，跟上一个段落之间有空行

<!-- 对应 HTML，HTML 中是没有换行的 -->
<p>这是一个段落，不管写多少字都是一个段落</p>
<p>这是第二个段落，跟上一个段落之间有空行</p>

换行

语法格式：<br>，这个属于 HTML 标签。

这是一个段落的第一行，<br>这是段落的第二行

这是一个段落的第一行，
这是段落的第二行

<!-- 对应 HTML -->
<p>
  这是一个段落的第一行，
  <br>
  这是段落的第二行
</p>

文本样式

  • *倾斜文本*/_倾斜文本_ -> 倾斜文本
  • **加粗文本** -> 加粗文本
  • ~~删除线文本~~ -> 删除线文本
  • <mark>高亮文本</mark> -> 高亮文本

符号和文本之间不可以加空格，如 ** 加粗文本 ** ❌，**加粗文本** ✅

<!-- 对应 HTML -->
<p>
  <em>倾斜文本</em>
  <em>倾斜文本</em>
  <strong>加粗文本</strong>
  <del>删除线文本</del>
  <mark>高亮文本</mark>
</p>

列表

符号和内容之间同样需要空格，- 内容，1. 内容

  • 无序列表：
- 时间
- 地点
- 人物
  • 有序列表：
1. 首先
2. 然后
3. 最后
  • 时间
  • 地点
  • 人物
  1. 首先
  2. 然后
  3. 最后
<!-- 对应 HTML -->
<!-- 无序列表 -->
<ul>
  <li>时间</li>
  <li>地点</li>
  <li>人物</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>首先</li>
  <li>然后</li>
  <li>最后</li>
</ol>

引用

> 内容，可与其他格式进行嵌套，下面会演示

> 这是一个段落
>
> 这也是一个段落

这是一个段落

这也是一个段落

<!-- 对应 HTML -->
<blockquote>
  <p>这是一个段落</p>
  <p>这也是一个段落</p>
</blockquote>

链接

注意都是英文括号

  • [跳转文本](链接)
  • <链接>
[Dogxi 的狗窝](https://blog.dogxi.me)


[主页](https://dogxi.me)


<https://blog.dogxi.me>

Dogxi 的狗窝

Dogxi 的主页

https://blog.dogxi.me

<!-- 对应 HTML -->
<a href="https://blog.dogxi.me">Dogxi 的狗窝</a>
<a href="https://dogxi.me" target="_blank" rel="noopener">Dogxi 的主页</a>
<a href="https://blog.dogxi.me">https://blog.dogxi.me</a>

图片

  • ![标识](图片链接)
  • <img> 标签，HTML 标签，详见 MDN
![狗头](https://avatars.githubusercontent.com/u/106546046?v=4&size=256)


<!-- img 标签可以控制大小等样式 -->
<img src="https://avatars.githubusercontent.com/u/106546046?v=4" alt="狗头" width="300">

狗头

狗头 
<!-- 对应 HTML -->
<img
  src="https://avatars.githubusercontent.com/u/106546046?v=4&amp;size=256"
  alt="狗头"
/>
<img src="https://avatars.githubusercontent.com/u/106546046?v=4" width="100" />

代码

语法格式：反引号，就是 ` 这个，键盘数字 1 左边按钮 `

  • 行内代码，一对反引号 -> const a = 1

    <!-- 对应 HTML -->
    <code>const a = 1</code>

  • 代码块，三个``` 加语言简写，见下方示例

    ```js
    let a = 1
    ```
    

    ```python
    print("Hello, World!")
    ```
    

    ```json
    {
      "name": "Dogxi",
      "age": 19
    }
    ```

    渲染结果：

    let a = 1
    print("Hello, World!")
    {
      "name": "Dogxi",
      "age": 19
    }

    下面为代码块大致结构，如果要看具体的可以 F12 选中元素查看。

    <!-- 对应 HTML -->
    <pre>
      <code>
        <!-- p 或是 div 里面是 span 这个渲染情况不同 -->
      </code>
    </pre>

分割线

语法格式：---/***，单独占一行

⬇️ 下面这一条白线

<!-- 对应 HTML -->
<hr>

表格

使用 - 表示标题， | 表示列， : 表示对齐方式

| 时间 |     安排 |
| :--- | -------: |
| 7:30 |     起床 |
| 7:50 |     早饭 |
| 8:00 | 我上早八 |
时间安排
7:30起床
7:50早饭
8:00我上早八
<!-- 对应 HTML -->
<table>
  <thead>
    <tr>
      <th align="left">时间</th>
      <th align="right">安排</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="left">7:30</td>
      <td align="right">起床</td>
    </tr>
    <tr>
      <td align="left">7:50</td>
      <td align="right">早饭</td>
    </tr>
    <tr>
      <td align="left">8:00</td>
      <td align="right">我上早八</td>
    </tr>
  </tbody>
</table>

其他

  1. 还有一些扩展的，如：

    • 下标 <sub>1</sub> -> x1

    • 上标 <sup>2</sup> -> x2

    • 键盘按键 <kbd>Esc</kbd> -> Esc

    • 缩写 <abbr>HTML</abbr> -> HTML

    • 任务清单：

      <!-- x 表示完成 -->
      

      - [x] 吃早饭
      - [ ] 打游戏
      - [ ] 早睡
      • 吃早饭
      • 打游戏
      • 早睡

    • 脚注：

      [^1] 要和 [^1]: 注解内容 成对出现

      这是脚注[^1]，点击会跳转到底部
      

      [^1]: 这是一个脚注

      这是脚注1，点击会跳转到底部

  2. 很多 Markdown 语法都可以进行嵌套，只需要组合或 tab 一下或两下就可以。

    <!-- 列表嵌套 -->
    

    1. 前端
       - React
       - Vue
       - Svelte
    2. 后端
       1. Golang
       2. Java
       3. Python
    3. 人工智能
    

    <!-- 引用嵌套 -->
    

    > 你好
    >
    > > 你好
    >
    > - 你好
    1. 前端
      • React
      • Vue
      • Svelte
    2. 后端
      1. Golang
      2. Java
      3. Python
    3. 人工智能

    你好

    你好

    • 你好

  3. Markdown 中可以任意嵌入 HTML 标签，实现丰富样式。

    <span style="color:red">红红火火</span>

    红红火火

参考资源

Markdown Guide

Markdown 教程

Footnotes

  1. 这是一个脚注 ↩