News Update: New Slide Show (S9) Online Service Now Live - Try Slide Show (S9) In Your Browser

Code/Syntax Highlighting Helpers

Hello, Syntax Highlighting Helper!

Slide Show (S9) lets you include and syntax highlight code with the code helper. Example:

<% code do %>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  def salute
    puts "Hello #{@name}!"
# Create a new object
g ="world")
# Output "Hello World!"
<% end %>


   1  # The Greeter class
   2  class Greeter
   3    def initialize(name)
   4      @name = name.capitalize
   5    end
   7    def salute
   8      puts "Hello #{@name}!"
   9    end
  10  end
  12  # Create a new object
  13  g ="world")
  15  # Output "Hello World!"
  16  g.salute

Client-Side vs. Server-Side Syntax Highlighting - Your Choice

Slide Show (S9) ships with three built-in syntax highlighting helper engines letting you choose between client-side syntax highlighting in JavaScript (the out-of-the-gem factory setting) or server-side ahead-of-time syntax highlighting in classic Ruby.

What’s SyntaxHighlighter?

SyntaxHighligher is a free, open-source syntax highlighter in JavaScript:

Note, if you use the SyntaxHighligher engine you will need to use the s6syntax template pack that includes the SyntaxHighlighter machinery or as an alternative bundle up your own template pack.

What’s Ultraviolet?

Ultraviolet is a free, open-source syntax highlighting engine in Ruby that uses Textmate syntax files offering out-of-the-gem syntax highlighting for more than fifty languages in twenty themes:

To use Ultraviolet for syntax highlighting install the Ruby gem e.g.

$ gem install ultraviolet

and switch the code-engine setting to uv or ultraviolet.

What’s CodeRay?

CodeRay is another free, open source syntax highlighting engine in Ruby:

To use CodeRay for syntax highlighting install the Ruby gem e.g.

$ gem install coderay

and switch the code-engine setting to coderay.

Using the code Helpers for Syntax Highlighting

The code helper lets you include and syntax highlight code inline e.g.


<% code do %> 
  puts 'Hello World!   
<% end %> 


{% code %} 
  puts 'Hello World!   
{% end %}

or include code from a file - lets say hello.rb:

<%= code 'hello.rb' %> 

{{ code hello.rb }} 

To select the language (default is ruby) use the :lang option e.g.

<%= code 'effects.css', lang: => 'css' %> 

{{ code effects.css lang=css }} 

Note, you can also include parts of files using Codex-style markers in your source (e.g. #START:your_marker_here and #END:your_marker_here) and you can also pass along an extra CSS class (large, small, tiny, etc.) e.g. this directive in Codex

:code code/meta/my_ostruct.rb[impl class=code-small] 

becomes in S9:

<%= code 'code/meta/my_ostruct.rb#impl', class:=>'small' %> 

{{ code code/meta/my_ostruct.rb#impl class=small }}

To select the underlying engine for syntax highlighting use the :engine option e.g.

<%= code 'highlight.rb', :engine => 'sh' %> 

{{ code highlight.rb  engine=sh }}

or use a header to set it once e.g:

code-engine: sh   # or use your very own code engine here 

You can also use the built-in code highlighting engines “stand-alone” without the code “wrapper” helper.

To use SyntaxHighlighter use:

<% sh do %>
  puts 'Hello World!
<% end %>

To use Ultraviolet use:

<% uv do %>
  puts '¡Hola Mundo!
<% end %>

To use CodeRay use:

<% coderay do %>
  puts 'Hallo Welt!
<% end %>

Note, that the sh, uv and coderay helpers only support inline code (if you want to include code use a nested include e.g.:

<% sh :lang => 'css', :line_numbers => 'off' do %>
  <%= include 'gradients.css' %> 
<% end %> 

For more options or on how to write your own syntax highlighting helpers check the source of the syntax higlighting helpers.

Questions? Comments?

Questions? Comments? Send them along to the wwwmake mailing list/forum. Thanks!

Edit Me! This website is a public GitHub repo. Please help by forking the project and adding to it.