Vscode-markdown: Markdown Header Coloring

[Stanzilla]

What is the problem?

I would love to be able to differentiate markdown headers with colors like https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-markdown-header-coloring offers but without the unneeded complexity of that extension.

How can I reproduce it?

N/A

Is there any error message in the console?

No

[yzhang-gh]

This is interesting. I like the idea which is to provide some visual hints about which sections we are in.

[Stanzilla]

Awesome, thank you for considering, I currently do it like this:

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
          "scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#9cecfb",
          }
      },
      {
          "scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#83a4d4",
          }
      },
      {
          "scope": "heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#2bc0e4",
          }
      },
      {
          "scope": "heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#1fa2ff",
          }
      },
      {
          "scope": "heading.5.markdown entity.name.section.markdown, heading.5.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#ff6e7f",
          }
      },
      {
          "scope": "heading.6.markdown entity.name.section.markdown, heading.6.markdown punctuation.definition.heading.markdown",
          "settings": {
              "foreground": "#9796f0",
          }
      }
    ]
  },

[yzhang-gh]

I tried it and I think it can be better to not only colorize the headings but also hierarchically distinguish between sections (so that you can clearly see there are X sections and Y subsections).

I would like to think more about it and collect more feedback from you and potential users.

[Stanzilla]

Sounds great, looking forward to it!

[Stanzilla]

@yzhang-gh I just came across this again, would folding also be possible?

[yzhang-gh]

would folding also be possible?

VSCode has this feature built-in.

The following languages already provide syntax aware folding: Markdown, HTML, CSS, LESS, SCSS, and JSON.
https://code.visualstudio.com/docs/editor/codebasics#_folding