How to customize the highlight color?

[lzl19971215]

Hi, Is there a way to customize the color of different gramma words? For example: I want to render "const", "let" with color that is more distinguish(say yellow) from the variable(like "messageGridRef") color? Thanks!

[leafOfTree]

Hi, If you're using vim bundled typescript syntax, you can change all const, let, and var syntax by (see :h hi-link)

hi! link typescriptVariable Type

Otherwise,

For the first parameter (which syntax to change, typescriptVariable), you can put the cursor on const and run the below command. The last line is its syntax name

for id in synstack(line('.'), col('.')) | echom synIDattr(id, 'name') | endfor

For the second (the rendering color, Type), you can see :h group-name for other syntax names.

[lzl19971215]

Hi, thanks for this guide, I successfully changed the highlight color of typescriptVariable and some other group by using hi-link or directly reset the group's color. But there are some syntax-group that I failed to customize it's color, such as: typescriptIdentifierName(props in the image), typescriptProp(dialogInfo in the image). You can see I have linked typescriptProp to ShallowBlue group with foreground color: #9cdcfe, but the color is not correct. Is there any other things I miss? Thanks!

[leafOfTree]

hi, seems that both syntax groups are defined with transparent like

syntax match   typescriptProp contained /\K\k*!\?/
  \ transparent
  \ contains=@props
  \ nextgroup=@afterIdentifier
  \ skipwhite skipempty

You can re-define it without the transparent

syntax match   typescriptIdentifierName        /\<\K\k*/
  \ nextgroup=@afterIdentifier
  \ contains=@_semantic
  \ skipnl skipwhite


syntax match   typescriptProp contained /\K\k*!\?/
  \ contains=@props
  \ nextgroup=@afterIdentifier
  \ skipwhite skipempty