Jekyll 使用 Markdown 书写表格内容时巧妙给 table HTML 标签加上 ID 和 Class(纯Markdown不含HTML)

Jekyll 如何使用纯 Markdown 给表格增加 ID 和 Class

如图上图所示,有时候我们需要给我们 Jekyll 博客或者网站中的表格 table 标签增加 ID 或者 Class 自定义 CSS 样式或者添加 JavaScript 实现一些特殊用途(比如点击单元格复制单元格内容,比如表格筛选)。

我们主要分享下在 Jekyll 中使用 Markdown 书写内容时,如何给表格添加 ID 和 Class,使用纯 Markdown,而非 .md 文件中添加 HTML(添加HTML会显得文档混乱、复杂,有时候解析也会有奇怪的问题,比如缩进导致识别为代码片段,两段HTML代码之间的 Markdown 标记不解析等问题)。

其实最重要的还是 Markdown 书写简洁明了,没有 HTML 那么繁琐,阅读源码更为直观。

其实很简单,只需要在表格前面增加一行内容即可,因为实在过于简单一极乐就不细讲了,直接上示例,如下:

在 .md 文件中输入的 Markdown 内容

1
2
3
4
{: #yjl_biaoge.biaoge}
| 商品 | 价格 | 备注 |
| -- | -- | -- |
| 一极乐 | 99999.99 | 特供 |

写法解说:{: }# 后面的内容表示 id="" 的值,如 #yjl 解析后就是 id="yjl",.后面就是 Class 的值,如 .yjl 解析后就是 class="yjl",如果需要id和class连这些即可(中间不需要空格,写法与CSS选择器相似)。

渲染后浏览器中显示的HTML结构(从 Chrome 拷贝)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="table-wrapper">
<table id="yjl_biaoge" class="biaoge">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>一极乐</td>
<td>99999.99</td>
<td>特供</td>
</tr>
</tbody>
</table>
</div>

Relay Tips: 一极乐https://yijile.com/log/491/