第 2 章 Markdown 试水

一提到办公,从小被要求学 Word, Excel, 和 PowerPoint 的大多数人也就是能想到这三种工具了。放到十年前,也许没什么问题,但是现在我们并非离开它们就活不下去了。而且,对编程来说,这几样工具并不是最合适的。

我们先来看处理文字的一项利器: Markdown.

Markdown 相比 Word 有什么好处呢?第一,非常简单,5分钟就能学会。第二,Markdown 就是为网页而生的,应用型极强。配合 Rmarkdown 和 Pandoc 等工具,Markdown 可以非常便捷地在 HTML 和 PDF 之间转化。Markdown 的文件格式缩写是 md

以下两篇文章非常好地总结了 Markdown 的基本语法:

  1. Markdown 是个啥, 来自统计之都,作者是 谢益辉

  2. Markdown 基本语法, 作者是 younghz

如果你不介意看英文资料的话,

Markdown Cheatsheet,作者是 adam-p

2.1 Markdown 编辑器

你可以用上一节提到的文本编辑器来写 Markdown 文件,缺点是你看不到实时的结果。如果你想看到实时的效果,我推荐用 Typora, 开源、轻巧、免费、主题多样,而且可以非常方便得转成 HTML 和 PDF。你也可以在 stackedit.io 在线写 Markdown 文件。如果你平常用 Markdown 比较多,推荐用 Typora 在本地写。不过我自己很少用 Typora, 实时预览的效果的确好,但是当你想修改内容的时候,你会发现很不方便。

想看一下效果的话,你可以看看我用 Typora 写的 Markdown 文本,转成 HTMLPDF 后的样子。

2.2 Markdown 语法讲解

2.2.1 标题

如下所示,第几级标题就在前面加几个 # 号。

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

2.2.2 粗体、斜体

- **粗体**
- *斜体*
- ***粗斜体***
- ~~删除~~
  • 粗体
  • 斜体
  • 粗斜体
  • 删除

2.2.3 列表

- Water
   列表内想有缩进内容,但是不想让内容前有列表标记的话,只需要在这一行空三格。
- Water
- Water
  1. Water
  2. Water
  3. Water
- Water
  - Water
  - Water
  - Water
    1. Water
    2. Water
  • Water

    列表内想有缩进内容,但是不想让内容前有列表标记的话,只需要在这一行空三格。

  • Water

  • Water

    1. Water
    2. Water
    3. Water
  • Water

    • Water
    • Water
    • Water
      1. Water
      2. Water

如果你想让列表内容空格大一些,只需要在每行之间加入空行就好。比如:

- Water

- Water

- Water
  • Water

  • Water

  • Water

2.2.4 表格

| Water | *Water* | Water |
|---------|---------|---------|
| Water | `Water` | Water |
| **Water** | Water^[Water] | Water |
| Water | Water | Water |
Water Water Water
Water Water Water
Water Water 1 Water
Water Water Water

如果你不会自己打出 Markdown 表格,可以试试这个傻瓜式 Markdown 表格生成器

2.2.5 引语

> 知之为知之,不知为不知,是知也 ^[你知道最后一个「知」怎么念吗?]。 — 孔子

知之为知之,不知为不知,是知也 2。 — 孔子

2.2.6 链接

这是[一个链接](https://github.com/).

这是一个链接,

2.2.7 插入图片

![GitHub](https://www.analyticsvidhya.com/wp-content/uploads/2015/07/github_logo.png)

GitHub

有同学会问, [] 为什么还要加内容呢?直接在 () 加入链接不就好了吗?不完全是。我一开始也不理解为什么还需要 []。现在,我的理解是,[] 里的内容是对要加入图片的解释。什么时候会用到呢?两种情况:

  1. 你输入的图片链接失效。这个其实挺常见的。除非你是本地图片,你自己可以掌控。如果像上面一样,是用的网上的链接,那这个链接随时可能失效。失效后别人就无法知道你插入的图片内容是什么。如果你在 [] 有图说的话,浏览器会在图片位置显示你的图说;

  2. 谢益辉他的博客 中提到 3[] 里面的内容可以被专用浏览器读给盲人用户。

2.2.8 代码

代码可以分成两种。一种是代码标记,比如:`Print("Nihao")`

代码可以分成两种。一种是代码标记,比如:Print("Nihao")

另一种是「代码块」:

// JavaScript 代码:
water = [1, 2, 3, 4, 5]
let a = 0;
for (let i = 0; i < 5; i++){
    if (water[i] > 3) {
        a += 1
    }
}
// 请问 a 的值现在是多少呢?

我在这里没法展示源代码,只能像上面一样展示结果。源代码可以参考 这里

2.2.9 注释

注释只需要在需要注释文字的后面加 ^[这里输入注释文字]。这个上面其实已经有例子了。不过我再举一个:

你好吗 ^[在中国常用的问候语]

你好吗 4

2.2.10 HTML

最重要的一点,Markdown 可以识别 HTML 代码。也就是说,你把 Markdown 当成 HTML 来写也可以。

比如,插入图片时,Markdown 本身的 ![]() 是不支持你加入图片说明文字的 5。这时候你就可以直接用原生的 HTML 代码:

<figure>
  <img src="https://www.analyticsvidhya.com/wp-content/uploads/2015/07/github_logo.png" alt="GitHub"/>
  <figcaption>这里添加图片说明文字</figcaption>
</figure>

以上代码来自 https://stackoverflow.com/a/19360305

2.2.11 分隔线

*** 
  
或者 

---

或者


2.3 Markdown 练习

请用 Markdown 写出如下文稿。需要注意的是:

  1. 标题前、脚注上的序号不用管
  2. 个人照片下的文字「王大锤的个人照片」在最后结果中有没有无所谓

你可以在 https://stackedit.io/app# 在线制作,也可以使用 Typora 在本地制作。不过, Typora 的脚注 比较麻烦一些。

2.3.1 王大锤简历

以上是一级标题,以下全都是二级标题。

免责声明:以下内容部分参考百度百科 王大锤 这一次词条解释。

2.3.1.1 基本信息

  • 身高:170
  • 体重:60 公斤 6
  • 性别: 7
  • 出生日期:2000年0月0日
  • 出演作品
    1. 《万万没想到》
    2. 《暴走大事件》

2.3.1.2 个人照片

王大锤个人照片

图片出处

2.3.1.3 作品简介

角色 形象 元素
刘备 自恋 搞笑
月老童子 幻想 职场
富二代 眼高手低 感情

2.3.1.4 常用语

万万没想到 — 王大锤


  1. Water↩︎

  2. 你知道最后一个「知」怎么念吗?↩︎

  3. 抱歉,我忘记具体哪一篇了↩︎

  4. 在中国常用的问候语↩︎

  5. 你现在看到的内容是 bookdown 渲染出来的效果,所以上面 那副图底下你能看到[] 里面的内容成了文字说明。↩︎

  6. 注意:「公斤」是斜体。↩︎

  7. 注意:「男」是粗体。↩︎