Markdown Preview Swing Component
Answered
## What I am trying to create
A method I can call like `createMarkdownPreview(String markdownText)` which returns a `JComponent` so I can use it in a UI. I want to use IntelliJ's (and I want my plugin to be compatible with PyCharm) built-in markdown preview (without the 3 options, see below)
## Why
To display read-only documentation with code examples. I want to be able to format markdown automatically with little work.
## What I have found
That looks like what I want, but I need to know the dependency I need to get that to work.
Please sign in to leave a comment.
Hi Colin,
MarkdownPreviewFileEditor is not intented to be used as a standalone editor (it won't work without main editor).
You can use MarkdownJCEFHtmlPanel instead. You can use this code to create it:
Please note, that it is essential to dispose MarkdownJCEFHtmlPanel instance after use, otherwise it will create a substantial memory leak.
Ivan Posti Thanks for the reply, and the code sample. I had a few questions as well
* Is it acceptable to have multiple `MarkdownJCEFHtmlPanel` component, given the JCEF constraints and memory impacts?
* Can it be used as renderer (e.g. in a `JTable`) ?
Hi Brice,
It is OK to have multiple MarkdownJCEFHtmlPanel, however, I would not recommend to have a lot of them. You can think of a single panel instance as a tab in a browser. You would need to test your scenario and see if the memory usage is acceptable for you.
In theory, it can be used as a renderer. I would not recomend using it for this purpose, since renderers are expected to be relatively fast and stateless. If you really want to use it as a renderer I suggest to try using a single panel instance for all renderers.
Is there a way to add buttons (like the bottom 3 buttons?)
Is there a way to add more icon buttons in (top right)?
My first instinct is to just add JBButtons under the panel, but this solution requires that I instantiate a bunch of markdown panels (in my case) which was previously suggested to be a bad idea. Any suggestions?
@IvanPosti
> You can think of a single panel instance as a tab in a browser.
Ok thank you for the metaphor, that convey well how the jcef panel works.
> I suggest to try using a single panel instance for all renderers.
I understood that as single instance renderer, I'd this what you meant.
Do you think that OSR would consumes less resources for the rendering propose?
I and my team are still undecided on jcef due to the constraint you mention.
By the way thank you for the feedback.
Collin Barber, The copy button is added internaly by the code processing code fences. Unfortunatelly, you won't be able to customize it's behaviour. If you are using this component in your custom view, I would suggest implementing your own version on MarkdownJCEFHtmlPanel, since the default one is quite limited in customizations. You can generate your Markdown HTML with the org.intellij.plugins.markdown.ui.preview.html.MarkdownUtil#generateMarkdownHtml, and then process it with Jsoup adding the elements you need.
If you want to customize the default Markdown view in IDE, you can substitute the default implementation with our own using the MarkdownHTMLPanelProvider. However, this API proved to be unstable and will be revised in the future.
Brice, Yes, it should be slightly ligther on resources than the non-OSR. Moreover, it is the prefered rendering mode, because it has much better integration with Swing (using non-OSR JCEF components will likely cause numerous problems, such as broken focus transfer, input, notifications...).
If you need to render Markdown in a few places exactly as the IDE does, you should use the MarkdownJCEFHtmlPanel.
If you want to show a lots of static Markdown fragments and don't need them to be interactive (e.g. no copy button for fences), you can use JTextPane (you can find the CSS styles used for the preview in org.intellij.plugins.markdown.ui.preview.PreviewLAFThemeStyles and in org/intellij/plugins/markdown/extensions/common/baseStyles/default.css.
Thanks for the tip! Using html/css has helped me solve a bunch of problems! I am having trouble listening for button interactions in my kotlin code though. ChatGPT has given me probably 10 different incorrect answers.
How can I execute a kotlin method when a user presses an html button?
@collin I never tried with the markdown preview jcef panel. But this is jcef integration stuff.
The code needs to register handlers, the code can register handler on the jcef client, depending on your strategy it might be:
* a request handler `CefRequestHandlerAdapter` it should intercept when link are clicked
* a _message_ handler `CefMessageRouterHandler`, those messages are sent via Javascript in the web page.
There's another one but I forgot which one.
Note the code should be very strict at disposing these handlers when the jcef panel is closed.
Collin Barber Please see the JBCefJSQuery:
Tip: You can use a single listener for multiple events.