pygments + bootstrap：用深色背景突出显示 shell 代码答案

【问题标题】：pygments + bootstrap: highlight shell code with dark backgroundpygments + bootstrap：用深色背景突出显示 shell 代码
【发布时间】：2015-12-16 18:58:49
【问题描述】：

我在我的小static blog generator 中通过 pygments 和 markdown 呈现代码 sn-ps，但我遇到了 pygments 和 twitter 引导程序的问题。

这是我的问题：

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

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

测试按预期进行：

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

这会生成一个看起来如我预期的 html 文件：

哇！ pygments 工作！现在，这就是代码在我的博文中突出显示的方式：

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

如果我注释掉：

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

语法高亮按预期工作：

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

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 pygments

【解决方案1】：

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; }

【讨论】：

【解决方案2】：

我想通了，经过一段时间的思考，这个问题应该怎么写以及是否应该写出来。

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

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

现在可以按预期工作了。

【讨论】：