Demo to preview the settings
Introduction
This plugin parses Markdown to HTML and also displays the HTML output automatically! The plugin is optimized for the streaming response from AI models so you can easily render the Markdown output. It will parse the response instantly.
Please be aware that using multiple plugin elements on the page still will render only one Code Theme. You can not have loaded multiple Code themes on the same page.
How to setup
- Install the plugin
- Set the plugin element “Markdown Parser” on the page
- Fill the fields
Plugin Element “Markdown Parser”
Converts Markdown to HTML, displays the rendered HTML, and allows for custom CSS styling. Option to disable display available.
Fields:
Title | Description | Type |
Markdown Input | (Optional) This field will accept your Markdown text. | Text |
Open links in a New Tab | If enabled, links in the Markdown content open in a new tab. | Checkbox |
Recognize LaTeX/KaTeX Math Formulas | When enabled, math formulas formatted as LaTeX/KaTeX will be rendered beautifully. For example:
\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\].
You can use \(\) for inline formulas and \[\] for formulas rendered on a new line. | Checkbox |
CSS Styling | Custom CSS rules to style the parsed HTML content. Rules are scoped to only apply within the plugin's element container. | Text |
Code Theme Name | The Highlight.js theme name to style the highlighted code blocks. You can find all the themes here: https://highlightjs.org/examples.
Only official Highlight.js themes are fully supported. Custom themes from the list or unofficial ones might not work consistently, as they may include non-standard styles not covered by the core library. For reliable compatibility, stick with themes available on trusted CDNs like CDNJS. | Text |
Do Not Render HTML | If you only want to use the HTML from the plugin state you can enable this option. The plugin will not display the HTML. | Checkbox |
Exposed states
Name | Description | Type |
HTML | The generated HTML output from the Markdown input after parsing and applying styling. This HTML can be directly accessed for display or further manipulation. If “Do Not Render HTML” is enabled, the output is generated but not displayed. | Text |
Element Events
Name | Description |
Code Copied | Triggered when a code block's content is successfully copied to the clipboard. This event is fired upon clicking the copy button in the code block. |
