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. [options="interactive"] .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.
