Enhance existing language

Answered
Avatar
28349
Created

I'm thinking of making a plugin to implement highlighting and syntax hints for a new css frameworks in frontend development, this is an engine similar to Tailwind CSS called UnoCSS. 

I currently want to achieve the following functionality:
1. Highlight the css class and add an underline for it:
2. When hovering over the css class, the corresponding actual css code can be displayed

Example:

So I'd like some general guidance:
1. First I need to check if the css engine is enabled for the project, so I need to scan different build configuration files (vite.config.js/nuxt.js/...), if unocss is detected, then provide the project with various functions.
2. For the highlight, I tried `com.intellij.lang.annotation.Annotator`, but I don't quite understand how to customize the highlight (such as adding an underline), and display the specific css class represented when hovering css code, which may need to call unocss api since it's dynamic

Can some direction be given like which APIs should I use
Thank you very much

Votes

0

Share

4 comments
Avatar
Karol Lewandowski
Created

Hi,
Regarding 2., there are two separate features:

  • For highlighting, you need to define and use text attributes for building annotation. See: https://plugins.jetbrains.com/docs/intellij/syntax-highlighting-and-error-highlighting.html#syntax
  • To show the definition, consider implementing com.intellij.lang.documentation.DocumentationProvider, which shows element documentation in a popup on mouse hover or invoked by a shortcut. I’m not sure if your use case qualifies as documentation or its part, but implementing a custom mechanism triggered on hover is not an option, as it would collide with the existing editor feature. An alternative could be implementing com.intellij.codeInsight.hint.ImplementationViewSessionFactory, which is a part of the “Quick Definition” action/mechanism.

Regarding 1, I asked my colleague to answer.

​
1
Avatar
Karol Lewandowski
Created

Regarding 1, you can only determine if a node package is installed like this:

  public static boolean isUnoCssInstalled(Project project, VirtualFile context) {
    VirtualFile packageJson = PackageJsonUtil.findUpPackageJson(context);
    if (packageJson == null) return false;

    InstalledPackageVersion unocssPackage = new NodeInstalledPackageFinder(project, packageJson)
      .findInstalledPackage("unocss"); // if unocss is a valid name
    return unocssPackage != null;
  }

 

1
Avatar
28349
Created

I got it done, now I wonder if there is some way to execute Javascript? so that I can call unocss API for code completion and highlighting

0
Avatar
Karol Lewandowski
Created

Hi,

Please take a look at https://github.com/JetBrains/intellij-plugins/blob/master/AngularJS/src/org/angular2/cli/SchematicsLoader.kt

0

Please sign in to leave a comment.