ZucchinY

默认表格

Markdown 是支持表格的,但是对于表格的支持,只限于简单的表格,复杂的内容并不多。

1
2
3
4
| 目录 | 内容 |
|------+------|
| xxx | xxxx |
| sxe | afda |
目录 内容
xxx xxxx
sxe afda

复杂表格

Markdown 想要支持复杂一些的表格的话,可以支持使用 JavaScript 中的 table 语法,如果是使用的 markdown-it 进行渲染,也可以采用第二种方法编写。

通用示例

  • 水平单元格的合并:基于 colspan 属性,即使一个单元格占多列的空间

  • 纵向单元格的合并:基于 rowspan 属性,即使一个单元格占多行的空间

    1
    2
    3
    4
    //居中
    style="text-align:center;"
    //右对齐
    style="text-align:right;"
  • 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table>
<tr>
<th>目录1</th>
<th>目录2</th>
<th>目录3</th>
</tr>
<tr>
<td rowspan="2">内容1</td>
<td>xxx</td>
<td>ssss</td>
<tr>
<td>sfas</td>
<td>atadfs</td>
</tr>
</tr>
<tr>
<td>测试</td>
<td colspan="2" style="text-align:right;">水平合并</td>
</tr>
<tr>
<td rowspan="2">xxx</td>
<td>afda</td>
<td>afadf</td>
<tr>
<td colspan="3" style="text-align: center;">afadfa</td>
</tr>
</tr>
</table>
目录1 目录2 目录3
内容1 xxx ssss
sfas atadfs
测试 水平合并然后右对齐
xxx afda afadf
水平合并然后居中

markdown-it-multimd-table

将 hexo 的渲染引擎从 marked 修改到 markdown-it 的方法见 Hexo 中使用 emoji 和 tasks

这里需要增加安装多维表格插件:

1
npm i -S markdown-it-multimd-table

然后将对应的配置放到 _config.yml 文件中。

1
2
3
plugins:
...
- markdown-it-multimd-table
  • 示例
1
2
3
4
5
6
7
8
9
10
Stage | Direct Products | ATP Yields
----: | --------------: | ---------:
Glycolysis | 2 ATP ||
^^ | 2 NADH | 3--5 ATP |
Pyruvaye oxidation | 2 NADH | 5 ATP |
Citric acid cycle | 2 ATP ||
^^ | 6 NADH | 15 ATP |
^^ | 2 FADH2 | 3 ATP |
**30--32** ATP |||
[Net ATP yields per hexose]
Net ATP yields per hexose
Stage Direct Products ATP Yields
Glycolysis 2 ATP
^^ 2 NADH 3–5 ATP
Pyruvaye oxidation 2 NADH 5 ATP
Citric acid cycle 2 ATP
^^ 6 NADH 15 ATP
^^ 2 FADH2 3 ATP
30–32 ATP

测试了一下,目前不支持 无表头表格多行合并 ,只支持多列合并。