¶ Обзор
Markdown — это легкий язык разметки с синтаксисом форматирования обычного текста. Это де-факто стандарт для написания документации в крупных репозиториях кода, таких как GitHub.
Wiki.js поддерживает полную спецификацию CommonMark и добавляет несколько полезных расширений (включая надстройки Github Flavored Markdown).
¶ Руководство пользователя
¶ Блочные цитаты
Используйте символ больше (>), за которым следует пробел, перед каждой строкой текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
> Первая строка цитаты
> Вторая строка цитаты
Первая строка цитаты
Вторая строка цитаты
Добавив класс на отдельной строке после цитаты, вы можете изменить её внешний вид. Обратите внимание, что эти стили специфичны для Wiki.js и в других приложениях будут отображаться как обычные цитаты.
- Синий:
is-info - Зеленый:
is-success - Желтый:
is-warning - Красный:
is-danger
> Первая строка цитаты
> Вторая строка цитаты
{.is-info}
Это стандартная нестилизованная цитата.
Это цитата с классом
{.is-info}.
Это цитата с классом
{.is-success}.
Это цитата с классом
{.is-warning}.
Это цитата с классом
{.is-danger}.
¶ Жирный текст
Используйте двойные звездочки до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов. - Выделите текст и нажмите CTRL + B
Обычный **жирный** текст
Обычный жирный текст
¶ Блоки кода
Используйте тройные обратные кавычки до и после выделения текста, на отдельных строках.
- Используйте инструмент Блок кода (Code Block) на левой панели инструментов.
```
function example (text) {
const result = 'какой-то результат'
}
```
По умолчанию блок кода отображается как обычный преформатированный текст. Однако для кода программирования предпочтительнее использовать подсветку синтаксиса для удобства чтения. Чтобы указать язык программирования, используемый в блоке кода, просто добавьте ключевое слово языка сразу после открывающих тройных обратных кавычек:
```java
// ваш код здесь
```
См. список поддерживаемых языков (около 185 языков программирования).
¶ Вкладки контента
Используйте заголовки, добавив класс {.tabset} к родительскому заголовку. Текст родительского заголовка не будет отображаться в конечном результате.
Обратите внимание, что вы можете использовать любой уровень заголовка, при условии, что дочерние заголовки будут на один уровень выше. Например, если родительский заголовок — ### (h3), то заголовки вкладок должны быть #### (h4). Максимальный уровень заголовка для родителя — 5, а для дочерних — 6.
# Вкладки {.tabset}
## Первая вкладка
Здесь любой контент для первой вкладки...
## Вторая вкладка
Здесь любой контент для второй вкладки...
## Третья вкладка
Здесь любой контент для третьей вкладки...
¶ Эмодзи
Используйте синтаксис :идентификатор:
См. шпаргалку по эмодзи для получения полного списка доступных вариантов.
:apple:
Можно использовать :fire: прямо в тексте
Можно использовать 
прямо в тексте.
¶ Сноски
Используйте синтаксис [^1] для указания места сноски в основном тексте и [^1]: это сноска для самого текста сноски. Сноски автоматически появятся в нижней части страницы под горизонтальной линией.
¶ Заголовки
Используйте от 1 до 6 символов решетки (#), за которыми следует пробел, перед текстом.
- На нужной строке нажмите выпадающую кнопку
на панели инструментов. - На нужной строке нажмите CTRL + ALT + Right (Вправо), чтобы увеличить уровень заголовка.
- На нужной строке нажмите CTRL + ALT + Left (Влево), чтобы уменьшить уровень заголовка.
# Заголовок 1
## Заголовок 2
### Заголовок 3
#### Заголовок 4
##### Заголовок 5
###### Заголовок 6
¶ Горизонтальная линия
Используйте тройные дефисы на отдельной строке.
- Нажмите кнопку
на панели инструментов.
Первый абзац текста
---
Второй абзац текста
Первый абзац текста
Второй абзац текста
¶ Изображения
Используйте синтаксис .
Альтернативный текст — текст, который отображается, если изображение не удалось загрузить.
Путь к изображению — путь к файлу изображения.
Заголовок изображения — отображается при наведении курсора на картинку.
- Используйте инструмент Медиафайлы (Assets) на левой панели инструментов.
Второй абзац  текст
Иногда изображения слишком велики, или вы хотите, чтобы изображение занимало всё доступное пространство.
Просто добавьте размеры в конце пути к изображению в следующем формате:
Вы также можете опустить одно из значений для автоматического сохранения пропорций изображения:
Также можно использовать другие единицы измерения, например %. Это полезно, когда нужно, чтобы изображение занимало всё доступное пространство:
¶ Встроенный код (Инлайн-код)
Используйте символ обратной кавычки до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
Нажмите `Enter` для продолжения
Нажмите Enter для продолжения
¶ Курсив
Используйте символ одиночной звездочки до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов. - Выделите текст и нажмите CTRL + I
Обычный *курсивный* текст
Обычный курсивный текст
¶ Клавиши клавиатуры
Используйте тег <kbd> перед и </kbd> после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
Нажмите <kbd>CTRL</kbd> + <kbd>C</kbd>
Нажмите CTRL + C
¶ Ссылки
Используйте синтаксис [Текст ссылки](Цель ссылки).
- Используйте инструмент Ссылка (Link) на левой панели инструментов.
[Текст ссылки](https://wiki.js.org/about)
Второй абзац [ссылка](/install/requirements) текст
Второй абзац ссылка текст
¶ Диаграммы Mermaid
Используйте блок кода с указанием языка mermaid.
См. сайт Mermaid для справки по языку.
```mermaid
sequenceDiagram
Alice ->> Bob: Привет, Боб, как дела?
Bob-->>John: А у тебя как, Джон?
Bob--x Alice: У меня всё отлично!
Bob-x John: У меня всё отлично!
Note right of John: Боб долго думает,<br/>очень долго,<br/>так долго,<br/>что текст не<br/>помещается в строку.
Bob-->Alice: Уточню у Джона...
Alice->John: Да... Джон, как дела?
```
¶ Нумерованные списки
Используйте цифру, за которой следует символ точки и пробел, перед каждой строкой текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
1. Первый пункт списка
1. Второй пункт списка
1. Третий пункт списка
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
Хотя вы можете нумеровать каждую строку по порядку, проще использовать цифру 1 на каждой строке. Итоговый результат будет автоматически пронумерован по возрастанию. Таким образом, вам не придется перенумеровывать каждую строку при добавлении или удалении строк в будущем.
¶ Диаграммы PlantUML
Используйте блок кода с указанием языка plantuml.
См. сайт PlantUML для справки по языку.
```plantuml
Bob->Alice : привет
```
¶ Зачеркнутый текст
Используйте символы двойной тильды до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
Обычный ~~зачеркнутый~~ текст
Обычный зачеркнутый текст
¶ Нижний индекс
Используйте символ одиночной тильды до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
H~2~O (Вода)
H2O (Вода)
¶ Верхний индекс
Используйте символ одиночного каре (крышки ^) до и после выделения текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
E=mc^2^
E=mc2
¶ Таблицы
Используйте синтаксис:
| Заголовок A1 | Заголовок B1 | Заголовок C1 |
|--------------|--------------|--------------|
| Ячейка A2 | Ячейка B2 | Ячейка C2 |
| Ячейка A3 | Ячейка B3 | Ячейка C3 |
...
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|-------------|-------------|-------------|
| Яблоко | Груша | Слива |
| Апельсин | Банан | Виноград |
что даст следующий результат:
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Яблоко | Груша | Слива |
| Апельсин | Банан | Виноград |
Добавив класс dense на отдельной строке после таблицы, вы можете сделать так, чтобы таблица использовала меньший шрифт и меньшие отступы. Например:
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|-------------|-------------|-------------|
| Яблоко | Груша | Слива |
| Апельсин | Банан | Виноград |
{.dense}
что даст следующий результат:
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Яблоко | Груша | Слива |
| Апельсин | Банан | Виноград |
¶ Списки задач (Чекбоксы)
Используйте синтаксис - [ ] или - [x].
- [x] Выполненная задача
- [x] Еще одна выполненная задача
- [ ] Невыполненная задача
- Выполненная задача
- Еще одна выполненная задача
- Невыполненная задача
¶ Маркированные списки
Используйте символ звездочки или дефиса, за которым следует пробел, перед каждой строкой текста.
- Выделите текст и нажмите кнопку
на панели инструментов.
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
Добавив класс на отдельной строке после списка, вы можете изменить его внешний вид:
links-list(список ссылок)grid-list(сетка)
Например:
- Элемент сетки 1
- Элемент сетки 2
- Элемент сетки 3
{.grid-list}
- [Заголовок ссылки 1 *Описание подзаголовка*](https://www.google.com)
- [Заголовок ссылки 2 *Еще одно описание*](https://www.google.com)
- [Заголовок ссылки 3 *Третье описание*](https://www.google.com)
{.links-list}
что даст следующий результат:
- Элемент сетки 1
- Элемент сетки 2
- Элемент сетки 3
и:
- Заголовок ссылки 1 Описание подзаголовка
- Заголовок ссылки 2 Еще одно описание
- Заголовок ссылки 3 Третье описание
Обратите внимание, что эти стили специфичны для Wiki.js и в других приложениях будут отображаться как обычные списки.
¶ Синтаксис декорирования (Decorate Syntax)
В некоторых случаях использование синтаксиса {.class-name} применяет класс стиля к неправильному элементу из-за неоднозначности контента. Например:
> Текст цитаты
> - Строка 1
> - Строка 2
{.is-info}
Поскольку парсер не знает, должен ли класс .is-info применяться к списку или к цитате, он применяется к неправильному элементу (самому глубоко вложенному предшествующему элементу).
Вы можете указать правильную цель, используя вместо этого синтаксис декорирования <!-- {tag-name:.class-name} -->. Например:
> Текст цитаты
> - Строка 1
> - Строка 2
<!-- {blockquote:.is-info} -->
Теперь класс .is-info будет корректно применен именно к элементу цитаты.