Is it possible to have multicolored headings in markdown syntax in at least one of these editors: Sublime Text 3, Vim or Visual Studio Code?

Question

Essentially I would like for my headings to look like this:

How could I accomplish this in markdown syntax? I prefer sublime text but would be happy if I can make this happen in Sublime Text 3, Vim or Visual Studio Code. Lastly, if getting the subheadings to produce multicolors is difficult, then, how could I change the hashtag color of all headings to the same color. For example, all of my headings would have green hashtags but the heading font color would be #FFFFFF.

Thank you for your help.

Intine

I found in vim that I can change the color of each markdown heading (markdownH1, markdownH2, etc) but this isn't what I am looking for --- I would like to change the color of the hashtag (#) for each heading/subheading or if not possible, just the hashtag color. – Intine

For VSCode, see this answer. – Farmelo

Answer 1

In Vim, you can override your color scheme by adding the following in a new file named ~/.vim/after/syntax/markdown.vim:

syn match    customHeader1     "^# "
syn match    customHeader2     "^## "
syn match    customHeader3     "^### "
syn match    customHeader4     "^#### "
syn match    customHeader5     "^##### "

highlight customHeader1 ctermfg=34
highlight customHeader2 ctermfg=32
highlight customHeader3 ctermfg=127
highlight customHeader4 ctermfg=45
highlight customHeader5 ctermfg=220

It creates 5 syntax groups (customHeader1 to customHeader4) matching the given regexes. Then it defines the colors for those groups.

34, 32, 127, 45, 220 are the colors, They should match your example. It renders as follow:

Also, you need to have:

syntax on

in your .vimrc

Lap

The default syntax for Markdown in Sublime only differentiates between level 1 and level 2 headers (everything else is just a generic heading). So while possible I think this would need syntax tweaks as well. – Capitalist

Answer 2

With Sublime Text 3, you can also define one specific color for 3 header levels.

If you have already a theme with specific markdown colors, edit your .tmTheme file and search for

<string>markup.heading, markup.heading punctuation</string>

This is the default heading color that is used for all heading levels.

If you duplicate the parent <dict> block for this entry, you can put a specific color for 1st heading level (# in markdown) by changing <string> like this :

<string>markup.heading.1, markup.heading.1 punctuation</string>

if you duplicate one more you can change the 2nd level color (## in markdown) :

<string>markup.heading.2, markup.heading.2 punctuation</string>

Other levels ### etc. are not defined so you cannot add specific colors for them (but it is in fact still possible if you modify your Markdown.sublime-syntax file and extends it to other heading levels, with the same type of patterns code used for level 1 and level 2 headings)

Tessatessellate

Answer 3

I just checked by adjusting my settings and it is possible in the latest vscode

To get the above set the textMateRules to the following to your json settings

"editor.tokenColorCustomizations": {
   "textMateRules": [
   ]
{
    "scope": "heading.1.markdown",
    "settings": {
      "fontStyle": "bold underline",
      "foreground": "#8596c5a9"
    }
  },
  {
    "scope": "heading.2.markdown",
    "settings": {
      "fontStyle": "bold",
      "foreground": "#9c7964" 
    }
  },
  {
    "scope": "heading.3.markdown",
    "settings": {
      "fontStyle": " italic",
      "foreground": "#cd2d87a9"
    }
  },
  {
    "scope": "heading.4.markdown",
    "settings": {
      "fontStyle": " italic",
      "foreground": "#b8b64d" 
    }
  },
  {
    "scope": "heading.5.markdown",
    "settings": {
      "fontStyle": " italic",
      "foreground": "#da2a2a" 
    }
  }
}    

Dashiell