Colorized bullet point

[woducku]

Is it possible to add colorized bullet point (for both unsorted types)? It will be easier and will take less space than other method like using header or column. Will be helpful.

[geoffreymcgill]

It is possible, although not super clean. The following sample demonstrates one technique:

<style>
#list-1 li:nth-child(1)::marker,
#list-1 li:nth-child(2)::marker {
    color: green;
}

#list-1 li:nth-child(3)::marker {
    color: yellow;
}

#list-1 li:nth-child(4)::marker {
    color: red;
}
</style>

{#list-1}
- Pros 1
- pros 2
- keep in mind
- con

The above creates the following results:

The big disadvantage of the above technique is that the CSS would need to be kept in sync with the bullet list. If the bullet list changes, the <style> would have to be updated.

Adding items to the bottom of the list would be a little easier than inserting a new list item somewhere higher. If adding a list item to the bottom, then just add another CSS spec. For instance, the following sample demonstrates adding a 5th blue item by using the nth-child(5) specifier:

#list-1 li:nth-child(5)::marker {
    color: blue;
}

You could also change the default color of the markers (bullets). The following sample demonstrates changing the default color of all bullets to green, then you only need to explicitly define the positions of the non-default colored list items.

<style>
#list-1 li::marker {
    color: green;
}

#list-1 li:nth-child(3)::marker {
    color: yellow;
}

#list-1 li:nth-child(4)::marker {
    color: red;
}
</style>

This creates the same result as the first sample:

Instead of maintaining the <style> block inside the .md page file, it is possible to add to the _includes/head.html using the techniques outlined in the following response:

#600 (comment)

---

Theoretically, it would be possible for Retype to support the following syntax, which would avoid having to maintain the nth-child(#) positions. Although unfortunately, the following syntax is not currently supported.

<style>
li.item-green::marker {
    color: green;
}

li.item-yellow::marker {
    color: yellow;
}

li.item-red::marker {
    color: red;
}
</style>

- Pros 1 {.item-green}
- pros 2 {.item-green}
- keep in mind {.item-yellow}
- con {.list-red}

I have created a feature request to support the - Pros 1 {.item-green} generic attribute syntax within Retype, although I do not have a clear timeline on when we could build this functionality.

Hope this helps.

[geoffreymcgill]

Another option to consider is adding an icon to each list item.

- :icon-check-circle: Pros 1
- :icon-check-circle: pros 2
- :icon-alert: keep in mind
- :icon-circle-slash: con

The above sample creates the following list:

You could take this even further by using a [!badge] component.

- [!badge variant="info" text=":icon-check-circle:"] Pros 1
- [!badge variant="info" text=" :icon-check-circle:"] pros 2
- [!badge variant="info" text=" :icon-alert:"] keep in mind
- [!badge variant="info" text=" :icon-circle-slash:"] con

The above sample creates the following list:

You could also experiment with changing the variant on each of the badges.

Using Emoji's is another option if you want to go bold.

- :large_green_circle: Pros 1
- :large_green_circle: pros 2
- :large_yellow_circle: keep in mind
- :red_circle: con   

Hope this helps.

[geoffreymcgill]

I thought of another technique. Using CSS to remove the bullet point.

<style>
#list-2 {
    list-style-type: none;
    padding-left: 1rem;
}
</style>

{#list-2}
- :large_green_circle: Pros 1
- :large_green_circle: pros 2
- :large_yellow_circle: keep in mind
- :red_circle: con

You could add a little more space to the right of the emoji by using the nbsp; work around.

{#list-2}
- :large_green_circle:  Pros 1
- :large_green_circle:  pros 2
- :large_yellow_circle:  keep in mind
- :red_circle:  con

This technique also works well with icons.

<style>
#icon-list {
    list-style-type: none;
    padding-left: 1rem;
}
</style>

{#icon-list}
- :icon-check-circle: &nbsp;Pros 1
- :icon-check-circle: &nbsp;pros 2
- :icon-alert: &nbsp;keep in mind
- :icon-circle-slash: &nbsp;con

Hope this helps.

[geoffreymcgill]

thanks. what will be the code for sub category?

The <style> would be:

<style>
#icon-list, #icon-list ul {
    list-style-type: none;
    padding-left: 1rem;
}
</style>

Hope this helps.

[woducku]

thanks a lot. it has solved the issue.

[geoffreymcgill]

As of Retype v3.3, we have added built in support for a new list-icon CSS class, so you will not have to add your own <style> block as mentioned above.

As well, the new list-icon class also supports automatically adding the correct padding to the right of the icon, so you will not need to use the   work-around I proposed above.

# Before
- :icon-check-circle:  Pros 1

# After
- :icon-check-circle: Pros 1

To create an icon list, just apply the .list-icon css class using the following technique:

{.list-icon}
- :icon-alert: Item 1
    - :icon-alert: This is sub-item 1.1
    - :icon-circle-slash: This is sub-item 1.2
- Item 2
    - :icon-check-circle: This is sub-item 2.1
    - :icon-check-circle: This is sub-item 2.2
    - :icon-alert: This is sub-item 2.3
    - :icon-circle-slash: This is sub-item 2.4

The list above sample will be converted into the following icon list:

Without including {.list-icon}, the following list style is created:

Once again, this new list-icon style will be available in the upcoming Retype v3.3 release.

Hope this helps.