Markdown Viewer ui-markdown

Try Demo

Allows for markdown to be defined within Node-RED editor and rendered into the UI. Can be used for rendering labels, headers or even full blog articles.

You can inject msg values into the markdown using:

{{ msg?.payload }}

This will be replaced with the value of msg?.payload when a message is received to the node. If you'd like to have a placeholder value before a message is received you can use:

{{ msg?.payload || 'Placeholder' }}

If you're looking for a quick cheat sheet on how to write Markdown, you can check out FlowFuse's guide here.

Properties

Prop	Dynamic	Description
Group		Defines which group of the UI Dashboard this widget will render in.
Content		The markdown to be passed to the UI and rendered

Dynamic Properties

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Class	msg.class	String

Example

Example of rendered markdown in a Dashboard.

The above example is rendered using the following markdown:

# Markdown Content

## Secondary Header

### Third Header

Paragraph here...

inline `<code-example />` with other text either side

```js
// multiline
function () {
    console.log('hello world')
}
```

- List Item 1
- List Item 1
- List Item 1
- List Item 1

[Hyperlink](https://news.bbc.co.uk)

---

> Lorum Ipsum Quotation Over two lines 

| Header 1 | Header 2 |
|-|-|
| `msg.payload` | {{ msg.payload || 'Placeholder' }} |

Mermaid Charts Added In: v0.5.0

The ui-markdown widget also supports the injection of Mermaid. To do so, you can include a mermaid chart definition inside a Markdown fenced code block, defined with the mermaid type:

# Here is some Markdown

and here is a definition for a Mermaid Chart:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Dynamic Mermaid Charts

It is also possible to inject msg values into the mermaid chart definition using mustache templating as with the standard Markdown definition, e.g:

# Here is some Markdown

and here is a definition for a Mermaid Chart:

```mermaid
pie title NETFLIX
         "Time spent looking for movie" : {{ msg.payload }}
         "Time spent watching it" : 10
```

Dashboard will then render the mermaid chart in place of the code block, e.g:

Example of a Mermaid Chart in Dashboard.

Overriding Charts

You can use msg to completely redefine a mermaid chart, however, you must include the initial code fence, with mermaid type in the ui-markdown editor, e.g:

```mermaid
{{ msg.payload }}
```

The content of msg.payload in this case can then be a definition of any Mermaid Chart, without the surrounding code fence, e.g:

pie title NETFLIX
         "Time spent looking for movie" : {{ msg.payload }}
         "Time spent watching it" : 10