Markdown Viewer

The widget can be used to show GitHub Flavored Markdown.

Model

{
    "type": "markdownviewer",
    "actions": {},
    "content": "",
    "dataSource": {},
    "mermaidOptions": {},
    "options": {},
    "toolbars": {}
}
Field Description

actions

Optional property, used to configure action pipelines for specific trigger events

content

Content for the markdown viewer widget.

dataSource

Property used to retrieve data from the system

mermaidOptions

Optional configuration to set the theme of included mermaid graphs. See the Mermaid Options section below for more details.

options

Optional property, used to configure the refreshInterval, style and styleByTheme fields. The linkTarget property can also be configured here. See the options section below for more details.

toolbars

Optional configuration to add, customise and hide toolbars. See the toolbars section below.

Content

The content can be a plain markdown string or encoded as Base64. The latter is preferred.

{
    "type": "markdownviewer",
    "content": "# Markdown Viewer\n\n- This is a markdown text."
}

Base64 encoded content:

{
    "type": "markdownviewer",
    "content": "IyBNYXJrZG93biBFeGFtcGxlCgpUaGlzIGlzIGFuIGV4YW1wbGUgdGV4dC4KCiMjIFN5c3RlbSBDb21wb25lbnQgT3ZlcnZpZXcKCnwgTmFtZSB8IERlc2NyaXB0aW9uIHwKfCAtLS0tIHwgLS0tIHwKTWFzdGVyIENvcmUgfCBDZW50cmFsIENvcmUgc2VydmljZSB0eXBpY2FsbHkgZGVwbG95ZWQgaW4gdGhlIChwcml2YXRlKSBjbG91ZC4KTG9jYWwgQ29yZSB8IENvcmUgd2hpY2ggaXMgdHlwaWNhbGx5IGRlcGxveWVkIGF0IGEgc2l0ZS4KQ29ubmVjdG9yIHwgUmV0cmlldmVzIGRhdGEgZnJvbSBhbmQgc2VuZHMgZGF0YSB0byBvbmUgb3IgbXVsdGlwbGUgZGF0YSBzb3VyY2VzLgpTZXJ2ZXIgfCBFeHBvc2VzIGRhdGEgYWNjb3JkaW5nIHRvIHRoZSBsYXRlc3QgT1BDIHNwZWNpZmljYXRpb25zLgpXZWIgQVBJIHwgU2VydmljZSB3aXRoIGEgcG93ZXJmdWwgSFRUUCwgV2ViU29ja2V0IGFuZCBzdGF0aWMgY29udGVudCBpbnRlcmZhY2UuCg=="
}
Write your complete Markdown text in Visual Studio Code and convert it to Base64 by using the Encode Decode extension.

Options

The markdown viewer widget supports the following options:

{
    "options": {
        "linkTarget": "_blank",
        "refreshInterval": "1m",
        "style": {},
        "styleByTheme": {}
    }
}
Field Description

linkTarget

Available options are "_blank", "_parent", "_self" and "_top"

refreshInterval

Refresh with an interval in seconds

style

Set the style on a widget level.

styleByTheme

Set the style based on the active theme.

Mermaid

This widget supports Mermaid code blocks. Try online with the Mermaid live editor.

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

Mermaid Options

The theme of mermaid graphs can be set with one of the following values : default, neutral, forest or dark.

{
    "mermaidOptions": {
        "theme": "forest",
        "themeVariables": {}
    },
}

DataSource

Refer to the generic widget page for a description of the general principles governing the treatment of data retrieved from a dataSource.

If the dataSource property is defined as an object, then the message returned by the data is determined by the type field. If this field is not specified, then the content field is checked in the payload and merged into the model.

In the case that both the type and content fields are not specified, then the payload is assigned to the content field.

Toolbars

The markdown viewer widget supports multiple custom toolbars. For information on configuring custom toolbars, see the toolbars section in the widget documentation.

Tools

The following tools have a default implementation on the markdown viewer:

Icon Name Description

RefreshBtn

Refresh

Refreshes the widget

Spacer

Defines the spacing between tools on the widget toolbar. This can be customised using the style and styleByTheme properties.