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

user_168382 0
Viewed 3665

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.

ligature monaco-editor vscode-extensions visual-studio-code markdown
1 Answers

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

user_3061490
Related