Hexo中插入HTML表格出现过多空白的解决办法

早先我写博客的时候,就发现Hexo中插入HTML表格会留出大量空白。虽然markdown语法也是可以生成表格的,但是写的时候特别麻烦,所以我一直是直接插入的HTML表格的,仅仅是因为简单高效。当时,我刚搭建好这个博客,所以对hexo并不是很了解。我当时以为这只是在我个人markdown语法用的不对或者是编辑器造成的,造成了表格出现大量空白,此后也并没有解决这件事,遇到需要表格的文章时,都是直接插入图片代替的,大家在一些文章中可以看到表格基本都是用图片代替了。最近我又写博客的时候,又出现了这个问题,才发现这也许是hexo的一个bug。

下面开始分析并解决这个问题。

我用下面的HTML代码做一个表格。

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>冰羽</td>
<td></td>
</tr>
</table>

Tips: 出现的大量空白是为了演示使用,这里会出现一个表格。










姓名性别
冰羽

下面是markdown文件的预览:

可以看到在atom编辑器中预览的时候,并没有出现大量的空白。这说明并不是编辑器的问题。而我用markdown语法写出的内容也没有任何涉及到表格的,也绝对不是markdown语法的问题。

我们可以在浏览器中右击“查看源代码”,找到这个表格会看到,多出很多<br>标签来。html中<br>标签用于换行。

我后来在hexo的Issues中也发现了其他人出现了这个问题。然后开始各种找解决办法,下面给出两种解决办法。

解决方法1

将代码改为紧凑模式,修改代码如下

1
<table><tr><th>姓名</th><th>性别</th></tr><tr><td>冰羽</td><td></td></tr></table>

也就是说代码标签之间不要留白,全部改为紧贴着的。

Tips:这里会出现一个表格,没有大量空白。

姓名性别
冰羽

我们还可以利用这个Table Generator在线工具来编辑表格,提供了html表格和markdown表格来生成用于hexo的表格。

解决方法2(推荐)

1
2
3
{% raw %}
html tags & content
{% endraw %}

我们可以利用上面的格式来编写表格,我个人认为这种最为简单便捷。
我们只需要把代码修改为以下这样即可。

1
2
3
4
5
6
7
8
9
10
11
12
{% raw %}  
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>冰羽</td>
<td></td>
</tr>
</table>
{% endraw %}
姓名性别
冰羽

生成的表格同样不会出现大量空白。

本文作者:冰羽
本文地址: https://bingyublog.com/2018/08/20/hexo中插入HTML表格出现过多空白的解决办法/
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

赞赏一杯咖啡
0%