β

修改Hexo博客里面table的样式

egmkang's blog 942 阅读

markdown语法可以直接写表格, 非常简单

| col1 | col2 |
|:----:|:----:|
| 1 | 2 |
| 3 | 4 |

样式如下:

col1 col2
1 2
3 4

但是hexo提供的light主题, 没有为表格编写样式, 导致表格的样式不对, 只是代码生成了.
找到 themes/light/source/css/_partial/syntax.styl 这个文件, 在 .entry 下增加table的样式:

.entry
table
border 1px solid black
border-collapse collapse
th
border 1px solid black
border-collapse collapse
td
border 1px solid black
border-collapse collapse
padding 1px 8px 1px

具体可以自己配置一下, 我不是前端开发者, 表示表格只要有一个框框就可以用了.

hexo生成的代码段, 也是用table标签框起来的, 所以还需要找到 figure.highlight 下的table字段,然后修改:

table
margin-top 1
border-spacing 1
border 0px
th
border 0px solid black
td
border 0px solid black

否则代码周围会有一个方框, 异常不美观.

markdown语法可以直接写表格, 非常简单

1

作者:egmkang's blog
原文地址:修改Hexo博客里面table的样式, 感谢原作者分享。

发表评论