tsx syntax highlighting does not work in Markdown files.

devstefancho commented 1 year ago

Describe the highlighting problem

I've installed the tsx language parser by running :TSInstall tsx. I've confirmed it's installed by checking with :TSInstallInfo, which shows that tsx is indeed installed.
However, tsx code blocks within Markdown files are not syntax highlighted properly—they just appear in a single color (green).

Example snippet that causes the problem

Click Event without passing parameter

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget.name);
};

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log(e.currentTarget.name);
};

return (
  <div>
    <button name="ok" onClick={handleClick}>
      Ok
    </button>
    <button name="cancel" onClick={handleClick}>
      Cancel
    </button>
  </div>
);

Tree-sitter parsing result

section [0, 0] - [24, 0]
  atx_heading [0, 0] - [1, 0]
    atx_h2_marker [0, 0] - [0, 2]
    heading_content: inline [0, 2] - [0, 40]
  fenced_code_block [2, 0] - [7, 0]
    fenced_code_block_delimiter [2, 0] - [2, 3]
    info_string [2, 3] - [2, 13]
      language [2, 3] - [2, 13]
    block_continuation [3, 0] - [3, 0]
    code_fence_content [3, 0] - [6, 0]
      lexical_declaration [3, 0] - [5, 2]
        variable_declarator [3, 6] - [5, 1]
          name: identifier [3, 6] - [3, 17]
          value: arrow_function [3, 20] - [5, 1]
            parameters: formal_parameters [3, 20] - [3, 60]
              required_parameter [3, 21] - [3, 59]
                pattern: identifier [3, 21] - [3, 22]
                type: type_annotation [3, 22] - [3, 59]
                  generic_type [3, 24] - [3, 59]
                    name: nested_type_identifier [3, 24] - [3, 40]
                      module: identifier [3, 24] - [3, 29]
                      name: type_identifier [3, 30] - [3, 40]
                    type_arguments: type_arguments [3, 40] - [3, 59]
                      type_identifier [3, 41] - [3, 58]
            body: statement_block [3, 64] - [5, 1]
              expression_statement [4, 2] - [4, 36]
                call_expression [4, 2] - [4, 35]
                  function: member_expression [4, 2] - [4, 13]
                    object: identifier [4, 2] - [4, 9]
                    property: property_identifier [4, 10] - [4, 13]
                  arguments: arguments [4, 13] - [4, 35]
                    member_expression [4, 14] - [4, 34]
                      object: member_expression [4, 14] - [4, 29]
                        object: identifier [4, 14] - [4, 15]
                        property: property_identifier [4, 16] - [4, 29]
                      property: property_identifier [4, 30] - [4, 34]
      block_continuation [4, 0] - [4, 0]
      block_continuation [5, 0] - [5, 0]
      block_continuation [6, 0] - [6, 0]
    fenced_code_block_delimiter [6, 0] - [6, 3]
  fenced_code_block [8, 0] - [24, 0]
    fenced_code_block_delimiter [8, 0] - [8, 3]
    info_string [8, 3] - [8, 6]
      language [8, 3] - [8, 6]
    block_continuation [9, 0] - [9, 0]
    code_fence_content [9, 0] - [23, 0]
      block_continuation [10, 0] - [10, 0]
      block_continuation [11, 0] - [11, 0]
      block_continuation [12, 0] - [12, 0]
      block_continuation [13, 0] - [13, 0]
      block_continuation [14, 0] - [14, 0]
      block_continuation [15, 0] - [15, 0]
      block_continuation [16, 0] - [16, 0]
      block_continuation [17, 0] - [17, 0]
      block_continuation [18, 0] - [18, 0]
      block_continuation [19, 0] - [19, 0]
      block_continuation [20, 0] - [20, 0]
      block_continuation [21, 0] - [21, 0]
      block_continuation [22, 0] - [22, 0]
      block_continuation [23, 0] - [23, 0]
    fenced_code_block_delimiter [23, 0] - [23, 3]

Example screenshot

Expected behavior

Syntax highlight with tsx code

Output of `:checkhealth nvim-treesitter`

==============================================================================
nvim-treesitter: require("nvim-treesitter.health").check()

Installation ~
- OK `tree-sitter` found 0.20.7 (b268e412ad4848380166af153300464e5a1cf83f) (parser generator, only needed for :TSInstallFromGrammar)
- OK `node` found v20.2.0 (only needed for :TSInstallFromGrammar)
- OK `git` executable found.
- OK `cc` executable found. Selected from { vim.NIL, "cc", "gcc", "clang", "cl", "zig" }
  Version: Apple clang version 13.1.6 (clang-1316.0.21.2.3)
- OK Neovim was compiled with tree-sitter runtime ABI version 14 (required >=13). Parsers must be compatible with runtime ABI.

OS Info:
{
  machine = "arm64",
  release = "21.3.0",
  sysname = "Darwin",
  version = "Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000"
} ~

Parser/Features         H L F I J
  - bash                ✓ ✓ ✓ . ✓
  - blueprint           ✓ . . . .
  - comment             ✓ . . . .
  - css                 ✓ . ✓ ✓ ✓
  - graphql             ✓ . . ✓ ✓
  - html                ✓ ✓ ✓ ✓ ✓
  - javascript          ✓ ✓ ✓ ✓ ✓
  - jsdoc               ✓ . . . .
  - json                ✓ ✓ ✓ ✓ .
  - jsonnet             ✓ . . . .
  - lua                 ✓ ✓ ✓ ✓ ✓
  - markdown            ✓ . ✓ ✓ ✓
  - markdown_inline     ✓ . . . ✓
  - mermaid             ✓ . . . .
  - python              ✓ ✓ ✓ ✓ ✓
  - tsx                 ✓ ✓ ✓ ✓ ✓
  - typescript          ✓ ✓ ✓ ✓ ✓
  - vim                 ✓ ✓ ✓ . ✓
  - vimdoc              ✓ . . . ✓
  - yaml                ✓ ✓ ✓ ✓ ✓

  Legend: H[ighlight], L[ocals], F[olds], I[ndents], In[j]ections
         +) multiple parsers found, only one will be used
         x) errors found in the query, try to run :TSUpdate {lang} ~


### Output of `nvim --version`

```text
NVIM v0.9.1
Build type: Release
LuaJIT 2.1.0-beta3

   system vimrc file: "$VIM/sysinit.vim"
  fall-back for $VIM: "/opt/homebrew/Cellar/neovim/0.9.1/share/nvim"

Run :checkhealth for more info


### Additional context

here is my lazy-lock.json for another package infos

{
  "ChatGPT.nvim": { "branch": "main", "commit": "af509fceb70cab1867a611f3d8fad6d3e7760fb0" },
  "Comment.nvim": { "branch": "master", "commit": "c8043290f2d77f61025494d839d88e414608c460" },
  "LuaSnip": { "branch": "master", "commit": "500981ff6cefc7343e3959ef0f939bd0bfd49ba9" },
  "bufferline.nvim": { "branch": "main", "commit": "243893ba9d5d1049dd451a25cab32ec7f8f67bcf" },
  "cmp-buffer": { "branch": "main", "commit": "3022dbc9166796b644a841a02de8dd1cc1d311fa" },
  "cmp-nvim-lsp": { "branch": "main", "commit": "0e6b2ed705ddcff9738ec4ea838141654f12eeef" },
  "codi.vim": { "branch": "master", "commit": "83b9859aaf8066d95892e01eb9c01571a4b325dd" },
  "copilot.vim": { "branch": "release", "commit": "1358e8e45ecedc53daf971924a0541ddf6224faf" },
  "emmet-vim": { "branch": "master", "commit": "def5d57a1ae5afb1b96ebe83c4652d1c03640f4d" },
  "gitsigns.nvim": { "branch": "main", "commit": "f868d82a36f7f7f5e110eb0a9659993984f59875" },
  "harpoon": { "branch": "master", "commit": "21f4c47c6803d64ddb934a5b314dcb1b8e7365dc" },
  "indent-blankline.nvim": { "branch": "master", "commit": "7075d7861f7a6bbf0de0298c83f8a13195e6ec01" },
  "lazy.nvim": { "branch": "main", "commit": "f145e6f42a56306c5536e9efbfe41f7efbec285d" },
  "lspsaga.nvim": { "branch": "main", "commit": "c475ace5b8882631b351ef7c3e8078ca9ebbb751" },
  "lualine.nvim": { "branch": "master", "commit": "05d78e9fd0cdfb4545974a5aa14b1be95a86e9c9" },
  "mason-lspconfig.nvim": { "branch": "main", "commit": "5230617372e656d4a2e1e236e03bf7e7b4b97273" },
  "mason-null-ls.nvim": { "branch": "main", "commit": "54d702020bf94e4eefd357f0b738317af30217eb" },
  "mason.nvim": { "branch": "main", "commit": "7d7efc738e08fc5bee822857db45cb6103f0b0c1" },
  "neodev.nvim": { "branch": "main", "commit": "91bebf70e2c50c1d298752b74a34ca9da3c04f85" },
  "nui.nvim": { "branch": "main", "commit": "d5a82aae64426a805e19d8ef5a379292f9dc55d3" },
  "null-ls.nvim": { "branch": "main", "commit": "c89333e034a8daba654ebfcf9a4ec9f87765f01e" },
  "nvim-autopairs": { "branch": "master", "commit": "59df87a84c80a357ca8d8fe86e451b93ac476ccc" },
  "nvim-cmp": { "branch": "main", "commit": "fc0f694af1a742ada77e5b1c91ff405c746f4a26" },
  "nvim-colorizer.lua": { "branch": "master", "commit": "36c610a9717cc9ec426a07c8e6bf3b3abcb139d6" },
  "nvim-dap": { "branch": "master", "commit": "7c1d47cf7188fc31acdf951f9eee22da9d479152" },
  "nvim-dap-ui": { "branch": "master", "commit": "c020f660b02772f9f3d11f599fefad3268628a9e" },
  "nvim-dap-virtual-text": { "branch": "master", "commit": "57f1dbd0458dd84a286b27768c142e1567f3ce3b" },
  "nvim-dap-vscode-js": { "branch": "main", "commit": "03bd29672d7fab5e515fc8469b7d07cc5994bbf6" },
  "nvim-lspconfig": { "branch": "master", "commit": "664de12a7816dfa348bb475607edfa4fe0122025" },
  "nvim-tree.lua": { "branch": "master", "commit": "59e65d88db177ad1e6a8cffaafd4738420ad20b6" },
  "nvim-treesitter": { "branch": "master", "commit": "ab3bf7d95615098f47596ab245282c03149195e7" },
  "nvim-ts-autotag": { "branch": "main", "commit": "40615e96075c743ef47aaf9de966dc348bec6459" },
  "nvim-ts-context-commentstring": { "branch": "main", "commit": "0bf8fbc2ca8f8cdb6efbd0a9e32740d7a991e4c3" },
  "nvim-ufo": { "branch": "main", "commit": "45aede6f5c4981156df3ddeeae01c4290e43e104" },
  "nvim-web-devicons": { "branch": "master", "commit": "2a125024a137677930efcfdf720f205504c97268" },
  "obsidian.nvim": { "branch": "main", "commit": "f509468fa7e8936919e32c0626b477a7ea2b70b7" },
  "playground": { "branch": "master", "commit": "2b81a018a49f8e476341dfcb228b7b808baba68b" },
  "plenary.nvim": { "branch": "master", "commit": "253d34830709d690f013daf2853a9d21ad7accab" },
  "promise-async": { "branch": "main", "commit": "e94f35161b8c5d4a4ca3b6ff93dd073eb9214c0e" },
  "rose-pine": { "branch": "main", "commit": "15aac8c529bb38ac39fdb22f7be7f37c0e39dd0c" },
  "sqlite.lua": { "branch": "master", "commit": "b7e28c8463254c46a8e61c52d27d6a2040492fc3" },
  "telescope-dap.nvim": { "branch": "master", "commit": "313d2ea12ae59a1ca51b62bf01fc941a983d9c9c" },
  "telescope-file-browser.nvim": { "branch": "master", "commit": "6cf29d5139601993343c4e70ee2d1f67959d9cc5" },
  "telescope-frecency.nvim": { "branch": "master", "commit": "0a4a521471141ae3c94ff0ebcffcaff3c3aad147" },
  "telescope-project.nvim": { "branch": "master", "commit": "7c64b181dd4e72deddcf6f319e3bf1e95b2a2f30" },
  "telescope.nvim": { "branch": "master", "commit": "c1a2af0af69e80e14e6b226d3957a064cd080805" },
  "toggleterm.nvim": { "branch": "main", "commit": "95204ece0f2a54c89c4395295432f9aeedca7b5f" },
  "tokyonight.nvim": { "branch": "main", "commit": "161114bd39b990995e08dbf941f6821afbdcd666" },
  "true-zen.nvim": { "branch": "main", "commit": "98740c76254c65576ec294551028b65081053588" },
  "typescript.nvim": { "branch": "main", "commit": "f66d4472606cb24615dfb7dbc6557e779d177624" },
  "vifm.vim": { "branch": "master", "commit": "0300c693975b378802ffdf305187e1cf3f636c5e" },
  "vim-illuminate": { "branch": "master", "commit": "a2907275a6899c570d16e95b9db5fd921c167502" },
  "vim-jsdoc": { "branch": "master", "commit": "6e5bc2a1f98a69e4902081c9f5969b228a7a5fd6" },
  "vim-surround": { "branch": "master", "commit": "3d188ed2113431cf8dac77be61b842acb64433d9" },
  "vscode-js-debug": { "branch": "main", "commit": "d7ef9e6bf051feacfad7453c333766f1f3622dbc" }
}

For more information of the config from my init.lua

clason commented 1 year ago

The tsx parser is weird; it's actually one parser handling two grammars (typescript and tsx), so I'm not surprised that something is not working.

@steelsojka

lucario387 commented 1 year ago

I don't really think it's steelsojka's problems or anything, probably just the mimetype detection for markdown not working?

clason commented 1 year ago

If the language of the parser is tsx, it should work out of the box. And steelsojka is listed as the maintainer for tsx, so anything related to that language is his problem by definition.

devstefancho commented 1 year ago

@lucario387 Could you let me know what is the mimetype detection? I want to try anything I can do.

lucario387 commented 1 year ago

@lucario387 Could you let me know what is the mimetype detection? I want to try anything I can do.

Hello, the part in question is this https://github.com/nvim-treesitter/nvim-treesitter/blob/95850f7964e5be713ab984384641cc15973626c6/lua/nvim-treesitter/query_predicates.lua#L18-L41

The codeblock above is the part responsible for detecting info string codeblocks, such as ts -> typescript, js -> javascript, ...

So changing the logic there will change the logic everywhere

devstefancho commented 1 year ago

@clason @lucario387 Thanks for your support, now syntax highlighting works well, though tsx is not working yet. it's okay because typescriptreact syntax highlighting is working instead

and now markdown headers also are colorized it looks good for me(is this related with #5006 ?)

Version Info

I now use treesitter commit 7b04e8b67eec7d92daadf9f0717dd272ddfc81a3

{
  "ChatGPT.nvim": { "branch": "main", "commit": "be2c62986ef3223a61d2f1dcf41915a70307afca" },
  "Comment.nvim": { "branch": "master", "commit": "e1fe53117aab24c378d5e6deaad786789c360123" },
  "LuaSnip": { "branch": "master", "commit": "500981ff6cefc7343e3959ef0f939bd0bfd49ba9" },
  "bufferline.nvim": { "branch": "main", "commit": "243893ba9d5d1049dd451a25cab32ec7f8f67bcf" },
  "cmp-buffer": { "branch": "main", "commit": "3022dbc9166796b644a841a02de8dd1cc1d311fa" },
  "cmp-nvim-lsp": { "branch": "main", "commit": "0e6b2ed705ddcff9738ec4ea838141654f12eeef" },
  "codi.vim": { "branch": "master", "commit": "83b9859aaf8066d95892e01eb9c01571a4b325dd" },
  "copilot.vim": { "branch": "release", "commit": "1358e8e45ecedc53daf971924a0541ddf6224faf" },
  "emmet-vim": { "branch": "master", "commit": "def5d57a1ae5afb1b96ebe83c4652d1c03640f4d" },
  "gitsigns.nvim": { "branch": "main", "commit": "e5edefd9976039f5352e0c900f35206770b33a2d" },
  "harpoon": { "branch": "master", "commit": "8cb54c4003045fe1b690de96638d334de9449546" },
  "indent-blankline.nvim": { "branch": "master", "commit": "018bd04d80c9a73d399c1061fa0c3b14a7614399" },
  "lazy.nvim": { "branch": "main", "commit": "ceb413678dfcf3d5455208959185e3db1f7892c7" },
  "lspsaga.nvim": { "branch": "main", "commit": "f65d03cad9f3ab6c2c83ac0fbe2cda50731eb79b" },
  "lualine.nvim": { "branch": "master", "commit": "84ffb80e452d95e2c46fa29a98ea11a240f7843e" },
  "mason-lspconfig.nvim": { "branch": "main", "commit": "cec0e6dd534ade486b5eeb59ebcfa8d51c3e8c5e" },
  "mason-null-ls.nvim": { "branch": "main", "commit": "54d702020bf94e4eefd357f0b738317af30217eb" },
  "mason.nvim": { "branch": "main", "commit": "057ac5ca159c83e302a55bd839a96ff1ea2396db" },
  "neodev.nvim": { "branch": "main", "commit": "ab4c68129b5fefe5c6bb6d7e92283d3f8bdf8566" },
  "nui.nvim": { "branch": "main", "commit": "698e75814cd7c56b0dd8af4936bcef2d13807f3c" },
  "null-ls.nvim": { "branch": "main", "commit": "33b853a3933eed3137cd055aac4e539e69832ad0" },
  "nvim-autopairs": { "branch": "master", "commit": "7747bbae60074acf0b9e3a4c13950be7a2dff444" },
  "nvim-cmp": { "branch": "main", "commit": "0f47dcaf7e39d64cd067e090e6f2eda6326e7366" },
  "nvim-colorizer.lua": { "branch": "master", "commit": "36c610a9717cc9ec426a07c8e6bf3b3abcb139d6" },
  "nvim-dap": { "branch": "master", "commit": "56118cee6af15cb9ddba9d080880949d8eeb0c9f" },
  "nvim-dap-ui": { "branch": "master", "commit": "749bfe12d1447703899fa823c1c075fbe2d42c24" },
  "nvim-dap-virtual-text": { "branch": "master", "commit": "ab988dbb7d20cdaebf9b3ef7554a89f6895de042" },
  "nvim-dap-vscode-js": { "branch": "main", "commit": "03bd29672d7fab5e515fc8469b7d07cc5994bbf6" },
  "nvim-lspconfig": { "branch": "master", "commit": "3bd4ca412982afa6f88bb7ef890660cee51c3e58" },
  "nvim-tree.lua": { "branch": "master", "commit": "59e65d88db177ad1e6a8cffaafd4738420ad20b6" },
  "nvim-treesitter": { "branch": "master", "commit": "7b04e8b67eec7d92daadf9f0717dd272ddfc81a3" },
  "nvim-ts-autotag": { "branch": "main", "commit": "40615e96075c743ef47aaf9de966dc348bec6459" },
  "nvim-ts-context-commentstring": { "branch": "main", "commit": "0bf8fbc2ca8f8cdb6efbd0a9e32740d7a991e4c3" },
  "nvim-ufo": { "branch": "main", "commit": "45aede6f5c4981156df3ddeeae01c4290e43e104" },
  "nvim-web-devicons": { "branch": "master", "commit": "b34362b20a4942b3245f958e73ebe1b09b020ad1" },
  "obsidian.nvim": { "branch": "main", "commit": "0418505ff7d1e06460450a02b9209d03f4c2a50d" },
  "playground": { "branch": "master", "commit": "2b81a018a49f8e476341dfcb228b7b808baba68b" },
  "plenary.nvim": { "branch": "master", "commit": "9ac3e9541bbabd9d73663d757e4fe48a675bb054" },
  "promise-async": { "branch": "main", "commit": "e94f35161b8c5d4a4ca3b6ff93dd073eb9214c0e" },
  "rose-pine": { "branch": "main", "commit": "2eace84d649d76d41dcd44a87a17f64c7c4a586d" },
  "sqlite.lua": { "branch": "master", "commit": "b7e28c8463254c46a8e61c52d27d6a2040492fc3" },
  "telescope-dap.nvim": { "branch": "master", "commit": "313d2ea12ae59a1ca51b62bf01fc941a983d9c9c" },
  "telescope-file-browser.nvim": { "branch": "master", "commit": "e0fcb12702ad0d2873544a31730f9aaef04fd032" },
  "telescope-frecency.nvim": { "branch": "master", "commit": "0a4a521471141ae3c94ff0ebcffcaff3c3aad147" },
  "telescope-project.nvim": { "branch": "master", "commit": "7c64b181dd4e72deddcf6f319e3bf1e95b2a2f30" },
  "telescope.nvim": { "branch": "master", "commit": "c1a2af0af69e80e14e6b226d3957a064cd080805" },
  "toggleterm.nvim": { "branch": "main", "commit": "026dff5e2b504941cf172691561a67ea362596aa" },
  "tokyonight.nvim": { "branch": "main", "commit": "f2ed28707a0ad49047d9b733395ea205ea09f517" },
  "true-zen.nvim": { "branch": "main", "commit": "98740c76254c65576ec294551028b65081053588" },
  "typescript.nvim": { "branch": "main", "commit": "f66d4472606cb24615dfb7dbc6557e779d177624" },
  "vifm.vim": { "branch": "master", "commit": "07fec88cc592d131e028cb70242c8b216ecde149" },
  "vim-illuminate": { "branch": "master", "commit": "a2907275a6899c570d16e95b9db5fd921c167502" },
  "vim-jsdoc": { "branch": "master", "commit": "9234b2e2590e973c06113c05abd180de0c9dbcc1" },
  "vim-surround": { "branch": "master", "commit": "3d188ed2113431cf8dac77be61b842acb64433d9" },
  "vimwiki": { "branch": "dev", "commit": "09804c2a5f1009fde29e32c5f3a6093e4684433a" },
  "vscode-js-debug": { "branch": "main", "commit": "2b2100d5aebaee7d45a6da7e8b8f3db7564e5981" }
}

devstefancho commented 1 year ago

Sorry for confusion I found that previous screenshot was vimwiki filetype and markdown filetype still not work, so I reopen this issue

filetype: markdown

filetype: vimwiki

fragov commented 5 months ago

I have the same issue. Is there a way to add aliases to fenced languages in markdown?

clason commented 5 months ago

Yes, vim.treesitter.language.register() (on Nvim 0.10).

fragov commented 5 months ago

Yes, vim.treesitter.language.register() (on Nvim 0.10).

I think it is do no work for fenced languages in markdown.

I tried all possible variants:

vim.treesitter.language.register('js', 'tsx')

and

vim.treesitter.language.register('javascript', 'tsx')

and all possible variants of 'javascript' and 'typescript', but I'm not getting the highlight for the tsx blocks.

nvim-treesitter / nvim-treesitter