Implement a code hinting style in CodeMirror 6 similar to the GitHub Copilot extension in VSCode

I am using CodeMirror 6 to do something, and I want to implement a code hinting style similar to the GitHub Copilot extension in VSCode, as shown in the figure below.

I have tried using the @codemirror/autocomplete package, but it is a dropdown list style, which is not what I want. The style I expect is that when I input a piece of code, it will prompt the recommend code with a light gray inline style behind it.
Should I modify the css for CodeMirror or any other good methods?

1 Like

Since that only shows a single suggestion, rather than a list of them, I think it is different enough from what the autocompletion package is doing to go with a completely separate implementation.

Showing the completion in the document like that is a bit tricky, since inline widget decorations can’t span lines. Maybe use inline decorations for the first and last lines of the completion, and block decorations for any completely new lines.

Thanks for the tip, I’ll try

Hello! did you ever get this to work?