vscode-markdown Markdown Header Coloring

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

Jan 17 '20 08:01 Stanzilla

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

Jan 21 '20 09:01 yzhang-gh

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

Jan 21 '20 15:01 Stanzilla

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.

Jan 22 '20 01:01 yzhang-gh

Sounds great, looking forward to it!

Jan 22 '20 02:01 Stanzilla

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

Mar 29 '20 10:03 Stanzilla

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

Mar 29 '20 14:03 yzhang-gh

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",
...

I also do something like this, but does anyone know if it is possible to refer to symbolic names like "default" instead of hardcoding RGB colors. For a colorful approach this hardcoding makes sense but if instead I wanted to do the opposite, to remove all colorization of headers and use only weight and size to differentiate headers, then I don't want my customization to depend on each particular theme, for example:

    "editor.tokenColorCustomizations": {
        "[Solarized Light]": {
            "textMateRules": [
                {
                    ....
                    "settings": { "foreground": "#333333" }  <------
                }
            ],
        }
    },

That only works for Solarized Light.

Oct 25 '21 23:10 memeplex