Search code examples
cssasciidoctorliterate-programming

Using the richness of syntax highlighting produced by asciidoctor

Asciidoctor will process the file simple.adoc containing:

:source-highlighter: pygments

[source,java]
Foo bar = baz + qux;

using pygments to produce many syntax categories

syntax-highlighted code

We can confirm that the HTML produced is indeed quite rich:

<div class="content">
<pre class="pygments highlight">
<code data-lang="java"><span class="tok-n">Foo</span> 
<span class="tok-n">bar</span> <span class="tok-o">=</span> 
<span class="tok-n">baz</span> <span class="tok-o">+</span> 
<span class="tok-n">qux</span><span class="tok-o">;</span>
</code></pre>
</div>

But the default stylesheet poorly distinguishes between the syntax categories.

How can I customize the output, perhaps by inserting a new CSS stylesheet or by modifying the values in the existing stylesheet?

Update (Thanks LightGuard) If we save the file simple-docinfo.html, whose name matches the file we're processing but has the suffix -docinfo and the extension .html, containing the one line:

<link rel="stylesheet" href="basejump.css">

and then run asciidoctor simple.adoc, we should see basejump.css appear in simple.html. But no such basejump.css appears. Why?

Solution

  • You could make changes in another stylesheet and load it with a docinfo file.

    UPDATE 2015-02-25: You need to include the :docinfo: attribute either in the file header, or an the commandline with -a docinfo