css code Highlighting in documentation
I am using DocumentationTargetProvider to implement the documentation function. It mainly provides the document of the css attribute corresponding to the class name for the UnoCSS library, and it returns the css corresponding to the class name from the js language server
The question is, how to render it properly?I searched for a long time and realized a stupid way:
// result.css is the content of the css class
// so I use create a psi file from it to be able to get the ast tree
val cssFile: PsiFile = PsiFileFactory. getInstance(targetElement?. project)
.createFileFromText(CSSLanguage.INSTANCE, result.css)
val styleSheetElement: List<PsiElement> = cssFile.childrenOfType<CssLazyStylesheet>()
Then, I walk the ast tree and build html for highlighting
https://github.com/re-ovo/unocss-intellij/blob/6fcd349da6750a03b5cef70bb49c3864926afcf3/src/main/kotlin/me/rerere/unocssintellij/documentation/UnocssDocument.kt#L72-L219
But the end result looks very ugly:
I had to manually handle the formatting of the css which was cumbersome
Is there a better solution? Did i do something wrong?
请先登录再写评论。
Also, offset-based documents always seem to start to the left of the psi element. In my case, if the class value is very long, then the document does not follow the mouse
I managed to define a language of my own and inject it to parse class names, so that the class name elements are independent of each other, now the problem is solved, not sure if this is a good way
I am now using the injected language to complete the above features, but the green background is really ugly, is there any way to avoid it? It seems that injected languages will have this green background by default and the user can manually turn it off, but is there any way I can do it in code? Or should I never inject the language in the first place?
Please, it's been so many days, please come to someone to answer, please
This is the latest code: https://github.com/re-ovo/unocss-intellij
Hi, sorry for the late reply.
Regarding code highlighting, have a look at HtmlSyntaxInfoUtil.getHtmlContent(...). I haven't tried it myself yet, but I hope it will help.
Regarding popup position, this might be a bug in IntelliJ Platform. I noticed that on Quick Documentation shortcut (F1 on Mac, Ctrl+Q on Win/Linux), the same popup appears close to the caret. I guess it should be there on hover as well.
Speaking about language injection, I don't think it should be used for this task.
Thank you
Is there any other better way to achieve these without using language injection?
You mean hover popup placement? I don't have a ready-to-use answer but I know the way to find it. All this logic is open-source so we need to debug how it is implemented and see if there's anything a plugin could do. If not, we need to fix this issue in IntelliJ Platform.
Good news is that we'll need to solve this problem for our own needs in the nearest future, so I hope, we'll have a fix (or a clear answer) pretty soon (but considering the vacation season of responsible engineers).