如何在 VS Code 编辑器中按标题级别更改 Markdown 标题颜色？

Posted 2023-04-14

【中文标题】如何在 VS Code 编辑器中按标题级别更改 Markdown 标题颜色？

【英文标题】：How do I change markdown heading color by heading level in VS Code editor?

【发布时间】：2020-07-25 14:43:21

【问题描述】：

我的问题类似于this one，但给出的答案是针对 Vim 的，而我需要一个针对 VS Code 的答案。我是一个真正的新手，我试图自己解决这个问题，但这些尝试都失败了：

Markdown Preview GitHub Styling - 说它允许用户定义的自定义 css，但它的样式是 html 预览，而不是编辑器中的文本

Markdown Theme Kit - 指向自定义 .css 文件，但包含的文件并没有告诉我如何针对不同的标题级别进行不同的操作

Markdown Header Coloring - 声称可以做到这一点，但是当我尝试放入用户定义的 css 以赋予每个标题级别不同的颜色时，我仍然会在相同级别的标题之间看到颜色变化，即使在关闭/重启 VS Code。

非常感谢您的帮助。

【参考方案1】：

在没有扩展名的编辑器中有一种内置方式来设置文本样式，包括 Markdown 标题，使用 VSCode's Colour Theme 设置：

打开你的settings.json(~/.config/Code/User/settings.json)或Ctrl+p“设置”，并在***之间插入for example:

"editor.tokenColorCustomizations": 
    "textMateRules": [
      
          "scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
          "settings": 
              "foreground": "#9cecfb",
              "fontStyle": "bold",
          
      ,
      
          "scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
          "settings": 
              "foreground": "#83a4d4",
          
       
    ]

【参考方案2】：

我遇到了同样的问题，并找到了使用 VSCode 扩展 "Markdown header coloring" 的方法

基本上你必须这样做

安装扩展程序 在 settings.json 中设置一些自定义设置。您可以在“用户定义的标题颜色”部分中找到自定义设置的示例

不要忘记

在每次修改后重新加载窗口：打开Command Palette → 输入Reload window 干杯