Twitter Bootstrap Question posted in

Twitter bootstrap – pygments + bootstrap: highlight shell code with dark background

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:

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

Testing works as expected:

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

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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. 0

    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
Search