How can I make nested markdown bullet lists have different bullet styles in VS Code?

Question

I want to have VS Code 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 VS Code 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 VS Code? They should still be saved as asterisks in the source code to be valid markdown.

Pirog

are you talking about markdown syntax highlighting or the preview pane? Either way, you might achieve this with CSS. – Heelandtoe

About the editor window, not preview; the preview already has different bullet point styles. I've not found a way to style the editor syntax with CSS outside of the decoration API, and that only supports very limited CSS. – Pirog

yes, it seems that unlike in Atom, custom CSS without a theme is not supported by VSCode. I don't know vscode very well, but I'm guessing the proper way is to make a theme and customize its textmate grammar for markdown. Maybe see code.visualstudio.com/docs/extensions/… – Heelandtoe

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

Compliant

Thanks, this makes sense; it actually reminded me where I'd seen elements appended to the editor – in CSS, where it adds a color preview, but they don't work very well and often lag a bit. – Pirog

Answer 2

For readers who actually care about the Markdown Preview and not the editor, I don't know about controlling it with an extension, but with settings, you can use the markdown.styles setting, and point to a CSS file where you do something like this:

ul > li {
   list-style-type: disc;
}
ul > li > ul > li {
   list-style-type: circle;
}
ul > li > ul > li > ul > li {
   list-style-type: square;
}
/* etc. */

Adjust the above to taste. For example, if you don't want the cycle to reset if there's an ordered list in a middle nesting level, then omit the > in li > ul.

See also https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type.

Selfinterest

Answer 3

Why not do this

<ul>
    <li>Simple Function to create a column named "status". 
    <ul>
        <li style="list-style-type: upper-roman;">0 = Same</li>
        <li>1 = Swap</li>
        <li>0 = Changed</li>
    </ul>
    </li>
</ul>

You could use Images as well;

Hypogenous