Paul Bininda – Blog
25Aug/09

Syntax Highlighting and Printing

I installed a WordPress plugin for syntax highlighting of code blocks today. The plugin I installed uses JavaScript to do the highlighting and has a additional view source and print buttons, which is nice. Especially the view source button allows for easy cut and paste.

I also made the blog printer friendly by adding a special style sheet for printing. Good documentation for doing this can be found on the WordPress site.

<link rel="stylesheet" type="text/css" media="screen"
  href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" type="text/css" media="print"
  href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />

the print.css stylesheet looks like this:

body {background:white;
     font-size:10pt;
     margin:0 }
#sidebar { display:none }
#header { display:none }
.content-sidebar { display: none }
.next_previous_link { display: none }
.subscribe_comments { display: none }
.nr_comm { display: none }
.edit_content { display: none }
#content{ margin-left:0;
     float:none;
     width:auto }
.demo .red { color:black;
     font-weight:bold }
#content a { font-weight:bold;
     color:#000066;
     text-decoration:underline }
#content{ margin-left:0;
     float:none;
     width:auto }
#respond{ display: none }
#footer, .ad { display:none }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
     page-break-inside:avoid }
h3 { margin-left:10px;
     margin-bottom:0px;
     padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }
img.centered { display: block;
     margin-left: auto;
     margin-right: auto; }
img.right { padding: 4px;
     margin: 0 0 2px 7px;
     display: inline; }
img.left { padding: 4px;
     margin: 0 7px 2px 0;
     display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
     page-break-after:avoid; }