Generating stylesheets for pygments

2011-11-27T00:00:00+00:00

Update: this blog is no longer using the same technology for deployment as before, the below information is available for historical reasons.</p>

For this blog I am using Python markdown</a> with the Pygments</a> plugin that is available. Pygments does all of the code highlighting and outputs the required span</code> tags and inputs them within the page.</p>

If you were to look at the <div><pre></pre></div></code> block that is generated you'd see something like this:</p>

<div class="codehilite"><pre><span class="k">def</span> <span class="nf">function</span><span class="p">(</span><span class="n">var</span><span class="o">=</span><span class="bp">None</span><span class="p">):</span></span></span>
<span class="k">if</span> <span class="n">var</span> <span class="ow">is</span> <span class="ow">not</span> <span class="bp">None</span><span class="p">:</span></span></span>
    <span class="k">print</span> <span class="n">var</span></span></span>
</pre></div></span></span></code></pre>
which is generated from the following snippet of code:</p>
def</span> function</span>(</span>var=</span>None</span>)</span>:</span></span>
    if</span> var</span> is not</span> None</span>:</span></span>
        print</span> var</span></span></code></pre>
As you see the top css class</code> is codehilite</code>, and then underneath that there
are a bunch of other classes such as k</code>, n</code>, o</code>, and so forth. Those are all
classes that can be styled. Now one could write such a stylesheet by hand or we
can simply use one of the stylesheets that Pygments ships with.</p>
The documentation for Pygments tells you how to get built-in styles</a>, which
is as simple as:</p>
>>></span> from</span> pygments.styles</span> import</span> get_all_styles</span></span>
>>></span> styles</span> =</span> list</span>(</span>get_all_styles</span>())</span></span>
>>></span> styles</span></span>
['</span>monokai</span>'</span>,</span> '</span>manni</span>'</span>,</span> '</span>perldoc</span>'</span>,</span> '</span>borland</span>'</span>,</span> '</span>colorful</span>'</span>,</span> '</span>default</span>'</span>,</span> ...</span>]</span> </span></span></code></pre>
These are all the styles that are available to you the user, now how do we get
the style into an actual .css</code> file that we can link to in our sites HTML
file? We use the pygmentize</code> command line tool:</p>
pygmentize</span> -f</span> html</span> -S</span> trac</span> -a</span> .codehilite</span> ></span> pygments.css</span></span></code></pre>
Feel free to replace trac</code> with any of the styles you have installed on your
system. -f</code> tells it what formatter to use, since we want it to output the css
we ask it to use the HTML formatter, -S</code> tells pygmentize</code> what style to
use, and -a</code> prepends the .codehilite</code> class before every rule (this way we
don't pollute the whole CSS namespace with all the aforementioned class's such
as k</code>, o</code>, ow</code> and others).</p>

funcptr - meta

Generating stylesheets for pygments