这几天发现在Bootstrap下面使用带行号的语法高亮时，最后的结果有两点奇怪的地方，一个是最上面有一根线，另外一个就是鼠标经过时外框会反白。
最后发现，这是Bootstrap里面表格的特点造成的。在Bootstrap里面表格默认是只有横线的，而带行号的语法高亮实际上是一个一横两列的表格，那么就会在上面有一根横线。而且Bootstrap里面表格当鼠标移动经过时会反白高亮，这样就造成带行号的语法高亮也有这样的现象。如下面这个表格：
| 名称 | 城市 |
|---|---|
| Tanmay | Bangalore |
| Sachin | Mumbai |
测试发现设置border: 2px solid transparent之后，Bootstrap的表格的横线会消失，然后把反白高亮的颜色调成和表格的背景色一样，这样上面两个问题就消失了。
还有一个宽度的问题，Bootstrap的表格宽度默认设为100%，在语法高亮时会导致行号宽度过大，需要把宽度设回自动。
在css/syntax.css加上下面的code可以解决上面说的问题。
.highlight .table {
width: auto;
border: 2px solid transparent;
margin-bottom: 0px;
}
.highlight .table > tbody > tr:hover {
background-color: #202020;/*调成表格默认背景色*/
}
下面这个是修改之前的语法高亮：
1
2
3
4
5
6
7
void main()
{
int i = 0;
for(i = 0; i < 9; i++){
print("i = %d\n", i);
}
}
对比修改之后：
1
2
3
4
5
6
7
void main()
{
int i = 0;
for(i = 0; i < 9; i++){
print("i = %d\n", i);
}
}