nvim-ts-rainbow
nvim-ts-rainbow copied to clipboard
react strings in tags also highlighted
Hello, thanks for your plugin! Is it possible to highlight components inside React the same way as html tags are highlighted with extended_mode = true
?
Have:
Expected:
Can you paste the code? Also the file extension
Can you paste the code? Also the file extension
Of course. App.tsx (extension is tsx
, I suppose most people would expect it to also work in jsx
):
import React from 'react';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { FaceMeshApp } from './FaceMeshApp';
export const App = () => {
return (
<Router>
<div className="App">
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/faceMeshApp">FaceMeshApp</Link>
</li>
</ul>
</nav>
{/* A <Routes> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Routes>
<Route path="/about">{/* <About /> */}</Route>
<Route path="/faceMeshApp">
<FaceMeshApp />
</Route>
<Route path="/">{/* <Home /> */}</Route>
</Routes>
</div>
</Router>
);
};
Thanks for the attention to my issue! This screenshot looks like what I was hoping to get. Can you please show what I am missing on my side?
My configuration
Output of TSInstallInfo
:
astro [✗] not installed
bash [✓] installed
beancount [✗] not installed
bibtex [✗] not installed
c [✓] installed
c_sharp [✗] not installed
clojure [✗] not installed
cmake [✓] installed
comment [✗] not installed
commonlisp [✗] not installed
cooklang [✗] not installed
cpp [✓] installed
css [✓] installed
cuda [✗] not installed
d [✗] not installed
dart [✗] not installed
devicetree [✗] not installed
dockerfile [✗] not installed
dot [✗] not installed
eex [✗] not installed
elixir [✗] not installed
elm [✗] not installed
elvish [✗] not installed
embedded_template [✗] not installed
erlang [✗] not installed
fennel [✗] not installed
fish [✗] not installed
foam [✗] not installed
fortran [✗] not installed
fusion [✗] not installed
gdscript [✗] not installed
gleam [✗] not installed
glimmer [✗] not installed
glsl [✗] not installed
go [✗] not installed
godot_resource [✗] not installed
gomod [✗] not installed
gowork [✗] not installed
graphql [✗] not installed
hack [✗] not installed
haskell [✗] not installed
hcl [✗] not installed
heex [✗] not installed
help [✗] not installed
hjson [✗] not installed
hocon [✗] not installed
html [✓] installed
http [✗] not installed
java [✗] not installed
javascript [✓] installed
jsdoc [✓] installed
json [✗] not installed
json5 [✗] not installed
jsonc [✗] not installed
julia [✗] not installed
kotlin [✗] not installed
lalrpop [✗] not installed
latex [✗] not installed
ledger [✗] not installed
llvm [✗] not installed
lua [✓] installed
m68k [✗] not installed
make [✗] not installed
markdown [✗] not installed
markdown_inline [✗] not installed
ninja [✗] not installed
nix [✗] not installed
norg [✗] not installed
ocaml [✗] not installed
ocaml_interface [✗] not installed
ocamllex [✗] not installed
org [✗] not installed
pascal [✗] not installed
perl [✗] not installed
php [✗] not installed
phpdoc [✗] not installed
pioasm [✗] not installed
prisma [✗] not installed
proto [✗] not installed
pug [✗] not installed
python [✓] installed
ql [✗] not installed
qmljs [✗] not installed
query [✗] not installed
r [✗] not installed
rasi [✗] not installed
regex [✓] installed
rego [✗] not installed
rnoweb [✗] not installed
rst [✗] not installed
ruby [✗] not installed
rust [✗] not installed
scala [✗] not installed
scheme [✗] not installed
scss [✓] installed
slint [✗] not installed
solidity [✗] not installed
sparql [✗] not installed
sql [✗] not installed
supercollider [✗] not installed
surface [✗] not installed
svelte [✗] not installed
swift [✗] not installed
teal [✗] not installed
tiger [✗] not installed
tlaplus [✗] not installed
todotxt [✗] not installed
toml [✗] not installed
tsx [✓] installed
turtle [✗] not installed
typescript [✓] installed
v [✗] not installed
vala [✗] not installed
verilog [✗] not installed
vim [✗] not installed
vue [✗] not installed
wgsl [✗] not installed
yaml [✗] not installed
yang [✗] not installed
zig [✗] not installed
Output of TSConfigInfo
:
{
auto_install = false,
ensure_installed = {},
ignore_install = <1>{},
modules = {
context_commentstring = {
disable = {},
enable = true,
enable_autocmd = false,
loaded = true,
module_path = "ts_context_commentstring.internal"
},
highlight = {
additional_vim_regex_highlighting = false,
custom_captures = {},
disable = {},
enable = true,
loaded = true,
module_path = "nvim-treesitter.highlight"
},
ignore_install = <table 1>,
incremental_selection = {
disable = {},
enable = true,
keymaps = {
init_selection = "gnn",
node_decremental = "grm",
node_incremental = "grn",
scope_incremental = "grc"
},
loaded = true,
module_path = "nvim-treesitter.incremental_selection"
},
indent = {
disable = {},
enable = true,
loaded = true,
module_path = "nvim-treesitter.indent"
},
rainbow = {
colors = { "#cc241d", "#a89984", "#b16286", "#d79921", "#689d6a", "#d65d0e", "#458588" },
disable = {},
enable = true,
extended_mode = true,
loaded = true,
module_path = "rainbow.internal",
termcolors = { "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White" }
}
},
sync_install = false,
update_strategy = "lockfile"
}
You're missing the update 85ff020
You're missing the update 85ff020
Yes, my mistake, sorry, haven't seen that you mentioned a commit.
I have tested it a little bit, everything is fine, however, highlighting is a little bit wrong: attributes and other captures inside tag are not taken into consideration:
In html they're highlighted properly, though (
"App"
is string - so it's green, to
is attribute - so it's black, etc...):
If I fix that then I don't think I can highlight the <>:
Should be fixed now
Has the fix been released?
Also, not sure if it is relavent, but this doesn't seem to effect self-closing tags
....also, kinda digging it a bit. Does that make me crazy? Maybe a feature to have the attributes the same color as the rainbow parens?
The fix caused another bug which was more serious so I rolled it back
Maybe a feature to have the attributes the same color as the rainbow parens?
I think that would be possible if this issue gets fixed
@p00f this is looking really great!!!
@Gelio good work!
Closing as the issue seems to be fixed 🚀