skip to Main Content

I am rendering code snippets via pygments and markdown in my little static blog generator and I am having a problem with the pygments and twitter bootstrap.

Here is my problem:

I want code snippets to be highlighted with dark-solarized theme for pygments. I downloaded it to:


Testing works as expected:

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

This produces an html file which looks as I expected:

hoora! pygments work

hoora! pygments work! Now, this is how the code is highlighted in my blog post:

fucked up

bummer … this looks bad …

If I comment out:

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

The syntax highlighting works as expected:

messed up

So, my question is: how do I make twitter-bootstrap play along with pygments?



  1. Chosen as BEST ANSWER

    I figured it out, after a while of thinking how this question can and if it should be written.

    For the benefit of others, the solutions was to define the color of the pre element:

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

    This now works as expected.

  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; }
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top