How to make nested markdown bullet lists have different bullet styles in vscode

Question

I want to have vscode render lists in markdown with bullet points instead of the asterisk (*) character, so that the top level would use •, the next one would use ◦, etc.

My first approach was to create a ligature font with FontForge that replaced * with ◦, space plus * with ◦, two spaces plus * with ▪, and so on, but using ligatures has the obvious issue that it's not context-sensitive, so all asterisks would be replaced, not just the ones leading a line.

Looking at the vscode text decoration API, it seems limited to just changing the font style and color, and not the font family. Is there some way to visually replace the characters in vscode? They should still be saved as asterisks in the source code to be valid markdown.

Answer 1

As of VS Code 1.27, your best bet is to write an extension that adds decorators on the * characters to do this. Take a look at the decorator example extension to get started

I do not think the current vscode API allows you to overwrite the * text itself, but you can try emulate this by making the * character transparent and adding your custom bullet point after it:

const level1DecorationType = vscode.window.createTextEditorDecorationType({
    color: 'transparent',
    after: {
        contentText: "◦"
    }
});

Then your extension just has to apply this style to the bullet points in the document.

Unofficially, you can also use this decorator hack to replace the * character entirely:

const level1DecorationType = vscode.window.createTextEditorDecorationType({
    color: 'transparent',
    textDecoration: `none; display: inline-block; width: 0;`,
    after: {
        contentText: "◦"
    }
});

However that is not guaranteed to work properly or continue working in the future.

Consider opening a feature request to get better decorators support for this