Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React components not being highlighted #7

Open
Amar-Gill opened this issue Sep 10, 2022 · 4 comments
Open

React components not being highlighted #7

Amar-Gill opened this issue Sep 10, 2022 · 4 comments

Comments

@Amar-Gill
Copy link

Amar-Gill commented Sep 10, 2022

First of all, I want to say great work on this plugin. I tried numerous themes and I settled on this one for it's balance of legibility and coherent aesthetic.

The issue I'm having is that React components are not highlighted the same way standard html tags are:

Screen Shot 2022-09-10 at 10 31 06 PM

These are React components imported like so

  import { OrbitControls } from '@react-three/drei';
  import { Canvas } from '@react-three/fiber';
  import Head from 'next/head';

It appears as if they are using the monochrome palette. I have tree-sitter installed also.

I'll try to dig into code and make a fix but want to document this issue as a start.

@kvrohit
Copy link
Owner

kvrohit commented Sep 12, 2022

Thank you! and that's a nice font in your screenshot. As for the colors, I will try and see if there are other color schemes that have addressed this issue; if not, this could be a limitation with the highlight groups available for customization in neovim.

@kvrohit
Copy link
Owner

kvrohit commented Sep 12, 2022

I traced this down to the highlight group TSConstructor. Unfortunately this group is shared with many other elements and I cannot target just the react tag names to have this change.

I have prepared a branch for you to try it out. Change your packer config to the following and PackerSync to update:

use { 'kvrohit/rasmus.nvim', branch = 'ts-hl-tweaks' }

Let me know if this works for you. However, I do not have plans to merge this into the main branch since it changes a lot of things.

@Amar-Gill
Copy link
Author

Thanks for the fix! It does now highlight the JSX. But as you mentioned, it affects other groups, like the imported class inside the normal TS part of the code.

image

image

This is a good start however! I'm going to see if I can figure out something. Maybe https://github.com/sainnhe/gruvbox-material can provide some ideas.

P.S. the terminal font I'm using is DaddyTimeMono Nerd Font.

@Amar-Gill
Copy link
Author

Amar-Gill commented Sep 13, 2022

Side note, it looks like Class imports (or in this case React components) are highlighted differently than standard method imports. Didn't notice this before. In the example, useControls is a little bit brighter
Screen Shot 2022-09-14 at 3 05 20 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants