Markdown

Visualization for rendering Markdown, a simplified markup language.

It supports GitHub Flavored Markdown (GFM), except for inline raw HTML, certain plugins, and Yandex Flavored Markdown features.

Charts are rendered using the @diplodoc/transform library. For more information, see the relevant Diplodoc article.

Available markup componentsAvailable markup components

• General info
• JavaScript
• Basic information about Markdown
  • Headers
  • Styles
  • Text color
  • Lists
    • Unordered list
    • Ordered list
  • Tables
  • Cuts
  • Tabs
  • Accordion
  • Links
  • Inserting code
  • Images
  • Emoji
  • Mermaid diagrams
  • Tooltips

HeadingsHeadings

To create a heading, use the (#) character, for example:

# H1 heading
## H2 heading
### H3 heading
#### H4 heading

Use h1 as the page heading. For a section, use the h2 heading; for subsections, use the appropriate lower level headings. Make sure you maintain the nesting structure of headings.

StylesStyles

To make text bold, wrap it in double asterisks:

This text is **bold**.

To make text italic, wrap it in underscores:

This text is _italic_.

To make text bold and italic, use both double asterisks and underscores:

This text is _**bold and italic**_.
This text is **_bold and italic_**.

To apply strikethrough formatting to text, wrap it in double tildes (~~):

This text is ~~strikethrough~~.

To make text underlined, wrap it in double pluses (++):

This text is ++underlined++.

To create a _subscript, wrap the text in tilde characters (~):

This text is in ~subscript~.

To create a ^superscript, wrap the text in (^) characters:

This text is in ^superscript^.

To make text monospaced, wrap it in (##) characters:

This text is ##monospaced##.

To highlight text, wrap it in double equal characters (==):

This text is ==highlighted==.

Text colorText color

You can set the text color this way: {color}(text). The following colors are supported:

• gray
• yellow
• orange
• red
• green
• blue
• violet

For example, the following markup:

This text is {green}green.

will be displayed as:

This text is green.

ListsLists

Unordered listUnordered list

You can format an unordered (bulleted) list using an asterisk (*), hyphen (-), or plus sign (+). For example, the following Markdown markup:

- Item 1
- Item 2
- Item 3

will be displayed as:

• Item 1
• Item 2
• Item 3

To make a list nested in another list, add an indent for child list items. Markup:

- Item 1
  - Item A
  - Item B
- Item 2

will be displayed as:

• Item 1
  • Item A
  • Item B
• Item 2

Ordered listOrdered list

You can format an ordered (step) list using corresponding numbers. Markup:

1. Item 1
1. Item 2
1. Third item

will be displayed as:

1. Item 1
2. Item 2
3. Third item

To make a list nested in another list, add an indent for child list items. For example:

1. Item 1
    1. Nested item
    1. Nested item
1. Item 2

TablesTables

Tables are not included in the Markdown basic specification, but they're supported by GFM. You can create tables using the pipe character (|) and a hyphen (-). With hyphens, you can create a header for each column. Vertical bars are column separators. To make sure a table is displayed properly, add an empty line before it.

Markup:

Left-aligned column | Right-aligned column | Center-aligned column
:--- | ---: | :---:
Text | Text | Text

will be displayed as:

To add a line break or a more complex element (such as a list or code block) to a table cell, use an alternative markup:

#|
|| **Heading1** | **Heading2** ||
|| Text | Text ||
|#

Sample markup with line breaks and a list:

#|
||Text
in two lines
|
- Item 1
- Item 2
- Item 3
- Item 4||
|#

For more information, see the YFM documentation.

CutsCuts

Use cuts to hide certain content, e.g., additional information or large blocks of code.

Markup:

{% cut "`cut` title" %}

Content displayed on click.

{% endcut %}

will be displayed as:

TabsTabs

Use tabs for mutually exclusive sections. For example, to separate instructions for different operating systems.

Markup:

{% list tabs %}

- Tab 1 name

  Tab 1 text

  * You can use lists.
  * And **other** markup.

- Tab 2 name

  Tab 2 text

{% endlist %}

will be displayed as:

If you want an element to be expanded by default, add the {selected} attribute to it:

Markup:

{% list tabs %}

- Tab 1 name

  Tab 1 text

- Tab 2 name {selected}

  The item will be expanded by default.

- Tab 3 name

  Tab 3 text

{% endlist %}

will be displayed as:

AccordionAccordion

An accordion allows you to collapse or expand content, which is helpful when you need to organize large amounts of information.

Markup:

{% list tabs accordion %}

- Name of item 1

  Content for item 1

- Name of item 2

  Content for item 2
 
- Name of item 3

  Content for item 3

{% endlist %}

will be displayed as:

If you want an element to be expanded by default, add the {selected} attribute to it:

Markup:

{% list tabs accordion %}

- Name of item 1

  Content for item 1

- Name of item 2 {selected}

  The item will be expanded by default.
 
- Name of item 3

  Content for item 3

{% endlist %}

will be displayed as:

LinksLinks

The Markdown syntax for an embedded link consists of the [link text] and (URL)` :

[DataLens](https://datalens.yandex.cloud)

DataLens

Inserting codeInserting code

Using Markdown, you can both embed code snippets in a clause and place them between clauses as separate blocks.

const a = 10;

This insert is converted to a highlighted code.

const a = 10;

<html class="ie no-js"> inline code.

To insert inline code, wrap it in backticks: `<html class="ie no-js">`.

Line breakLine break

To add a line break in a paragraph, use two spaces (⋅⋅) at the end of a line.

TooltipsTooltips

Tooltips allow you to display term definitions when clicking a term. Definitions are linked to their respective terms using a term key. Markup:

[*term_key]: Term definition which may include _basic_ markup:
* Lists
* Links
* Images, etc.


[Term](*term_key) used in the text.

will be displayed as:

Term used in the text.

ImagesImages

![alt text](https://yastatic.net/q/logoaas/v2/DataLens.svg "Text for tip on hover" =100x200)

EmojiEmoji

To add an emoji, enter a keyword and add a colon (:) on both sides. You can see the list of available keywords in the visual editor.

For example, the following markup:

Emoji :smiley:.

will be displayed as:

Emoji 😀.

Mermaid diagramsMermaid diagrams

Mermaid is a library for creating diagrams and flowcharts in a browser using a simple markup language. It allows you to create diagrams using a syntax similar to Markdown.

Mermaid has many built-in templates and functions for creating various types of diagrams, such as flowcharts, graphs, trees, Gantt charts, mind maps, and C4 diagrams.

Using text definitions, you can set a description of the structure, which is then converted into a diagram. Markup:

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

will be displayed as:

See the Mermaid documentation for details.

ExamplesExamples

• Markdown chart with parameterization
• Mermaid diagrams and flowcharts

[*term_key]: Term definition which may include basic markup:

• Lists
• Links
• Images, etc.