June 11, 2014

Awesome Asciidoctor: Include Raw HTML

If we use the HTML backend with Asciidoc we can use a passthrough block to include raw HTML in the output. The contents of a passthrough block is untouched and will be put literally in the generated output. A passthrough block is enclosed in four plus signs (++++).

In the following sample Asciidoc markup we include some Javascript:

<p><span id="replaceMe">Sample content</span> replaced by Javascript</p>
document.getElementById('replaceMe').innerHTML = 'New content!'

The generated HTML will execute the Javascript and we get the following output:

We can also add raw HTML inline in our Asciidoc markup. We can enclose the HTML in triple plus signs (+++) or use the pass:[] macro. The following sample shows the markup where both methods are used:

We can also use passthrough inline macros to have raw HTML in the output.

For example with three plus symbols we can +++<em>emphasize text</em>+++.

Or we can use the inline macro syntax with the +pass+ name to pass:[<strong>make text strong</strong>].

The generated HTML looks like this:

Code written with Asciidoctor 0.1.4.