当我们有一些知识或内容想要纪录下来的时候，有许多纪录的形式可以选择：我可以用原子笔将内容写在活页纸上、我可以用 iPad 打开 GoodNotes 然后用 Apple Pencil 写在上面。 如果觉得用手写太慢、手很痠的话，我也可以用电脑建立一个 文字文件，然后用记事本程序把要纪录的内容打在里面。.txt

但是，很快我们会发现一个问题，记事本只能纪录完全单纯的文字内容，这对我们纪录内容的需求而言是非常不便利的，为什么呢？ 在一个笔记内容中，我们可能会需要对内容进行层次的拆分，就好像小说有「第一集」、「第二集」 ... 然后每一集里面又有「第一章」、「第二章」 ... 然后每一章里面又有「第一段」、「第二段」...

对于《一本小说》的内容，可以被这样进行层次的分级

这个「对内容进行层次的分级」几乎可以被套用在所有内容的类型上，比如说今天你想纪录的是学校上课的笔记，那么笔记的内容就可以根据课本的层次分成「第一课」、「第二课」... 然后每一课下面又有 “第一个概念》、《第二个概念”... 为了在我们的笔记中体现出这样的一个分级概念，我们需要用除了纯文字以外的其他表达方式来记录笔记。

Markdown 语法

想要在笔记中建立层次关系，最简单的方法就是藉由各种不同层级的「标题」来区分内容，例如我们想要写一个 React 学习笔记，我们就可以用 Markdown 语法来写出他的层次关系：

# React 學習筆記 這個 markdown 筆記記錄了我學習 React 的筆記 ... ## 第一章：認識 JSX 語法 首先我們要先理解 React 所使用的 JSX 語法 ... ### 為什麼需要 JSX 語法？ 因為 ... ### 如何在 JSX 語法實現條件渲染？ 只要 ... ## 第二章：將畫面切分為組件 React 將一個複雜的頁面切分為許多小組件 ... ### 組件的狀態 組件中可以用 ... ### 組件間的資料傳遞 如果我們要傳遞資料 ... ## 第 N 章 ...

如果我们按照上面的方式把内容记录下来，是不是就可以呈现出内容的层次关系了呢？ 更厉害的是，我们还可以直接把这份笔记丢到能够渲染 Markdown 语法的网页或软件中，让他帮我们渲染成漂亮的笔记：

Markdown 语法可以被很多程序拿来渲染，也可以用 VSCode 的扩展功能即时预览

除了标题外，Markdown 语法也可以插入图片：


或是把文字变成粗体、斜体，来强调你笔记中的某个内容：

**粗體** 、 *斜體*

当然，基本的 链接、 列表、 等等，都有自己的语法可以方便的使用！ 如果你迫不及待准备开始体验，可以到 这个网站查看完整的 Markdown 语法。程式碼區塊

所见即所得

听完上面的介绍，大家应该可以体会 Markdown 的方便之处，它让我们用各种简单的符号，把纯文本的笔记变成了一个井然有序、图文并茂的内容，但我想对没接触过 Markdown 语法的新同学可能还是会有一点不适应吧！

一个很好的例子：

在 Notion 中使用 Markdown 语法

我们不仅可以在Notion中直接使用Markdown的语法，他还可以瞬间渲染成对应的样式，我相信这个功能应该让许多没接触过Markdown语法的新同学也能够迈出第一步吧！ 不要再用 Microsoft Word 或 Google Docs 了啦 XD

MDX 语法

接下来，我们来聊点进阶的话题吧！ 相信如果你已经是一个 Markdown 用户了，那你对上面介绍的基础语法已经能够像呼吸般运用自如。 事实上，在软件开发领域，Markdown 已经是个不可或缺的技能，因为不管是上面提到的学习笔记也好，程序的说明文档、API 接口文件 ... 许多地方都会用 Markdown 来作为内容存储的格式。

但很快的，大家发现到这个方便的语法仍然还有些不够用的地方，比如说如果我想在文章中插入一个像这样的小提示区块：

note:你好，我是一个小提示 XD

或是一个像这样的输入命令块 ：sudo rm -r ./*

甚至是来一个和读者互动的小测验区块？！小测验你知道下列哪个不是 Javascript Runtime 吗？

Node

Deno

V8

Rust

原本的 Markdown 语法是做不到这些内容的，但如果我们既想要用 Markdown 方便的语法来储存内容，又想要在文章内使用这些酷炫的组件，怎么办呢？

MDX 语法，让我们在 Markdown 里面使用 JSX 语法

MDX 是一个由开源社群发起的项目，他的目标非常简单 - 让 Markdown 语法中可以使用 JSX 语法，如果你是 React 开发者，相信你对 JSX 并不陌生。 如果你不知道什么是 JSX 的话，我用一个简单的例子给你看看我是怎么打出文章上方的「小提示」的：

但很快的，大家發現到這個方便的語法仍然還有些不夠用的地方，比如說如果我想在文章中插入一個像這樣的小提示區塊： <Note>你好，我是一個小提示 XD</Note>

你会发现，其实我的那个小提示是用 这个组件写出来的！ 而这个组件其实是我事先在外部定义好的一个 React 组件，所以他可以自动解析并替换内容上来。<Note />

既然是用 JSX 语法写的 React 组件，那么传递 props 也是没有问题的：

甚至是來一個和讀者互動的小測驗區塊？！ <SelectQuestion options={[Node, Deno, V8, Rust]} questionName="小測驗" question="你知道下列哪個不是 Javascript Runtime 嗎？" />

想不到吧，原来上面的小测验区块在文章里也是用这么清楚的方式写下来的！

结语

今天这篇文章的前半部分，主要给完全没有使用过（甚至完全没听过）Markdown 语法的新同学一个简短的介绍，让大家认识到原来有这样一个方便的语法，可以帮助我们快速把要整理的内容写成一篇井然有序、图文并茂的笔记。

如果你已经顺利学会的话，恭喜你，可以把电脑上的 Word 给删掉啦！ （？ ）

不管你是什么职业、或是正在就学的学生，Markdown 语法都是一个非常实用，能够帮助我们整理自己的内容，甚至主动产出内容（比如说像我现在写部落格文章）的一个媒介，学会这个技能对你一定有帮助的！

如果你已经听过或熟练使用 Markdown，那希望后半部分介绍的 MDX 语法可以让你对它有一个全新的理解，藉由这个开源社群维护的项目，我们可以用 Markdown + JSX 的方式，在产出内容的同时往里面加入很多丰富、功能强大的组件，很多开源框架、套件或平台服务的文档都是用 MDX 写的哦！