Syntax Highlighting for Fun and Profit

"Syntax Highlighting for Fun and Profit"
or,
How to add colored code
to your presentations
and live through the ordeal

Motivation

• We've all seen them- presentations that have great content, a good lecturer and are well layed out.
• But then come the code examples.
• If you're lucky, you can just barely make out the comments from the code:

  # some comment
  for (@array) {
     ... # showing incredible loop usage example!
  }
  

Motivation - Cont'd

• A long stretch of code with no color - guaranteed to put that glazed look in the eyes of your audience...
• What about code lines folding?
• What about using "<" and & chars in your code?
• What about those $inline @variables and Module::Names that you want to stand out from the rest of the line?
• What happens if a non-fixed-width code is chosen?
  
• Oh, the horror!

Motivation - Cont'd (2)

• True, some people can do without syntax highlighting.
• But it's easier to write code without mistakes!
• In any case, for the majority of us mortals, code is easier to read if the different parts stand out. Humans, after all, are mostly visual animals...
   
  
     
  
     
  
     
  
     
           

Motivation - Cont'd (2)

• True, some people can do without syntax highlighting.
• But it's easier to write code without mistakes!
• In any case, for the majority of us mortals, code is easier to read if the different parts stand out. Humans, after all, are mostly visual animals...
  

Will this work with [Presentation Software Name Here]?

• Methods I'm about to show create HTML output.
• So suitable for inclusion in any HTML based presentation solution.
• Also work (via copy-paste from a browser) into OpenOffice Impress.
• Not tested on PowerPoint, but should work (via copy-paste) there too

Command-line tool

• Actually, the first method I'm about to show doesn't invlove Perl at all:

  gvim -n -c ':so $VIMRUNTIME/syntax/2html.vim' -c ':wqa' script.pl
  

• Highlights:
  • Need gvim installed.
  • Uses gvim rather than vim due to gvim outputting, IMHO, nicer colors.
  • YMMV
  • See gvim -h for explanations of command line arguments.

gvim solution not so good...

• Need to take output (html file), and copy-paste code (everything between the pre tags) into your presentation source.
• Manual solution - but we're Perl programmers... ;-)
• Uses individual "font color" tags for each colored element. So it's hard to change the look of the output:

  For example this:
  <font color="#a52a2a"><b>my</b></font>
  Creates this:
  my 
  

• In fact, the output isn't even XHTML compliant, so if you want your slides to be standard XHTML, you're out of luck.
• What about Perl one-liners?

  perl -ane'$sum=$F[0]+$F[1];print"$sum\n"'
  

  Yuck! No real highlighting there!

Text::VimColor to the rescue

• A Perl module that acts as a wrapper around Vim's syntax highlighting abilities.
• Can output valid XHTML 1.0 markup
• Can accept either a string or file

Text::VimColor Usage

• The following colors a string of Perl code saved in the $code scalar:

  my $syntax = Text::VimColor->new(
     vim_command => '/bin/vim',
     string      => $code,
     filetype    => 'perl',
  );
  my $html = $syntax->html;
  

Use the CSS, Luke!

• Look for the file light.css under the Text::VimColor installation directory.
• Grab the CSS styles from there and place them in your own CSS styles file.
• Now you can change the color of individual elements to your heart's content.

The Big Picture

• Apart from coloring the actual code, I also want it framed, and nicely centered on my page.
• I also want all Perl code to be colored using a script.
• To enable this, I wrap every piece of Perl code seperatly in
  <pre class="perlcode">...code here...</pre>
  tags.
• In my CSS file, I define the class "perlcode" with the style attributes I want - border, font family, etc.

The Big Picture - Cont'd

• To create the colored code, I use the following Perl code in my slides generation script:

  # place all content into the $content var, then:
  $content =~ 
     s/(<pre class="perlcode">)(.+?)(<\/pre>)/
       "$1\n" . code2html($2) . "\n$3"       /gse;
  sub code2html {
     my $code = shift;
     my $syntax = Text::VimColor->new(
        vim_command => '/bin/vim',
        string => $code,
        filetype => 'perl',
     );
     my $html = $syntax->html;
     for ($html) {
        s/^\s+//s;
        s/\s+$//s;
     }
     return $html;
  }
  

Handling One-liners

• I use a 2-step solution to handle one-liners:

  $content =~ 
     s/(<pre class="perl-e-code">)(.+?)(<\/pre>)/
       "$1\n" . code2html2($2) . "\n$3"       /gse;
  sub code2html2 {
     my $code = shift;
     $code =~ s/'(.+?)'/"'".code2html($1)."'"/gse;
     return $code;
  }
  

• Now this looks much better:

  
  perl -ane'$sum=$F[0]+$F[1];print"$sum\n"'
  
  

Another Method

• Vim based method has some disadvantages: slow, requires that Vim be installed.
• Enter Syntax::Highlight::Perl
• A module by Cory Johns that parses code and provides you with hooks for manipulating how it will print.
• Example output:

  my $syntax = Text::VimColor->new(
     vim_command => '/bin/vim',
     string      => $code,
     filetype    => 'perl',
  );
  my $html = $syntax->html;
  

Additional Options

• source-highlight, given a source file, produces a document with syntax highlighting
• Highlight is a C++ program that converts source code to formatted text with syntax highlighting.
• a2ps is an Any to PostScript filter, that can also create colored output from input code.
• Colorer take5 is a syntax highlighting and text parsing library, that provides services of text parsing in host editor systems in real-time and transforming results into colored text. An Eclipse plugin is available.
• Beautifier ihighlights and indents source code using highlight configuration files. As a bonus, it itself is written in Perl :-)
• Probably many others...

Thank you

Offer Kaye.
Slides automatically generated by tmpl2slides.pl. Last updated on Sun Dec 5 01:43:31 2004