J1 Template adds a simple Javascript based on the View Result Extension to any listingblock. The extension adds an interactive toggle button VIEW to the output of an Asciidoc listing block box placed to the top right of the example box. If a result block [.result] is placed under a listingblock, clicking the toggle button VIEW displays (or hide) the content given by the result block.

The View Result Extension is quite helpful for sections discussing Asciidoc code and how the resulting (HTML) code would look alike.

Admonition blocks draw attention to certain statements by taking them out of the content’s flow and labeling them as priorities. These types of (Asciidoc) blocks are called admonitions. The AsciiDoc language provides five admonition types represented by the following labels:

When you want to call attention to a single paragraph, start the first line of the paragraph with the label you want to use. The label must be uppercase and followed by a colon (:).

Set the label as a style attribute on a block when you want to apply an admonition to complex content. The next example shows that admonition labels are commonly set on example blocks. The label must be uppercase when set as an attribute on a block.

To add an additional title element on an admonition, place a dot (.) markup directly followed (no spaces) by the text of the title.

Quote elements cite a passage or phrase from a book, speech, or the like, such as authority, illustration, etc. the quote elements are controlled by the following attributes:

A Lightbox is, in general, a helper which displays enlarged, almost screen-filling versions of images (or videos) while dimming the remainder of the page. The technique, introduced by Lightbox V2, gained widespread popularity thanks to its simple style. The term lightbox has been employed since then for Javascript libraries to support such functionality.

To make the use of the built-in lightbox easier, the J1 Template offers an Asciidoc extension: the lightBox block macro. The block macro lightbox:: embeds one or more images into the output document and puts the default lightbox for J1 automatically on. The images size (width) and additional caption text and additional CSS styles are configurable for all images using this macro.

JustifiedGallery, the default gallery for J1, is a great jQuery plugin to create responsive, infinite, and high-quality justified image galleries. J1 Template combines the Gallery with the lightboxes supported to enlarge the images of a gallery.

Pictures you’ve made are typically not even in size. Images may have the same size (resolution), but some are orientated landscapes, or others may be portrait. For that reason, a more powerful gallery is needed to create a so-called masonry grid layout. It works by placing elements in an optimal position based on available horizontal and vertical space. Sort of like mason fitting stones in a wall.

Country flags are often used in the context of language-specific selections or for content related to a specific country. The use of country flags can make language selections or country indicators more visual to support your visitors by making a more meaningful presentation.

The J1 Template comes with full support of country flags for Asciidoc documents included.

Country flags can be used as inline icons by using the flag: inline macro:

Flag Icons is a collection of all country flags in the SVG vector format. All icons can be automatically resized with no loss in display quality.

The J1 Template comes with full icon support for Asciidoc documents included. All icon fonts are supported:

Material Designs Icons can be used as inline icons by using the mdi: inline macro:

Font Awesome Icons can be used as inline icons by using the fas: (solid icons) or fab (brand icons) inline macro:

Iconify Icons can be used as inline icons by using the iconify: inline macro:

Find all Iconify Icons available on page Iconify Icon Sets.

The Ruby Gem Middleman, a Ruby-based static site generator, provides a set of great helpers for generating random text content. The Lorem inline macro lorem: adapted this functionality from Middleman to use Asciidoc-based documents processed by Jekyll.

If you start writing larger documents with several chapters, not all of the content is available initially. It is quite useful to place blind text first to get a better impression of how a page will look-alike that is not finished yet.

Placeholders for blind text comes in several flavors given by macro. The syntax for the lorem: inline macro is simple like this:

Code snippets may helpful to support your readers for existing code examples. An excellent place for code snippets is Gist at Github. To embed an existing gist into your documents, the Asciidoc Extention Gist block provides the block macro gist:: to do so.

The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:

Asciidoc (Asciidoctor) extensions open up the Markup language to new use cases. Using the full power of programming languages to extend what’s needed, whether Ruby, Java, Groovy, or JavaScript. The number of extensions will grow - to get handy and powerful functionality needed for modern web pages based on the Asciidoc Markup language generated by Jekyll. For sure!

The next preview is focussing on advanced Bootstrap Modals. The modals feature is currently in beta status, but it is a great option to customize your user dialogues using them!

Have a look for the BS Modal Extensions feature of J1 Template.