Displaying rich html inside completer documentation panel

[yogevyuval]

Hi,
I'm building a JupyterFrontEndPlugin that registers a ICompletionProvider to autocomplete a custom language. I'm able to to get autocompletions and have each item define a documentation property that shows up as a documentation panel when completing.

How can I put rich html (colors, fonts, sizes) inside the documentation panel and not only plain strings? It looks like other completers are able to do it, but following the code it looks like the string is sanitized and only displayed as a raw string.

For example, I would want to have an item that looks like:

{
label: "some_function"
type: "function")
documenation: "This <i> function </i> uses <b>x</b> to do y"
}

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Hi @yogevyuval, you can define a renderer on your ICompletionProvider and it can define a custom createDocumentationNode() implementation. To get you started you can inherit from the default renderer (Completer.Renderer).

I would still recommend sanitizing the documentation string in your custom renderer though. You can re-use our renderHTML, renderMarkdown, etc functions which take a sanitizer and can handle it.

[krassowski]

Looking at it again, there is an existing issue tracking improvements to this API (#15127):

• currently the renderer from the provider with the highest rank is used, but ideally it would be decided on per-item basis
• currently the default is plain text, but JupyterLab should allow to pass a MIME bundle and take care of rendering

Contributions towards #15127 are welcome (we do not need to implement both ideas at once).

[yogevyuval]

ICompletionProvider

Thanks @krassowski , I understand what you mean but the API is a bit complicated, is there any example you can think of I can start with?

I also see that the default renderer is supposedly allowing ansi colors codes which is I think what happens in this pic, but also could not get them to work?

UPDATE - the ansi colors do work by using the format starting with \00.. or just using the ansi-colors package.

[JasonWeill]

Accepting this as a documentation issue; it would be great to have better documentation in the JupyterLab docs about displaying rich HTML as described above.