LogoPhly, boy, phly
the weblog and site of Matthew Weier O'Phinney

Tuesday, March 10. 2009

Syntax Highlighting for Technical Presentations

Being a technical presenter, I've often run up against the issue of how to present code snippets.

The easiest route is to simply cut-and-paste into your presentation software. However, such code is basically unreadable: it's hard to get indentation correct, and the lack of syntax highlighting makes them difficult to read (syntax highlighting helps users understand the purpose of the various language constructs).

The first trick I tried was to take screenshots of gvim. However, this had distinct downsides: I typically use a dark color scheme, which makes contrast on projector screens poor, and the resolution of the images is such that the text is often too small. I can of course rectify both situations by changing my GUI preferences, but this leads to a need to switch back and forth between profiles.

Screenshot created with Vim

The next trick I tried was to use Zend Studio or Eclipse to create my screen shots. In these cases, since the editor is not my primary editor, I could set the font size and color schema how I desire, and this worked relatively well.

Screenshot created with Eclipse

Except that both options really are awful. The workflow is something like this:

  1. Write some code
  2. Take a screenshot of the application window
  3. Load said screenshot in GIMP
    1. Crop to expose only the code desired
    2. Create whatever effects are desired (drop shadow, reflection, rounded corners, etc)
  4. Insert screenshot into presentation

And what happens when you discover a typo or an error? You have to go back and do it all over. Additionally, you still can't zoom in on the text if it's too small.

I'd finally had enough, and decided to look for syntax highlighting plugins for OpenOffice.org Impress. I didn't find any. But in searching, I stumbled across an even better solution.

Highlight is a syntax highlighting utility written in C. It can syntax highlight a couple dozen languages using any of a couple dozen different highlighting schemas, and, better yet, create a variety of output formats. One of these, RTF (Rich Text Format) can be directly imported into most office software, including OO.o Impress.

The usage is pretty simple: pass in a few options including an input file, output file, output type, and optionally the language (it usually autodetects fine, though), and it does the work (there are other options you can specify as well, including line width, font size, and more). Even better, you can provide directories for the source and output files -- allowing you to batch them. When I'm creating a presentation now, I create a shell script that invokes the options I want and passes in a source and target directory, and run it anytime I add or update examples. Within OO.o, I then simply go to the "Import" menu, and choose "File..." -- and it comes in as a native object that I can actually manipulate -- including changing font size, line spacing and more.

I think the results speak for themselves:

Highlight

The point: make your technical presentations easier to read, and easier to create: syntax highlight your code examples in a readable way.

Posted by Matthew Weier O'Phinney in PHP at 21:02 | Comments (14) | Trackbacks (0)

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments
Display comments as (Linear | Threaded)

I have been down pretty much the same road, getting very frustrated for the very reasons you give above. I have even tried generating RTF with other tools, which did not work out as expected.

But as it turns out, the Bavarian Beer has been a good investment in you! Thanks for sharing you solution, it will make my slide-writing a lot easier.
#1 Stefan Priebsch (Link) on 2009-03-11 03:08 (Reply)
I use Latex Beamer and the listings package.
#2 Thomas Koch (Link) on 2009-03-11 03:35 (Reply)
I wrote a small app using php that colours code producing an output very similar to what you see on code listings on php.net.

You can try it out on my site at: http://www.deta-it.co.uk/colouredCode/

It started out because I refused to spend hours adding css to my source code by hand and knew there must be a better way!
#3 Barnaby (Link) on 2009-03-11 03:36 (Reply)
What I am using these days is Geshi. This way I can just integrate the highlighted source code via the "web view" in Keynote. Of course in the end Keynote just does a screenshot as well, but the advantage is that I do not need to call an shell commands to get the screenshot updated.

Where persentation software still falls flat on its face (or at least I have not found a solution), is if your code is so long that you would need to scroll. This is where the pres2 system alot of core dev's use is obviously superior, since they just use a browser for the actual presentation, so they can scroll to their hearts content.
#4 Lukas (Link) on 2009-03-11 03:38 (Reply)
I've used browser based systems (such as S5) a number of times, and had issues with text size and layout -- often I cannot increase the font size without also having things like the headers and footers increase as well.

I've also come to realize that large code snippets make for poor presentations, and have been working hard to keep my snippets succinct. If it can't fit on a single frame with at least an 18pt font, the audience will not be able to comprehend it in a glance, and will spend more time dissecting it than listening to the presentation.
#4.1 Matthew Weier O'Phinney (Link) on 2009-03-11 07:46 (Reply)
Yeah, I agree. Usually I managed to fit things on a single screen. However now I am faced for the first time with a situation where it will probably be clearer for the audience when I give a full code example that is a bit larger.

I am trying to illustrate how to do an advanced sql based search engine. And cutting things down to fit on a slide, just turns the entire thing into a triviality.
#4.1.1 Lukas (Link) on 2009-03-11 07:49 (Reply)
I use Keynote which makes this all very simple. I copy the code snippet to the clipboard from Eclipse and then paste it into Keynote. It comes into Keynote as RTF, fully syntax highlighted.

Regards,

Rob...
#5 Rob... (Link) on 2009-03-11 03:55 (Reply)
Not all of us run Macs. :-P
#5.1 Matthew Weier O'Phinney (Link) on 2009-03-11 07:44 (Reply)
While it's true that syntax highlighting can make code more readable in presentations, I see the typical VIM color scheme on black background in far too many slides.

IMHO, this is the worst possible option one can choose for syntax highlighting, especially for presentations. The contrast is far too low when using this color scheme. You can basically only see every bit of code when you're sitting in the first two rows. Go back a bit further and you can't read things written in some colors anymore, for example dark blue, purple and sometimes even red (when using a black background).

It's the same when you're not doing a presentation, but you're doing pair programming or just want to show some code to a colleague when working, for example, on a notebook. As the one who sits directly in front of the screen, you can see the colors perfectly. The poor soul standing to the side of the display can't see a bloody thing because of the poor contrast.

In summary: It's okay to use syntax hightlighting in presentations, but make sure to use high contrast colors. Also, it's best to test your presentation using a beamer, or if you don't have one, a notebook display while standing back a bit or a little bit off to the side, or maybe both. It's also a good idea to let other people have a look and say if they can read everything easily.
#6 Markus Wolff (Link) on 2009-03-11 05:14 (Reply)
I used to copy highlighted code from Eclipse and to paste it into OOo using Paste Special (Ctrl+Maj+V) and then selecting RTF formatted text. It worked but your solution is so much elegant ;-) I can now get rid of Eclipse on my laptop...
#7 Raphaël Rougeron (Link) on 2009-03-11 10:01 (Reply)
From my experiences, I'd have to recommend using Codex (the Ruby gem) since you don't have to deal with the whole import to office suite thing.

The solution presented here certainly works well if you must use OO.o though. Good writeup.
#8 Eric Wendelin (Link) on 2009-03-12 15:43 (Reply)
I would recommend the python library pygments for this kind of job. You can find an article on my blog where I speak about it : http://ssscripting.wordpress.com/2009/03/09/a-pretty-simple-way-to-highlight-any-type-of-code-on-your-blog/
#9 Geo (Link) on 2009-03-12 17:15 (Reply)
I'm aware of pygments (Dojo utilizes them in dojox.highlight, which I have used extensively). However, in this particular case, I am developing presentation material, and need to present code as part of the presentation -- and web-based solutions for presentations typically do not offer the same flexibility and features as presentation software such as OpenOffice.org Impress (which I use) or PowerPoint. This was the origin of my issues.
#9.1 Matthew Weier O'Phinney (Link) on 2009-03-12 19:49 (Reply)
Images for listings has tree big disadvantages over styled text in a presentation: 1. the presentation gets bigger (filesize) 2. the code is cumbersome to change 3. its not searchable. If Eclipse put source code into the clipboard is preserves via RTF italic, underline and bold from the editor but the colour information is missing. But for me its more convenient not to use graphics but text.
#10 Christian (Link) on 2009-03-12 17:15 (Reply)

Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

 
 
  • Home
  • Resume
  • Blog
  • Phly PEAR Channel
  • Contact Me
  • About this site

ZCE

Zend Education Advisory Board Member

Add to Technorati Favorites

Calendar

Back March '10 Forward
Mon Tue Wed Thu Fri Sat Sun
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Quicksearch

Links

  • PHLY - PHp LibrarY
  • Paul M. Jones
  • Mike Naberezny
  • Shahar Evron
  • Planet PHP
  • Zend Where I now work
  • Garden.org Where I once worked

Archives

March 2010
February 2010
January 2010
Recent...
Older...

Categories

XML Linux
XML Personal
XML Aikido
XML Family
XML Programming
XML Dojo
XML Perl
XML PHP

All categories

Syndicate This Blog

XML RSS 0.91 feed
XML RSS 1.0 feed
XML RSS 2.0 feed
ATOM/XML ATOM 0.3 feed
ATOM/XML ATOM 1.0 feed
XML RSS 2.0 Comments

Show tagged entries

xml best practices
xml books
xml conferences
xml cw09
xml decorators
xml dojo
xml dpc08
xml file_fortune
xml git
xml linux
xml mvc
xml oop
xml pear
xml perl
xml personal
xml php
xml phpworks08
xml programming
xml rest
xml ubuntu
xml vim
xml webinar
xml zendcon
xml zendcon08
xml zendcon09
xml zend framework
© 2004 - present, Matthew Weier O'Phinney
matthew-web <at> weierophinney.net