Markdown
You can add text, links, and images to your dashboard using standard Markdown formatting. This feature is available for the grid and absolute layout. To add Markdown, click the Add Markdown button () in the editing toolbar using the visual editor.
Configuration panel options for Markdown
You can se the Configuration panel to configure the following Markdown components.
Visibility
Optionally hide the visualization when data is unavailable and configure custom visibility conditions.
Position and size
You can use your cursor to change the size or location of the visualization, or the Position and size section of the Configuration panel for pixel perfect sizing and placement.
Color and style
- Font: specify the text color using hexadecimal codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)".
- Background: specify the background color using a hexadecimal code such as "#FF0000".
Font family: specify the font family, such as "Comic Sans MS". The font must be available to your end user.
- Font size: specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.
Rotation: specify the number of degrees to rotate the Markdown content.
Markdown content
Enter and format your Markdown content in the content field by using the following options:
Headings (
): you can configure heading levels using the hash symbol. For example, add 1 # for heading level 1 (the topmost heading), 2 #s for heading level 2, 3 #s for heading level 3, and 4 #s for heading level 4.
Bold (
): bold text.
Italic (
): italicize text.
Link (
): insert a link.
Blockquote (
): insert a blockquote.
Code (
): insert code samples. The code is formatted differently for a single line of code versus a multiple-line code block. A single line of code displays with a gray background that extends to the last bit of code. A multiple line code block has syntax highlighting and the gray background extends to the edge of the Markdown panel.
Image (
): insert an image. You can upload the image directly into your dashboard or enter an image URL. External image URLs must have their domains listed in the trusted domains list to be included in a dashboard.
Unordered list (
): insert a bulleted list.
Ordered list (
): insert a numbered list.
You can also include standard Markdown formatting beyond the options in the Markdown editor. Dashboard Studio supports basic Markdown formatting options with some exceptions as Limitations describes. See "Basic Syntax" on the Markdown Guide website.
Interactions
Select + Add interaction to set up different visualization interactions such as linking to a custom URL, setting tokens, or linking to a report. For more details, see Add dashboard interactions.
Source code
Select your visualization or its search to view and edit the source code in real-time. You can also change the Visualization ID to a more readable ID to help identify this visualization in the source code.
Source options for Markdown
Markdown example
The following example shows a dashboard with 2 Markdown visualizations. The 2 visualizations display the same text, but have different configurations, such as different font families and colors, applied to illustrate the different options available for Markdown in Dashboard Studio.
The following shows the Markdown content used for both visualizations. Note how # is used for heading level 1, ## for heading level 2, and so on. Different formatting is used to achieve for small and large code sample sections.
# Heading level 1
## Heading level 2
### Heading level 3
**bold text**
*italic text*
[link here](https://splunk.com/)
> quote
horizontal line:
___
`small code section new change`
```
// large code section
import React from 'react';
import Markdown from '@splunk/visualizations/Markdown';
```
- first bullet item
- second bullet item
1. first item
2. second item
Expand the box to view the complete definition. You can copy and paste the code into your own instance to see the example at work:
{
"title": "Markdown example",
"inputs": {
"input_global_trp": {
"options": {
"defaultValue": "-24h@h,now",
"token": "global_time"
},
"title": "Global Time Range",
"type": "input.timerange"
}
},
"defaults": {
"dataSources": {
"global": {
"options": {
"queryParameters": {
"earliest": "$global_time.earliest$",
"latest": "$global_time.latest$"
}
}
}
}
},
"visualizations": {
"viz_LR8fOfbo": {
"options": {
"markdown": "\n# Heading level 1\n## Heading level 2\n### Heading level 3\n**bold text**\n*italic text*\n\n\n[link here](https://splunk.com/)\n> quote\n\nhorizontal line:\n___\n`small code section new change`\n\n```\n// large code section\nimport React from 'react';\nimport Markdown from '@splunk/visualizations/Markdown';\n```\n\n- first bullet item\n- second bullet item\n1. first item\n2. second item\n"
},
"type": "splunk.markdown"
},
"viz_qOtBORjS": {
"options": {
"backgroundColor": "#ffffff",
"fontColor": "#4fa484",
"fontFamily": "Splunk Platform Mono",
"fontSize": "large",
"markdown": "\n# Heading level 1\n## Heading level 2\n### Heading level 3\n**bold text**\n*italic text*\n\n[link here](https://splunk.com/)\n> quote\n\nhorizontal line:\n___\n`small code section new change`\n\n```\n// large code section\nimport React from 'react';\nimport Markdown from '@splunk/visualizations/Markdown';\n```\n\n- first bullet item\n- second bullet item\n1. first item\n2. second item\n"
},
"type": "splunk.markdown"
}
},
"layout": {
"globalInputs": [
"input_global_trp"
],
"layoutDefinitions": {
"layout_1": {
"options": {},
"structure": [
{
"item": "viz_LR8fOfbo",
"position": {
"h": 460,
"w": 420,
"x": 20,
"y": 20
},
"type": "block"
},
{
"item": "viz_qOtBORjS",
"position": {
"h": 510,
"w": 480,
"x": 510,
"y": 20
},
"type": "block"
}
],
"type": "absolute"
}
},
"options": {},
"tabs": {
"items": [
{
"label": "Markdown example",
"layoutId": "layout_1"
}
]
}
}
}Limitations
HTML
Heading levels 5 and 6
Tables