Target Octothorpe headings in Markdown Themes

Syntaxes & Themes
1

I got a little help on Slack for this, but need additional help to get it working.

Is there a way with theming to make the # character for markdown headers grow the same as the text? In other words, I’m trying a theme where header level 1 is “extra large”. I’d like it’s # to also be extra large. I can see how to color and size ALL the # for every header level, but not to specify styles for each one individually (levels 1-6).

Here’s what I’ve tried:

Theme code:

"markup.heading02": {
      "name": "Markup",
      "settings": {
        "foreground": "headingMarkup",
        "fontWeight": "bold",
        "fontSize": "large"
      }
    },

Syntax code:

{
      "match": "^(##) ",
      "exclusive": true,
      "comment": "Markdown heading like ##",
      "captures": {
        "1": {
          "scope": "markup.heading02"
        },
        "2": {
          "scope": "text.heading02"
        },
        "3": {
          "scope": "markup.heading"
        }
      }
    },

also this

{
      "match": "^(##) ",
      "exclusive": true,
      "comment": "Markdown heading like ##",
      "captures": {
        "1": {
          "scope": "markup.heading02"
        }
      }
    },

Still getting Octothorpes in the headings that are sized “normal” instead of “large”. In other words, the heading text is large but not the # header character.

2

The default Markdown syntaxes all assign markup.heading as the scope for the “#” prefix. It seem like you are on the right track to fix that, but it’s hard to say where it’s going wrong with just the fragments. Could you post your whole syntax/theme as unlisted in the directory and share the links?

It appears you are trying to add a separate pattern just to find the markup, which means I assume you are also leaving the original pattern which finds the full heading text. If so, that would not really be the best way to do it, you would want to just edit the original pattern. The default “Markdown” syntax, that looks like:

  {
    "match": "^(##) ([^\\n]+?)(\\1?)$",
    "exclusive": true,
    "comment": "Markdown heading like ##",
    "captures": {
      "1": {
        "scope": "markup.heading"
      },
      "2": {
        "scope": "text.heading02"
      },
      "3": {
        "scope": "markup.heading"
      }
    }
  }

If you changed that to:

  {
    "match": "^(##) ([^\\n]+?)(\\1?)$",
    "exclusive": true,
    "comment": "Markdown heading like ##",
    "captures": {
      "1": {
        "scope": "markup.heading02"
      },
      "2": {
        "scope": "text.heading02"
      },
      "3": {
        "scope": "markup.heading02"
      }
    }
  }

Then your new markup.heading02 scope in your theme would be used.

Since this is marked as exclusive: true, once that text is found and treated as a heading, it no further patterns will be evaluated against that text. docs.

3

Thanks! I just changed the “exclusive” in the syntax for appropriate headings to “false” and that fixed it. Thanks! (I was trying to get by without having to study the docs too much since after this one I’m pretty much done making themes/syntaxes–my apologies for not reviewing the docs more carefully, with yours there’s always an answer in there.)