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: highlightjs|
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 You can also load Highlight.js from a custom base directory (or remote URL) using the |
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.
|
Line number highlights
reveal.js can add Line Numbers & Highlights to source code blocks.
This example source block renders with no line numbers by default:
[source,java]
----
public class TestClass {
public TestClass() {
}
public void testMethod() {
}
}
----By adding linenums, line numbers will be added:
[source,java,linenums]
----
public class TestClass {
public TestClass() {
}
public void testMethod() {
}
}
----It is also possible to highlight only part of the source by using highlight. This will highlight the whole testMethod() method:
[source,java,linenums,highlight=6..8]
----
public class TestClass {
public TestClass() {
}
public void testMethod() {
}
}
----| The highlighting only works using the default source code highlighter Highlight.js. |
You can also use highlight=6-8 as an alternative to highlight=6..8.
|
Finally, it is also possible to use step-by-step Highlights by separating the different highlights with a pipe (|) symbol. For example:
[source,java,highlight='1..9|2..4|6..8']
----
public class TestClass {
public TestClass() {
}
public void testMethod() {
}
}
----This will first highlight the complete source block, then the constructor code on lines 2 to 4, and finally, the method code on lines 6 to 8.
Line numbers are always added if you use highlight. In that case, you can leave out linenums.
|