Markdown

Markdown — это лёгкий язык разметки, который позволяет оформлять структурированные тексты с минимальными усилиями

Данное руководство содержит примеры использования стандартного markdown и специфичного для Flexbe синтаксиса.

Markdown используется для быстрого и удобного оформления текстов, таких как документация, статьи, записи в блогах и т.д. Эта статья полностью написана в markdown редакторе. Он отличается простотой синтаксиса, лёгкостью редактирования и совместимостью с различными платформами.

Заголовки

Для добавления заголовка необходимо использовать от одного до шести символов # в начале строки.
Для каждого уровня заголовка будет прописан соответствующий SEO-тег H1-H5.
Используются параметры текста указанные в стилях текста страницы.

Код:

# Заголовок 1 уровня {#h1}

## Заголовок 2 уровня {#h2}

### Заголовок 3 уровня {#h3}

#### Заголовок 4 уровня {#h4}

##### Заголовок 5 уровня

###### Подпись

Примечание:
Для добавления якоря используйте запись вида {#anchor} после заголовка, где anchor это название якоря.

Результат:

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Подпись

Обычные абзацы

Перенос строки в тексте переносит строку. Для создания нового абзаца отбейте текст пустой строкой. Каждая новая строка увеличивает интервал между абзацами.

Код:

Это обычный абзац текста.
Продолжение абзаца.

Новый абзац.
<p class="markdown-br"></p>

Новый абзац с большим отступом.

Результат:

Это обычный абзац текста.
Продолжение абзаца.

Новый абзац.

Новый абзац с большим отступом.

Цитаты

Цитата создаётся с помощью символа > в начале строки:

Код:

> Я в своём познании настолько преисполнился, что как будто бы уже сто триллионов миллиардов лет проживаю на триллионах и триллионах таких же планет, как эта Земля.

Результат:

Я в своём познании настолько преисполнился, что как будто бы уже сто триллионов миллиардов лет проживаю на триллионах и триллионах таких же планет, как эта Земля.

Декорация текста

Markdown поддерживает базовые стили оформления текста с помощью специальных символов:

Код:

**Полужирный текст**

_Курсивный текст_

~Зачёркнутый текст~

Результат:

Полужирный текст

Курсивный текст

~~Зачёркнутый текст~~

Ссылки

Markdown позволяет добавлять ссылки на другие страницы и ресурсы.
Просто вставьте адрес страницы в текст и она автоматически станет ссылкой.

Код:

[Перейти на сайт Flexbe](https://flexbe.com "Официальный сайт Flexbe")

Открыть https://flexbe.com

Результат:

Перейти на сайт Flexbe

Открыть https://flexbe.com

Текст ссылки пишется в квадратных скобках [ ], а адрес ссылки — в круглых скобках ( ). Всплывающая подсказка задаётся в кавычках после ссылки.

Встроенный код

Код:

Выполните команду `sdk.getPages()` для получения списка страниц

Результат:

Выполните команду sdk.getPages() для получения списка страниц

Горячие клавиши и команды (кастомный синтаксис Flexbe)

Используется двойной набор квадратных скобок [[ ]] вокруг каждой части команды.

Код:

Нажмите <kbd class="markdown-kbd">Ctrl</kbd> + <kbd class="markdown-kbd">Alt</kbd> + <kbd class="markdown-kbd">C</kbd> для копирования стиля

Результат:

Нажмите Ctrl + Alt + C для копирования стиля

Встраивание HTML

Markdown позволяет напрямую использовать HTML для более сложных разметок.

Код:

<div style="color: red;">Это текст внутри div</div>

Результат:

Это текст внутри div

Разделители

Для создания разделителя используется три дефиса, подчеркивания или звездочки:

Код:

---
___
***

Результат:

Списки

Markdown поддерживает как маркированные, так и нумерованные списки.

Маркированный список создаётся с помощью дефиса - или звёздочки *.

Код:

- Первый пункт
- Второй пункт
- Третий пункт

Результат:

Первый пункт
Второй пункт
Третий пункт

Нумерованный список создаётся с помощью чисел и точки.

Код:

1. Первый пункт
2. Второй пункт
3. Третий пункт

Результат:

Первый пункт
Второй пункт
Третий пункт

Списки с кастомными значками (кастомный синтаксис Flexbe)

Код:

- [1] Первый пункт
- [2] Второй пункт
- [10] Десятый пункт
- [] Пункт с иконкой

Результат:

1 Первый пункт
2 Второй пункт
10 Десятый пункт
Пункт с иконкой

Списки с чекбоксами

Чекбоксы позволяют отобразить список завершенных задач, например для отображения roadmap.
Используется запись - [ ] для пустого чекбокса и - [x] для отмеченного.

Код:

Наши цели на этот год:
- [x] Создать сайт на Flexbe
- [ ] Построить космолет
- [ ] Захватить галлактику

Результат:

Наши цели на этот год:

Создать сайт на Flexbe
Построить космолет
Захватить галлактику

Вложенные списки

Внутри одного пункта можно делать переносы строк или вложенный список, просто начав следующую строку с отступа в два пробела

Код:

- Как ухаживать за собакой
  Важно для здоровья собаки:
  - Регулярно гулять
  - Вкусно кушать
  - Чтобы хозяин почаще чесал

- Как выбрать корм
  Обратите внимание на состав:
  мясо должно быть на первом месте в списке ингредиентов

Результат:

Как ухаживать за собакой
Важно для здоровья собаки:
- Регулярно гулять
- Вкусно кушать
- Чтобы хозяин почаще чесал
Как выбрать корм
Обратите внимание на состав:
мясо должно быть на первом месте в списке ингредиентов

Таблицы

Markdown позволяет создавать таблицы для структурированного представления данных.

Код:

| Инцидент                             | Когда случилось          | Последствия                |
|--------------------------------------|--------------------------|----------------------------|
| Удалил прод базу                     | В пятницу вечером        | Переехал в другую страну   |
| Залил непротестированный код на прод | В середине дня           | Унижение на созвоне от QA  |
| Перезапустил сервер без ошибок       | Утром перед рабочим днем | Теперь всё быстро работает |
| Починил баг до того, как его нашли   | Ночью в тишине           | Получил респект от коллег  |

Результат:

Инцидент	Когда случилось	Последствия
Удалил прод базу	В пятницу вечером	Переехал в другую страну
Залил непротестированный код на прод	В середине дня	Унижение на созвоне от QA
Перезапустил сервер без ошибок	Утром перед рабочим днем	Теперь всё быстро работает
Починил баг до того, как его нашли	Ночью в тишине	Получил респект от коллег

Также в таблицах можно управлять выравниванием текста в столбцах:

Выравнивание по левому краю: :---
Выравнивание по центру: :---:
Выравнивание по правому краю: ---:

Код:

| Лево          | Центр         | Право         |
|:--------------|:-------------:|--------------:|
| Текст слева   | Текст по центру| Текст справа |

Результат:

Лево	Центр	Право
Текст слева	Текст по центру	Текст справа

Информационные блоки

Markdown в Flexbe поддерживает специальные информационные блоки для выделения разных типов сообщений.

Используйте конструкцию > [!Тип], где Тип может быть NOTE, TIP, IMPORTANT, WARNING или DANGER. При желании можно задать заголовок блока.

Код:

> [!NOTE]
> Это обычное примечание без заголовка.

> [!NOTE Напоминание]
> Не забудьте сохранить изменения.

> [!TIP]
> Используйте короткие абзацы для удобства чтения.

> [!TIP Лайфхак]
> Комбинируйте текст и изображения для лучшего восприятия.

> [!IMPORTANT]
> Изменения вступают в силу немедленно.

> [!IMPORTANT Срочно]
> Проверьте права доступа перед публикацией.

> [!WARNING]
> После удаления данные восстановить невозможно.

> [!WARNING Устаревшая функция]
> Этот функционал будет удалён в ближайшем обновлении.

> [!DANGER]
> Не выполняйте команды на продакшене без тестирования.

> [!DANGER Потеря данных]
> Действия необратимы, будьте осторожны.

Результат:

Это обычное примечание без заголовка.

Напоминание
Не забудьте сохранить изменения.

Используйте короткие абзацы для удобства чтения.

Лайфхак
Комбинируйте текст и изображения для лучшего восприятия.

Изменения вступают в силу немедленно.

Срочно
Проверьте права доступа перед публикацией.

После удаления данные восстановить невозможно.

Устаревшая функция
Этот функционал будет удалён в ближайшем обновлении.

Не выполняйте команды на продакшене без тестирования.

Потеря данных
Действия необратимы, будьте осторожны.

Изображения

Markdown позволяет добавлять изображения с использованием стандартного синтаксиса:

Код:

![Альтернативный текст](https://placehold.in/600x200 "Подпись изображения")

Также можно сделать картинку с увеличением (лайтбокс), обернув её в ссылку:

![](https://placehold.in/600x200 "Картинка с увеличением")

Результат:

Видео

Чтобы вставить видео, достаточно просто указать ссылку на него отдельным абзацем:

Код:

Посмотрите полезное видео:

https://vimeo.com/226640632?fl=pl&fe=sh

Видео автоматически будет преобразовано в встроенный плеер на странице.

Результат:

Посмотрите полезное видео:

Колонки

Для создания многоколоночной структуры используется блок :::columns, который закрывается аналогичным тегом :::.

Вертикальное выравнивание колонок задаётся через модификатор после columns, например center для центрирования содержимого.

Сетка состоит из 24 колонок. Ширину каждой колонки можно указать явно (например, 8), или использовать auto для автоматического распределения оставшегося пространства.

Если модификаторы не указаны, колонки будут иметь авторазмер и выравнивание текста по левому краю.

Код:

:::columns center

:::column 8 left
##### Первая колонка (слева)

:::column auto center
##### Вторая колонка (по центру)

:::column 8 right
##### Третья колонка (справа)
:::

Результат:

Первая колонка (слева)

Вторая колонка (по центру)

Третья колонка (справа)

Спойлеры

Спойлеры позволяют скрывать содержимое за раскрывающимся заголовком.

Внутри спойлера можно размещать любой контент: текст, изображения, видео и другие элементы разметки.

Для создания спойлера используется конструкция :::spoiler, которая закрывается аналогичным тегом :::.

Код:

---
:::spoiler Что такое Markdown?
Markdown — это лёгкий язык разметки для форматирования текста.

https://www.youtube.com/watch?v=_PPWWRV6gbA
:::
---
:::spoiler open Легко ли писать Markdown?
Писать легко, особенно если знаком с базовым синтаксисом.
:::
---

Результат:

Что такое Markdown?

Markdown — это лёгкий язык разметки для форматирования текста.

Легко ли писать Markdown?

Писать легко, особенно если знаком с базовым синтаксисом.

Что бы спойлер был заранее открыт добавьте модификатор open

Кодовые блоки

Для оформления многострочных фрагментов кода используется синтаксис тройных обратных кавычек (```) до и после блока.

Можно также указать язык для подсветки синтаксиса.

Код:

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

Результат:

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

Вы так же можете помечать удаленные и добавленные строки при помощи спец. комментария [!code--] или [!code++]

Код:

```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

Результат:

console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')

Используйте [!code highlight] чтобы подсветить линию:

Код:

```ts
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

Результат:

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

You can also highlight multiple lines with a single comment:

Код:

```ts
// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```

Результат:

// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

Используйте [!code focus] что бы подсветить линию:

Код:

```ts
console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');
```

Результат:

console.log('Not focused');
console.log('Focused') // [!code focus]
console.log('Not focused');

Указание языка после тройных кавычек (javascript, html, css, и т.д.) позволяет улучшить подсветку синтаксиса в редакторе.