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

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

Встроенный код (inline code):

Код:

Выполните команду `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>

Результат:

Разделители

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

Код:

---
___
***

Результат:

Списки

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

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

Код:

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

Результат:

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

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

Код:

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

Результат:

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

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

Код:

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

Результат:

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

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

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

Код:

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

Результат:

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

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

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

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

Код:

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

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

Результат:

• Как ухаживать за собакой
  Важно для здоровья собаки:

  • Регулярно гулять
  • Вкусно кушать
  • Чтобы хозяин почаще чесал

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

Таблицы

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

Код:

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

Результат:

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

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

Код:

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

Результат:

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

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

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

Код:

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

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

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

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

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

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

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

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

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

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

Результат:

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

Напоминание

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

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

Лайфхак

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

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

Срочно

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

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

Устаревшая функция

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

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

Потеря данных

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

Изображения

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

Код:

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

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

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

Результат:

Видео

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

Код:

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

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

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

Результат:

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

Колонки

Для создания многоколоночной структуры используется блок :::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?
Писать легко, особенно если знаком с базовым синтаксисом.
:::
---

Результат:

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

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

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

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

Код:

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

Результат:

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

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

Калькулятор полей

Что умеет калькулятор полей

Калькулятор может рассчитывать стоимость, количество или другие значения при заполнении полей. Результат расчетов производится по указанной вами формуле и виден клиентам в режиме реального времени.
Калькулятор считает значения по заданной формуле, используя данные, введенные клиентом;
Поле Результат расчетов поддерживает математические операции и самовыполняемый JS;
Может выводить результат в любом месте страницы через вставку переменной вида {{ form.ID.имя_переменной }};
Полученный результат можно использовать в другом результате. Это удобно для показа промежуточных результатов. Например, цена без скидки и со скидкой.

Текущие ограничения

Калькулятор полей доступен только в вертикальных формах. Не поддерживается горизонтальной формой, корзиной или квизом.
Поддерживает расчет только числовых полей Смотреть таблицу

Создаем калькулятор полей

Рассмотрим пример создания калькулятора для расчета стоимости окна.
Добавьте элемент Вертикальная форма
Добавьте нужные поля, например:

• Ваше имя (тип поля Имя)
• Ваш номер телефона (тип поля Телефон)
• Высота окна (тип поля Число)
• Ширина окна (тип поля Число)
• Цена за квадратный метр (тип поля Скрытое поле)
• Дополнительные опции (тип поля Выбор)
• Монтаж (тип поля Галочка)
  Укажите имена переменных для всех полей формы
  В настройках каждого поля укажите понятные вам имена переменных, например:
• высота_окна
• ширина_окна
• цена_за_м2
• опции
• монтаж
  Можно использовать латиницу или кириллицу на выш выбор. Пример на скриншоте ниже:
  

  

  Важно!

  Переменные должны быть уникальными в рамках формы
  [!TIP Лайфхак]
  Добавьте поле Разделитель для визуального разделения полей формы и Результата расчетов
  Добавьте поле Результат вычислений
  Укажите переменную для результата.
  У нас это переменная итоговая стоимость
  

  

  
  Укажите формулу для расчета
  В настройках поля Результат вычислений укажите формулу для расчета.
  Вы можете использовать:

• математические операторы: +, -, *, /, ^, (, ), %, √
• формулу в виде JS-кода. JS-формула должна быть самовызывающейся функцией.
  В нашем примере формула имеет вид:
  стоимость_окна= ( высота_окна * ширина_окна * цена_за_м2 ) + опции + монтаж
  

  

  
  Сохраните изменения
  Готово! В режиме просмотра страницы вы можете заполнить форму, и увидеть результаты расчета в реальном времени в поле Результат расчета.

Полезные заметки

Можно использовать один результат в другом результате
Переменные из одного расчёта можно использовать в другом.
Пример:
Первая формула считает цену без скидки. Вторая формула на основе первой рассчитывает скидку.
У вас есть переменная в результате без скидки: price_without_discount.
Формула для расчёта цены со скидкой будет иметь вид: price_without_discount - 300.
Можно добавить несколько полей «Результат расчёта»
Часть из них можно скрыть с помощью чекбокса «Скрыть от посетителей».
Клиент не увидит эти данные, но они придут вам в заявке.
Пример:
Вы показываете клиенту цену со скидкой, а цену без скидки видите только в заявке.
Можно скрыть кнопку «Отправить заявку»
Клиент сможет сделать расчёт, но не сможет отправить заявку через форму.
Удобно, если форма используется только как калькулятор, без сбора контактных данных.

Таблица поддерживаемых полей