Markdown

Markdown is a lightweight markup language that allows you to format structured texts with minimal effort

This guide contains examples of using standard markdown and Flexbe-specific syntax.

Markdown is used for quick and convenient formatting of texts such as documentation, articles, blog posts, etc. This article is entirely written in the markdown editor. It is characterized by simple syntax, ease of editing, and compatibility with various platforms.

Headings

To add a heading, use from one to six # characters at the beginning of the line.
For each heading level, the corresponding SEO tag H1-H5 will be assigned.
Text parameters specified in the page styles are used.

Code:

# Heading level 1 {#h1}

## Heading level 2 {#h2}

### Heading level 3 {#h3}

#### Heading level 4 {#h4}

##### Heading level 5

###### Caption

Note:

To add an anchor, use the notation {#anchor} after the heading, where anchor is the anchor name.

Result:

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Caption

Regular paragraphs

A line break in the text creates a line break. To create a new paragraph, separate the text with an empty line. Each new line increases the spacing between paragraphs.

Code:

This is a regular paragraph.
Continuation of the paragraph.

New paragraph.

New paragraph with a larger indent.

Result:

This is a regular paragraph.
Continuation of the paragraph.

New paragraph.

New paragraph with a larger indent.

Quotes

A quote is created using the > symbol at the beginning of the line:

Code:

> In my knowledge, I have become so full that it feels like I have lived for a hundred trillion billion years on trillions and trillions of planets just like this Earth.

Result:

In my knowledge, I have become so full that it feels like I have lived for a hundred trillion billion years on trillions and trillions of planets just like this Earth.

Text decoration

Markdown supports basic text formatting styles using special characters:

Code:

**Bold text**

_Italic text_

~Strikethrough text~

Result:

Bold text

Italic text

Strikethrough text

Links

Markdown allows you to add links to other pages and resources.
Simply paste the page address in the text and it will automatically become a link.

Code:

[Go to Flexbe website](https://flexbe.com "Official Flexbe website")

Open https://flexbe.com

Result:

Go to Flexbe website

Open https://flexbe.com

The link text is written in square brackets [ ], and the link address is in parentheses ( ). The tooltip is set in quotes after the link.

Inline code

Code:

Run the command `sdk.getPages()` to get the list of pages

Result:

Run the command sdk.getPages() to get the list of pages

Hotkeys and commands (Flexbe custom syntax)

A double set of square brackets [[ ]] is used around each part of the command.

Code:

Press <kbd class="markdown-kbd">Ctrl</kbd> <kbd class="markdown-kbd">Alt</kbd> <kbd class="markdown-kbd">C</kbd> to copy the style

Result:

Press Ctrl Alt C to copy the style

Embedding HTML

Markdown allows you to directly use HTML for more complex layouts.

Code:

<div style="color: red;">This is text inside a div</div>

Result:

Separators

To create a separator, use three dashes, underscores, or asterisks:

Code:

---
___
***

Result:

Lists

Markdown supports both bulleted and numbered lists.

Bulleted list is created using a dash - or an asterisk *.

Code:

- First item
- Second item
- Third item

Result:

• First item
• Second item
• Third item

Numbered list is created using numbers and a dot.

Code:

1. First item
2. Second item
3. Third item

Result:

1. First item
2. Second item
3. Third item

Lists with custom icons (Flexbe custom syntax)

Code:

- [1] First item
- [2] Second item
- [10] Tenth item
- [] Item with icon

Result:

• 1 First item
• 2 Second item
• 10 Tenth item
• Item with icon

Checkbox lists

Checkboxes allow displaying a list of completed tasks, for example, to show a roadmap.
Use - [ ] for an empty checkbox and - [x] for a checked one.

Code:

Our goals for this year:
- [x] Create a website on Flexbe
- [ ] Build a spaceship
- [ ] Conquer the galaxy

Result:

Our goals for this year:

• Create a website on Flexbe
• Build a spaceship
• Conquer the galaxy

Nested lists

Inside one item, you can make line breaks or nested lists by starting the next line with an indent of two spaces.

Code:

- How to take care of a dog
Important for the dog's health:
- Walk regularly
- Eat tasty food
- So that the owner scratches more often

- How to choose food
Pay attention to the composition:
meat should be the first ingredient in the list

Result:

• How to take care of a dog
  Important for the dog's health:

• Walk regularly

• Eat tasty food

• So that the owner scratches more often

• How to choose food
  Pay attention to the composition:
  meat should be the first ingredient in the list

Tables

Markdown allows you to create tables for structured data presentation.

Code:

| Incident                            | When it happened         | Consequences               |
|-----------------------------------|--------------------------|----------------------------|
| Deleted production database        | Friday evening           | Moved to another country    |
| Pushed untested code to production | Midday                   | Humiliation during QA call  |
| Restarted server without errors    | Morning before workday   | Now everything works fast   |
| Fixed bug before it was found      | Night in silence         | Got respect from colleagues |

Result:

You can also control text alignment in table columns:

• Align left: :---
• Align center: :---:
• Align right: ---:

Code:

| Left          | Center        | Right         |
|:--------------|:-------------:|--------------:|
| Text left     | Text center   | Text right    |

Result:

Information blocks

Markdown in Flexbe supports special information blocks to highlight different types of messages.

Use the construction > [!Type], where Type can be NOTE, TIP, IMPORTANT, WARNING, or DANGER. You can optionally set a block title.

Code:

> [!NOTE]
> This is a regular note without a title.

> [!NOTE Reminder]
> Don't forget to save changes.

> [!TIP]
> Use short paragraphs for easier reading.

> [!TIP Lifehack]
> Combine text and images for better perception.

> [!IMPORTANT]
> Changes take effect immediately.

> [!IMPORTANT Urgent]
> Check access rights before publishing.

> [!WARNING]
> Data cannot be restored after deletion.

> [!WARNING Deprecated feature]
> This functionality will be removed in the next update.

> [!DANGER]
> Do not run commands on production without testing.

> [!DANGER Data loss]
> Actions are irreversible, be careful.

Result:

This is a regular note without a title.

Reminder

Don't forget to save changes.

Use short paragraphs for easier reading.

Lifehack

Combine text and images for better perception.

Changes take effect immediately.

Urgent

Check access rights before publishing.

Data cannot be restored after deletion.

Deprecated feature

This functionality will be removed in the next update.

Do not run commands on production without testing.

Data loss

Actions are irreversible, be careful.

Images

Markdown allows you to add images using standard syntax:

Code:

![Alternative text](https://placehold.co/600x200 "Image caption")

You can also create a zoomable image (lightbox) by wrapping it in a link:

[![](https://placehold.co/600x200 "Zoomable image")](https://placehold.co/1200x400)

Result:

Video

To insert a video, just specify the link to it as a separate paragraph:

Code:

Watch a useful video:

https://www.youtube.com/watch?v=36bkuPKwvbU

The video will automatically be converted into an embedded player on the page.

Result:

Watch a useful video:

Columns

To create a multi-column structure, use the :::columns block, which is closed with a similar tag :::.

Vertical alignment of columns is set by a modifier after columns, for example center for centering content.

The grid consists of 24 columns. The width of each column can be specified explicitly (for example, 8), or use auto for automatic distribution of the remaining space.

If no modifiers are specified, columns will have auto size and left text alignment.

Code:

:::columns center

:::column 8 left
##### First column (left)

:::column auto center
##### Second column (center)

:::column 8 right
##### Third column (right)
:::

Result:

Spoilers

Spoilers allow you to hide content behind a collapsible heading.

Inside a spoiler, you can place any content: text, images, videos, and other markup elements.

To create a spoiler, use the :::spoiler construction, which is closed with a similar tag :::.

Code:

---
:::spoiler What is Markdown?
Markdown is a lightweight markup language for formatting text.

https://www.youtube.com/watch?v=_PPWWRV6gbA
:::
---
:::spoiler open Is it easy to write Markdown?
It's easy, especially if you are familiar with the basic syntax.
:::
---

Result:

To have the spoiler open by default, add the open modifier

Code blocks

To format multiline code fragments, use the syntax of triple backticks (```) before and after the block.

You can also specify the language for syntax highlighting.

Code:

```javascript
function add(a, b) {
return a + b;
}```

Result:

function add(a, b) {
return a + b;
}

Specifying the language after the triple backticks (javascript, html, css, etc.) improves syntax highlighting in the editor.