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",
          }
       }
    ]
}

Answer 2

I faced the same issue and find a way with the VSCode extension "Markdown header coloring"

Basically you have to

• install the extension
• set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
• do not forget to reload the window after each modification: open Command Palette → type Reload window Cheers