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.
[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.
