I'm using MarkdownIt component to display markdown text, but most markdown elements are simply ignored and not translated to their HTML version:
- Headings (#, ##, ###)
.e.g.:
# h1 Heading
## h2 Heading
- Tables:
e.g.:
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Anyone any hint?
Hi Ignacio,
I just tried, and apart from italic, bold, strikethrough and code, nothing seems to work. Which is odd, as the underlying JavaScript library seems to support everything you'd expect. The component is from 2020, so perhaps it's using a very old version.
check whether the component calls renderInline() instead of render(). Also confirm the table rows are separated by real line breaks.
As an alternative, try Markdown Renderer, which is compatible with Reactive Web and was updated more recently. Tables may still need scoped CSS because OutSystems UI can remove their default borders and spacing.
The component does use renderInline, fwiw.
Yup, look component is not valid anymore. I stopped using it and instead I took the following approach:
1.- Download the marked.js script from https://cdn.jsdelivr.net/npm/marked/marked.min.js 2.- Import the script (Interface->Scripts)3.- Add a Javascript to the OnRender event of the block that shows the markdown.3.1.- Add two parameters to the javascript:
- MarkdownText (text) -> Pass the markdown text string- ContainerId (text) -> Pass the TargetContainer.Id
3.2.- Add the following javascript code:
const rawHtml = marked.parse($parameters.MarkdownText); const targetElement = document.getElementById($parameters.ContainerId); if (targetElement) { targetElement.innerHTML = rawHtml; }
Works like a charm.
I spoke to one of the maintainers, and there's another component that basically does the same: Markdown Renderer. Perhaps a good idea to give that one a try.
I think it might be a good idea to mark this component as deprecated.