March 2, 2015

Awesome Asciidoctor: Creating a Checklist

Creating a list with Asciidoctor markup is easy. To create an unordered we need to start a line with an asterisk (*) or hypen (-). We can add some extra markup to create a checked list. If we add two square brackets ([]) to the list item we have a checklist. To have an unchecked item we use a space, for a checked item we can use a lowercase x (x) or an asterisk (*).

In the next example we define a shopping cart list with Asciidoctor markup:

== Checklist

.Shopping cart
* [x] Milk  // Checked with x
* [ ] Sugar  // Unchecked
* [*] Chocolate  // Checked with *

When we create the HTML file we get the following output:

If we use font-based icons with the document attribute :icons: font the checkboxes are rendered using fonts:

The checkboxes are now simply output in the HTML file. We can add an options attribute to our list to make the checkboxes interactive:

== Checklist

// Make interactive checklist.
.Shopping cart
* [x] Milk  
* [ ] Sugar  
* [*] Chocolate 

If we transform this markup to HTML we see the following in our web browser:

Written with Asciidoctor 1.5.2.