Как сделать, чтобы у вложенных списков маркеров уценки были разные стили маркера в vscode

Question

Я хочу, чтобы списки рендеринга vscode были в уценке с точками маркера вместо символа звездочки (*), чтобы верхний уровень использовал •, следующий - ◦ и т. Д.

Мой первый подход состоял в том, чтобы создать лигатурный шрифт с помощью FontForge, который заменил * на ◦, пробел плюс * на ◦, два пробела плюс * на ▪ и т. Д., Но использование лигатур имеет очевидную проблему: он не чувствителен к контексту, поэтому все Звездочки будут заменены, а не только те, которые ведут линию.

Глядя на API оформления текста vscode, кажется, что он ограничен только изменением стиля и цвета шрифта, а не семейством шрифтов. Есть ли способ визуально заменить символы в vscode? Они по-прежнему должны быть сохранены в виде звездочек в исходном коде, чтобы быть действительной уценкой.

Answer 1

Начиная с кода VS 1.27, вам лучше всего написать расширение, которое добавляет декораторы на * персонажи для этого. Взгляните на пример расширения декоратора, чтобы начать

Я не думаю, что текущий API vscode позволяет перезаписать * сам текст, но вы можете попробовать подражать этому, сделав * Прозрачный символ и добавьте свой собственный пункт после него:

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: "◦"
    }
});

Однако это не гарантирует правильной работы или продолжения работы в будущем.

Подумайте об открытии запроса функции, чтобы получить лучшую поддержку декораторов для этого

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.