周陆军博客

Appearance

On this page

内容来源：https://github.com/zhoulujun/Markdown

主要内容 ​

Markdown是什么？ ​

谁创造了它？ ​

为什么要使用它？ ​

怎么使用？ ​

谁在用？ ​

尝试一下 ​

md 与 mdx

正文 ​

1. Markdown是什么？ ​

Markdown是一种轻量级标记语言，它以纯文本形式(易读、易写、易更改)编写文档，并最终以HTML格式发布。
Markdown也可以理解为将以MARKDOWN语法编写的语言转换成HTML内容的工具。

2. 谁创造了它？ ​

它由Aaron Swartz和John Gruber共同设计，Aaron Swartz就是那位于去年（2013年1月11日）自杀,有着开挂一般人生经历的程序员。维基百科对他的介绍是：软件工程师、作家、政治组织者、互联网活动家、维基百科人。

他有着足以让你跪拜的人生经历：

  • 14岁参与RSS 1.0规格标准的制订。
  • 2004年入读斯坦福，之后退学。
  • 2005年创建Infogami，之后与Reddit合并成为其合伙人。
  • 2010年创立求进会（Demand Progress），积极参与禁止网络盗版法案（SOPA）活动，最终该提案被撤回。
  • 2011年7月19日，因被控从MIT和JSTOR下载480万篇学术论文并以免费形式上传于网络被捕。
  • 2013年1月自杀身亡。

Aaron Swartz

天才都有早逝的归途。

3. 为什么要使用它？ ​

  • 它是易读（看起来舒服）、易写（语法简单）、易更改纯文本。处处体现着极简主义的影子。
  • 兼容HTML，可以转换为HTML格式发布。
  • 跨平台使用。
  • 越来越多的网站支持Markdown。
  • 更方便清晰地组织你的电子邮件。（Markdown-here, Airmail）
  • 摆脱Word（我不是认真的）。

4. 怎么使用？ ​

如果不算扩展，Markdown的语法绝对简单到让你爱不释手。

Markdown语法主要分为如下几大部分： 标题，段落，区块引用，代码区块，强调，列表，分割线，链接，图片，反斜杠 \，符号'`'。

4.1 标题 ​

两种形式：
1）使用=和-标记一级和二级标题。

一级标题
=========
二级标题
---------

效果：

一级标题 ​

二级标题 ​

2）使用#，可表示1-6级标题。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果：

一级标题 ​

二级标题 ​

三级标题 ​

四级标题 ​

五级标题 ​
六级标题 ​

4.2 段落 ​

段落的前后要有空行，所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用两个以上空格加上回车（引用中换行省略回车）。

4.3 区块引用 ​

在段落的每行或者只在第一行使用符号>,还可使用多个嵌套引用，如：

> 区块引用
>> 嵌套引用

效果：

区块引用

嵌套引用

4.4 代码区块 ​

代码区块的建立是在每行加上4个空格或者一个制表符（如同写代码一样）。如
普通段落：

void main()
{
printf("Hello, Markdown.");
}

代码区块：

void main()
{
    printf("Hello, Markdown.");
}

注意:需要和普通段落之间存在空行。

4.5 强调 ​

在强调内容两侧分别加上*或者_，如：

*斜体*，_斜体_
**粗体**，__粗体__

效果：

斜体，斜体
粗体，粗体

4.6 列表 ​

使用·、+、或-标记无序列表，如：

-（+*） 第一项 -（+*） 第二项 - （+*）第三项

注意：标记后面最少有一个_空格_或_制表符_。若不在引用区块中，必须和前方段落之间存在空行。

效果：

  • 第一项
  • 第二项
  • 第三项

有序列表的标记方式是将上述的符号换成数字,并辅以.，如：

1 . 第一项
2 . 第二项
3 . 第三项

效果：

  1. 第一项
  2. 第二项
  3. 第三项

4.7 分割线 ​

分割线最常使用就是三个或以上*，还可以使用-和_。

4.8 链接 ​

链接可以由两种形式生成：行内式和参考式。
行内式：

[younghz的Markdown库](https:😕/github.com/younghz/Markdown "Markdown")。

效果：

younghz的Markdown库。

参考式：

[younghz的Markdown库1][1]
[younghz的Markdown库2][2]
[1]:https:😕/github.com/younghz/Markdown "Markdown"
[2]:https:😕/github.com/younghz/Markdown "Markdown"

效果：

younghz的Markdown库1
younghz的Markdown库2

注意：上述的[1]:https:://github.com/younghz/Markdown "Markdown"不出现在区块中。

4.9 图片 ​

添加图片的形式和链接相似，只需在链接的基础上前方加一个！。

4.10 反斜杠\ ​

相当于反转义作用。使符号成为普通符号。

4.11 符号'`' ​

起到标记作用。如：

`ctrl+a`

效果：

ctrl+a

5. 谁在用？ ​

Markdown的使用者：

  • GitHub
  • 简书
  • Stack Overflow
  • Apollo
  • Moodle
  • Reddit
  • 等等

6. 尝试一下 ​

  • Chrome下的插件诸如stackedit与markdown-here等非常方便，也不用担心平台受限。
  • 在线的dillinger.io评价也不错
  • Windowns下的MarkdownPad也用过，不过免费版的体验不是很好。
  • Mac下的Mou是国人贡献的，口碑很好。
  • Linux下的ReText不错。

当然，最终境界永远都是笔下是语法，心中格式化 😃。

注意：不同的Markdown解释器或工具对相应语法（扩展语法）的解释效果不尽相同，具体可参见工具的使用说明。 虽然有人想出面搞一个所谓的标准化的Markdown，[没想到还惹怒了健在的创始人John Gruber] (http://blog.codinghorror.com/standard-markdown-is-now-common-markdown/)。

以上基本是所有traditonal markdown的语法。

md与mdx ​

markdown非常好用，但是还有更用，基于markdown扩展的mdx

mdx ​

MDX -- 支持 React JSX 的 Markdown 超集

  • JSX、DSL 虽然能够精准把控，但是写起来太累了，自己要写很多胶水
  • Markdown 虽然书写自由，但是布局、功能都难以精确控制

JSX in Markdown for ambitious projects 为雄心勃勃的项目提供的在 Markdown 中书写 JSX 的方式

webpack的官方文档就是 mdx 写的https://github.com/webpack/webpack.js.org 如何使用,具体查看：https://www.mdxjs.cn/getting-started/react-static 具体查看：MDX -- 支持 React JSX 的 Markdown 超集

vitepress不支持mdx ​

尤大大回复如下： Feel free to work on a plugin to use MDX with Vite - we can transfer it to vitejs organization once it's stable.

That said, MDX doesn't make sense for VitePress.

  • VitePress is designed to be Vue only - this is required for the navigation structure, theming and advanced optimizations.

  • VitePress already supports treating plain markdown files as Vue SFCs, which allows using all Vue SFC features inside normal markdown, and has much better optimization. MDX transpiles markdown to JSX render functions, which is terribly inefficient (double payload cost + unnecessary hydration of static content) unless there are optimizations I am unaware of. In comparison, VitePress markdown processing with Vue 3 automatically strips all static parts of your markdown from the compiled JavaScript so there is no unnecessary JavaScript or hydration cost. I don't mean to belittle their work - it's useful for React users for sure, but MDX trying to support Vue is... a bit pointless.

  • 所以，比如我的 https://www.zhoulujun.co/ 很多东西就不想弄了，尽管有：vite-plugin-mdx 插件支持，但是还懒得动了

其它： ​

列表的使用(非traditonal markdown)：

用|表示表格纵向边界，表头和表内容用-隔开，并可用:进行对齐设置，两边都有:则表示居中，若不加:则默认左对齐。

代码库链接
MarkDownhttps://github.com/younghz/Markdown
MarkDownCopyhttps://github.com/younghz/Markdown

关于其它扩展语法可参见具体工具的使用说明。