【问题标题】:How to make nested markdown bullet lists have different bullet styles in vscode如何在vscode中使嵌套的markdown项目符号列表具有不同的项目符号样式
【发布时间】:2019-02-03 09:11:31
【问题描述】:

我希望在 Markdown 中使用项目符号而不是星号 (*) 字符来呈现 vscode 列表,这样顶层将使用 •,下一个将使用 ◦,等等。

我的第一个方法是使用 FontForge 创建一个连字字体,将 * 替换为 ◦,空格加 * 替换为 ◦,两个空格加 * 替换为 ▪,等等,但使用连字有一个明显的问题,即它不区分上下文, 所以所有的星号都会被替换,而不仅仅是那些领先的。

查看vscode text decoration API,似乎仅限于更改字体样式和颜色,而不是字体系列。有什么方法可以直观地替换 vscode 中的字符吗?它们仍应在源代码中保存为星号才能成为有效的降价。

【问题讨论】:

  • 你说的是markdown语法高亮还是预览面板?无论哪种方式,您都可以使用 CSS 来实现。
  • 关于编辑器窗口,不是预览;预览已经有不同的项目符号样式。我还没有找到一种在装饰 API 之外使用 CSS 设置编辑器语法样式的方法,并且只支持非常有限的 CSS。
  • 是的,似乎与 Atom 不同,没有主题的自定义 CSS 是 not supported by VSCode。我不太了解vscode,但我猜正确的方法是制作一个主题并自定义其textmate grammar以进行降价。也许看到code.visualstudio.com/docs/extensions/…

标签: visual-studio-code markdown vscode-extensions monaco-editor ligature


【解决方案1】:

从 VS Code 1.27 开始,最好的办法是编写一个扩展,在 * 字符上添加装饰器来执行此操作。看看decorator example extension 即可开始使用

我认为当前的 vscode API 不允许您覆盖 * 文本本身,但您可以尝试通过使 * 字符透明并在其后添加您的自定义项目符号点来模拟这一点:

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

那么您的扩展只需将此样式应用于文档中的项目符号。

非正式地,您也可以使用这个装饰器技巧来完全替换 * 字符:

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

但不保证将来可以正常工作或继续工作。

考虑opening a feature request 以获得更好的装饰器支持

【讨论】:

  • 谢谢,这是有道理的;它实际上让我想起了我在哪里看到添加到编辑器的元素 - 在 CSS 中,它添加了颜色预览,但它们效果不佳并且经常滞后。