如何在 VS Code 中使嵌套的 Markdown 项目符号列表具有不同的项目符号样式？

Question

我希望 VS Code 在 Markdown 中渲染列表，其中包含项目符号点而不是星号 (*) 字符，这样顶层将使用 •，下一级将使用 ◦，等等。

我的第一个方法是使用 FontForge 创建一种连字字体，将 * 替换为 ◦，空格加 * 为 ◦，两个空格加 * 为 ▪，等等，但使用连字有一个明显的问题，即它不上下文相关，因此所有星号都将被替换，而不仅仅是前导星号。

查看 VS Code 文本装饰 API，似乎仅限于更改字体样式和颜色，而不是字体系列。有什么方法可以直观地替换 VS Code 中的字符吗？它们仍然应该在源代码中保存为星号才能成为有效的 markdown。

Answer 1

从 VS Code 1.27 开始，最好的办法是编写一个扩展，在

*

字符上添加装饰器来执行此操作。查看 装饰器示例扩展 开始使用

我认为当前的 vscode API 不允许您覆盖

*

文本本身，但您可以尝试通过使

*

字符透明并在其后添加自定义项目符号点来模拟这一点：

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

然后您的扩展只需将此样式应用于文档中的项目符号即可。

非官方地，您还可以使用此装饰器 hack 来完全替换

*

字符：

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

但是，这不能保证正常工作或将来继续工作。

考虑打开功能请求以获得更好的装饰器支持

Answer 2

为什么不这样做

<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>

您也可以使用图像；

Answer 3

对于真正关心 Markdown 预览而不是编辑器的读者，我不知道如何使用扩展来控制它，但是通过设置，您可以使用

markdown.styles

设置，并指向您执行某些操作的 CSS 文件像这样：

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. */

根据口味调整上述内容。例如，如果您不希望在中间嵌套级别中有有序列表时重置循环，则省略

>

中的

li > ul

。

另请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type。