react strings in tags also highlighted
DeadlySquad13 opened this issue · 13 comments
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
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
Closing as the issue seems to be fixed 🚀