How do I change markdown heading color by heading level in VS Code editor?

Question

My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:

• Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor

• Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels

• Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.

Help is very appreciated.

Answer 1

There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:

Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert 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",
          }
       }
    ]
}