egmkang 服务端开发工程师

修改Hexo博客里面table的样式

2014-05-29

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

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


Comments