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.

Colorized bullet point #603

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions