常用的 Markdown 语法

Fan Hongtao
markdown
jekyll markdown

常用的 Markdown 语法。更新时间：2019-01-02

1 字符特效

1.1 通过特殊符号实现

功能 效果 代码
加粗显示 加粗显示 **加粗显示**
加粗显示 斜体显示 _斜体显示_
显示删除线 删除文字 ~~删除文字~~
上标 （GitHub不支持） 2^10^ = 1024 2^10^ = 1024
下标 （GitHub不支持） H~2~O H~2~O

1.2 通过HTML实现

功能 效果 代码
显示按键 Ctrl+C <kbd>Ctrl+C</kbd>
显示删除线 删除文字 <del>删除文字</del>
上标 210 = 1024 2<sup>10</sup> = 1024
下标 H2O H<sub>2</sub>O

1.3 通过插件实现

下面这些功能是通过插件来实现的。

功能 效果 代码
Font Awesome Icon and <i class="fa fa-camera-retro"></i> and
<i class="fa fa-home fa-fw" aria-hidden="true"></i>
显示Emoji :+1: :+1:

  • HTML 模版的 <Head> 中需要包含 Font Awesome 对应的 CSS。

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.2.0/css/font-awesome.min.css">

  • 为了显示 Emoji，需要在 _config 文件中指定插件。

    gems:
    - jemoji

1.4 其他

1.4.1 高亮显示代码

<html>
   <head/>
</html>

对应的代码

```html
<html>
   <head/>
</html>
```

1.4.2 注释

Note:

  • note 1
  • note 2.

对应的代码

> **Note:**
> - note 1
> - note 2.

1.4.3 代办事宜

  • links, formatting, and tags are supported
  • list syntax is required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

对应代码

- [x] [links](), **formatting**, and <del>tags</del> are supported
- [x] list syntax is required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

2 引用

2.1 Footnotes

You can create footnotes like this1.

You can create footnotes like this[^footnote].

  [^footnote]: Here is the *text* of the **footnote**.

2.2 引用其它页面

AHK Group

对应代码

 [AHK Group]({% post_url  2011-07-03-autohotkey %})

参考： Permalinks

2.3 定义地址并引用

Available lexers

对应代码

[Available lexers][lexers]

[lexers]: http://pygments.org/docs/lexers/

2.4 Abbreviation

The HTML specification is maintained by the W3C.

*

将鼠标放在 W3C 上查看效果。对应代码

The HTML specification
is maintained by the W3C.

*[W3C]:  World Wide Web Consortium

3 MathJax

You can render LaTeX mathematical expressions using MathJax, as on math.stackexchange.com:

The Gamma function satisfying $ \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N $ is via the Euler integral

\[\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.\]

对应代码

The *Gamma function* satisfying $ \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N $ is via the Euler integral

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

Note: HTML 模版的 <Head> 中需要包含 MathJax 对应的 JS 文件。

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

4 自己写的扩展

4.1 动态修改表格

在 assets/blog-theme/js 目录下的 index.js 文件中，使用 JQuery 技术，对 Markdown 的表格进行了扩展。

  1. 支持在 head 中指定表格的 CSS class 和 标题(caption)。
  2. 支持为单元格指定 CSS class 和 html 动态内容。

下面先展示一个原本 Markdown 的表格：

姓名 性别 年龄 电话
张三 男 29 12345678
李四 男 32 010-12345
Mary 女 18 020-12345

使用动态扩展功能，为该表格设置一些格式：

addrlist&&2019新年晚会通讯录&&姓名 性别 年龄 电话
张三 男 29 12345678
special&&李四 男 32 010-12345
foreign&&Mary 女 18 020-12345

扩展表格对应的代码：

<style>
table.addrlist caption { text-align: center; color: #303030; }
table.addrlist, table.addrlist th, table.addrlist td	{ border: 1px solid #303030; }
table.addrlist td.special { background: #f0ff80; }
table.addrlist td.foreign { background: #80ff80; }
</style>

| addrlist&&2019新年晚会通讯录&&姓名 | 性别 | 年龄 | 电话 |
| --- | --- | --- | --- |
| 张三 | 男 | 29 | 12345678 |
| special&&李四 | 男 | 32 | 010-12345 |
| foreign&&Mary | 女 | 18 | 020-12345 |

注意：属性通常应该是写在 css 文件中，这里只是示例。

参考文档：

  1. Here is the text of the footnote. ↩

声明: 本文采用 CC BY-NC-SA 3.0 协议进行授权，转载请注明出处。