pygments + bootstrap: 用深色背景高亮 shell 代码

Question

我在我的小 static blog generator 中通过 pygments 和 markdown 呈现代码片段，我在使用 pygments 和 twitter bootstrap.

时遇到问题

这是我的问题：

我希望使用 dark-solarized theme for pygments 突出显示代码片段。我下载到：

/lib/python2.7/site-packages/pygments/styles

测试按预期工作：

$ pygmentize -l python -f html -O full,style=solarized -o ./snippet.html ./test.sh

这会生成一个 html 文件，它看起来和我预期的一样：

万岁！颜料工作！现在，这就是代码在我的博客中突出显示的方式 post:

真可惜……这看起来很糟糕……

如果我注释掉：

<link href="/media/css/bootstrap.min.css" rel="stylesheet">

语法突出显示按预期工作：

所以，我的问题是：如何让 twitter-bootstrap 与 pygments 一起玩？

Answer 1

我想通了，想了想这题怎么写，要不要写。

为了其他人的利益，解决方案是定义 pre 元素的颜色：

pre { line-height: 125%; color: #93a1a1;}

这现在可以正常工作了。

Answer 2

Override Bootstrap CSS for Pygments Syntax Highlighting:

/* fix bootstrap conflict with Pygments */
.codehilite pre { white-space: pre;
                  border-radius: inherit;
                  display: inherit;
                  background-color: inherit;
                  border: inherit;
                  color: inherit;
                }

/* fix conflict with other sytlesheets */
.codehilite .m { margin: inherit; }

pygments + bootstrap: 用深色背景高亮 shell 代码

pygments + bootstrap: highlight shell code with dark background

css

pygments

twitter-bootstrap

twitter-bootstrap-3