Custom Bullets Settings

Release 2.17.2311 and above.

Use editor.list.customList to configure custom bullets.

Configuring the config

Custom bullets support up to 9 levels.
Items defined beyond level 9 are not displayed.
If the array is empty ([]), the custom bullet feature does not operate.
If fewer than 9 items are set, the defined items repeat to fill all 9 levels automatically.
When runStyle is set in the config, the runStyle configuration takes precedence over any style applied by the user during editing.

<table> <thead> <tr><th>Key</th><th>Type</th><th>Description</th></tr> </thead> <tbody> <tr> <td><code>format</code></td> <td>string</td> <td>

The available bullet formats applicable to format are as follows:

Format	Result
`bullet`	The character set in `levelText`
`decimal`	`1.`
`decimalEnclosedCircle`	`①`
`decimalParentheses`	`(1)`
`upperLetter`	`A.`
`lowerLetter`	`a.`
`upperRoman`	`I.`
`lowerRoman`	`i.`
`ganada`	`가.`
`chosung`	`ㄱ.`

</td> </tr> <tr> <td><code>levelText</code></td> <td>string</td> <td>

Valid only when format is bullet.

'editor.list.customList': [
    { format: 'decimal' },
    { format: 'bullet', levelText: '□' },
    { format: 'bullet', levelText: '♧' },
    { format: 'decimalEnclosedCircle' }
]

</td> </tr> <tr> <td><code>runStyle</code></td> <td>Object</td> <td>

Release 3.2.2509 and above, Release 2.20.2509 and above.

Adding the runStyle property lets you add custom styles to the bullet.

Key	Type	Description	Example values
`color`	string \| Object	Text color	`'red'`, `'#ff0000'`, `{ r: 255, g: 0, b: 0 }`
`fontSize`	Object	Font size	`{ value: 12, unit: 'pt' }`
`underline`	boolean	Underline	`true` / `false`
`italic`	boolean	Italic	`true` / `false`
`strike`	boolean	Strikethrough	`true` / `false`
`fontWeight`	number	Font weight	`400`, `700`
`backgroundColor`	string \| Object	Background color	`'yellow'`, `'#ffff00'`, `{ r: 255, g: 255, b: 0 }`

'editor.list.customList': [
    {
        format: 'bullet',
        levelText: '★',
        runStyle: {
            color: 'yellow',
            fontSize: { value: 12, unit: 'pt' },
            underline: true,
            italic: true,
            strike: true,
            fontWeight: 700,
            backgroundColor: { r: 135, g: 206, b: 250 }
        }
    }
]

</td> </tr> <tr> <td><code>distance</code></td> <td>number</td> <td>

Release 3.3.1 and above, Release 2.21.1 and above.

Setting the distance value lets you adjust the spacing between the bullet and the text. (default: -10)

Negative values widen the gap between the bullet and the text.
Positive values make the bullet and text overlap each other.

'editor.list.customList': [
    { format: 'bullet', levelText: '★', distance: -20 },
    { format: 'bullet', levelText: '★', distance: -10 },
    { format: 'bullet', levelText: '★', distance: 0 },
    { format: 'bullet', levelText: '★', distance: 20 },
]

</td> </tr> </tbody> </table> <table> <thead> <tr><th><code>distance: -10</code> (default)</th><th><code>distance: -5</code></th><th><code>distance: 0</code></th></tr> </thead> <tbody> <tr> <td>

distance -10

</td> <td>

distance -5

</td> <td>

distance 0

</td> </tr> </tbody> </table>

Application Examples

Bullet configuration example

'editor.list.customList': [
    { format: 'decimal' },
    { format: 'bullet', levelText: '□' },
    { format: 'bullet', levelText: '♧' },
    { format: 'decimalEnclosedCircle' }
]

Basic bullet example

Style configuration example

Release 3.2.2509 and above, Release 2.20.2509 and above.

'editor.list.customList': [
        {
            format: 'bullet',
            levelText: '★',
            distance: -10, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: 'yellow',
                fontSize: { value: 12, unit: 'pt' },
                underline: true,
                italic: true,
                strike: true,
                fontWeight: 700,
                backgroundColor: { r: 135, g: 206, b: 250 }
            }
        },
        {
            format: 'bullet',
            levelText: '＠',
            distance: -5, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: { r: 255, g: 123, b: 45 },
                fontSize: { value: 24, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 235, g: 55, b: 12 }
            }
        },
        {
            format: 'bullet',
            levelText: '#',
            distance: 0, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: { r: 45, g: 255, b: 45 },
                fontSize: { value: 32, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: 'red'
            }
        },
        {
            format: 'bullet',
            levelText: '♤',
            distance: -5, // 3.3.1, 2.21.1 and above
            runStyle: {
                color: '#634948',
                fontSize: { value: 40, unit: 'pt' },
                italic: true,
                strike: true,
                backgroundColor: { r: 55, g: 12, b: 235 }
            }
        },
    ]

Style example

Related Information

Bullet Number Settings