J1 Template adds a small JavaScript helper called the View Result Extension. It puts a VIEW toggle button at the top right of any listing block (a code or example box).

This example places a VIEW button at the top right of the example box.

An admonition is a colored, labeled box that calls attention to a piece of information — for example a tip, a warning, or an important note. The Asciidoc markup language provides five types of admonition, shown in the table below.

To highlight a single paragraph, start it with the admonition label in uppercase, followed by a colon :.

For longer content that spans several paragraphs or includes other elements, set the label as an attribute on top of an example block. The label must be uppercase.

To give an admonition an optional title, place a dot . directly followed by the title text on the line above the block.

A quote element is used to cite text from a book, a speech, a movie, or any other source. Quote elements use two attributes:

A lightbox is a popup that shows an image in full size when the user clicks on its thumbnail. To make using lightboxes easier, J1 Template provides the lightbox:: block macro. This macro embeds one or more images and turns the J1 default lightbox on automatically.

You can set the image width, an optional caption, and extra CSS styles for all images placed with the macro.

J1’s default gallery is built on JustifiedGallery, a jQuery plugin that arranges images into neat, evenly aligned rows. J1 also wires the gallery up to the lightbox so that clicking an image opens it in full size.

The photos you take are usually not all the same size. Some are landscape, some are portrait, and some are square. A simple grid does not handle that well. A gallery uses a masonry-grid layout instead — the images are placed like bricks in a wall so that the rows fit together without big gaps.

Country flags are often used for language pickers or to mark content that belongs to a specific country. A small flag icon is much easier to recognize than a country name written out.

J1 Template ships with full country-flag support for Asciidoc documents.

You can place a flag inline using the flag: macro:

The flags come from Flag Icons, a complete collection of country flags in SVG vector format. They scale to any size without losing quality.

An icon font is a special font where each letter is a small picture (an icon). J1 Template includes full icon support for Asciidoc documents and bundles three popular icon-font sets:

Blind text is fake placeholder text used to fill a page during design — for example, the well-known "Lorem ipsum" paragraphs. J1 provides the lorem: inline macro to generate blind text right inside your Asciidoc document. The macro is adapted from a helper in Middleman, a small static-site generator written in Ruby.

When you start a longer document, you usually do not have all the content yet. Filling the empty parts with blind text helps you see how the finished page will look while you are still writing.

The lorem: macro can produce many kinds of placeholders. Each kind is selected by a name. The basic syntax is:

Code snippets may helpful to support your readers for existing code examples. An excellent place for code snippets is 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 this example:

Bootstrap gives you a complete set of styles for responsive layouts, including tables. But standard Bootstrap tables can still be hard to read on small screens.

J1 Template builds on top of Bootstrap and adds extra CSS styles for responsive tables. The result is a table layout that stays readable on phones and tablets without losing portability.

See what Responsive Tables can do.