Syntax Highlighting

reveal.js is well integrated with Highlight.js for syntax highlighting. Asciidoctor reveal.js supports that. You can activate Highlight.js syntax highlighting (disabled by default) by setting the source-highlighter document attribute as follows:

= Presentation Title
// [...] other document attributes
:source-highlighter: highlight.js

The first empty line in the document marks the end of the header. In other words, if you declare the source-highlighter attribute after an empty line it won’t activate syntax highlighting.

Reference: Document Header

By default, we are using a prebuilt version of Highlight.js with 34 commonly used languages hosted on cdnjs. You can load additional languages using the :highlightjs-languages: attribute:

// load yaml and scilab languages
:highlightjs-languages: yaml, scilab

You can also load Highlight.js from a custom base directory (or remote URL) using the :highlightjsdir: attribute:

// load from a local path
:highlightjsdir: highlight
// load from jsdelivr CDN
//:highlightjsdir: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build

Once enabled, you can write code blocks as usual:

== Slide Five

Uses highlighted code

[source, python]
----
print "Hello World"
----

By default [source] blocks and blocks delimited by ---- will be highlighted. An explicit [listing] block will not be highlighted. highlight.js does language auto-detection but using the language="…" attribute will hint the highlighter. For example this will highlight this source code as Perl:

== Slide Five

[source,perl]
----
print "$0: hello world\n"
----

Alternatively, you can use Rouge, Coderay or Pygments as syntax highlighters, if you are using the Asciidoctor/Ruby/Bundler toolchain (not Asciidoctor.js/JavaScript/npm). Check the examples/ directory for examples and notes about what needs to be done for them to work. They are considered unsupported by the Asciidoctor reveal.js project.