Home > css, html, Tip > Beautify your code with pygments

Beautify your code with pygments

Ever wonder how I colour-coded my code blocks with colours? CSS? That’s almost right. WordPress does not support css customisation for standard accounts, but you can get around with this limitation by using inline css. Here’s a good post talking about this technique: http://www.scratch99.com/2007/06/wordpress-simple-css-text-boxes-in-posts/

Inspired by that post, here’s how I do to make my snippets colourful:
1. Download Pygments from http://pypi.python.org/pypi/Pygments [ the .tar.gz file. The pygments site seems to be down at this moment ]
2. Untar it and install it as root

tar xzf Pygments-1.0.tar.gz
cd Pygments-1.0
sudo python setup.py install

3. After the installation you are ready to style your code. Some examples:

pygmentize -f html -O noclasses myscript.sh
  outputs css-lized html to the screen
pygmentize -f html -O noclasses -l bash myscript
  outputs css-lized html to the screen, option -l bash is used to specify which lexer to use
pygmentize -f html -O noclasses -o myprog.html pyprog.py
  outputs css-lized html to file myprog.html

4. Copy and paste the html code from above step into the code block in your post. Preview it if needed. Then publish.

Advertisements
Categories: css, html, Tip
  1. September 30, 2011 at 2:34 am

    To use Pygments from PHP:

    http://derek.simkowiak.net/pygments-for-php/

    To use Pygments within WordPress:

    http://derek.simkowiak.net/pygments-for-wordpress/

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: