Customizing list appearance

[damithc]

It's still a bit far from what we can eventually put in the UG. Perhaps something like this?

---

Customizing the list appearance

The list icons can be customized by adding an {icon="..."} at the end of a list item or a list itself.

CODE:

* item 1 line 1 {icon=":x:"}
* item 2 line 1 
  item 2 line 2 {icon=":fas-flag:"}
* item 3
* item 4

  {icon=":tick:"}

OUTPUT: ...

Notes:

1. A note on how the list-level specification and item-level specifications work
2. A note on the need for the blank line
3. It is possible to any of the icons supported by MarkBind (e.g., Font Awesome, Octicons, Glyphicons, etc.) as the icon of a list item.

It is possible to specify icons for nested levels using the icons attribute.

CODE:

* item 1
* item 2 
  * item 2.1
  * item 2.2
* item 3

  {icons=":thumbs_up: :light_bulb:"}

OUTPUT: 👍 item 1 👍 item 2    💡 item 2.1    💡 item 2.1 👍 item 3

The icon appearance can be customized further using a size attribute and a class attribute.

CODE:

* item 1 line 1 {icon=":fas-home:"}
* item 2 line 1 
  item 2 line 2 {icon=":fas-user:"}
* item 3 line 1 
  item 3 line 2 {icon=":fas-flag:" class="bg-danger"}

  {size="s" class="badge bg-success me-1"}

OUTPUT:

Another possibility is to specify a shape and a background, similar to how it is done in the thumbnails feature.

CODE:

* item 1 {icon=":book:"}
* item 2 {icon=":pen:"}

  {shape="circle" size="100" background="#dff5ff"}

OUTPUT:

It is possible to use images as the icon, in which case the attribute width can be used as well.

CODE:

* ### heading 1
  item 1 line 1 
  item 1 line 2 {icon="images/p1.png"}
* ### heading 2
  item 2 line 1 
  item 2 line 2 {icon="images/p2.png"}
* ### heading 3
  item 2 line 1 {icon="images/p3.png"}

  {width="100" class="rounded"}

OUTPUT: ...