Данное руководство предназначено для авторов статей РепкаБлог. Руководство содержит краткий перечень функциональных возможностей редактора статей и примеры оформления разделов.
Обратите внимание что в редакторе доступно 2 режима ввода содержимого: Визуальный редактор и Markdown. Markdown режим делает возможным более тонкую настройку вертки статьи. Редактор Markdown совметим с нотацией языка CommonMark с расширениями GFM Tables, GFM Strikethrough, GFM Task list и Heading ID.
Для переключения между режимами нужно воспользоваться переключателем режима редактора: 
Содержание #
- Элементы разметки
- Примеры
- Особенности при работе с редактором
Элементы разметки #
Элементы разметки делятся на 2 группы строчные и блочные элементы.
Строчные элементы могут быть встроены в любую часть строки, при этом могут быть вложены. Пример строчной разметки: <Данный текст> - данная разметка находится внутри строки, при этом выделенный текст одновременно является и полужирным и курсивным.
Блочные элементы разметки в свою очередь не предполагают наличия какой либо другой разметки на строке помимо самого блока. (Например вставленное изображение или таблица всегда находится на отдельной строке). Некоторые блочные элементы поддерживают встраивание строчных элементов разметки.
Строчные элементы разметки #
Полужирный текст #
Визуальный редактор
Кнопка в панели инструментов
отвечает за выделение текста полужирным
Markdown редактор
**Текст**
Курсивный текст #
Визуальный редактор
Кнопка в панели инструментов
отвечает за выделение текста курсивом
Markdown редактор
*Текст*
Подчеркнутый текст #
Визуальный редактор
Кнопка в панели инструментов 
отвечает за выделение текста подчеркиванием
Markdown редактор
<u>Текст</u>
Зачеркнутый текст #
Визуальный редактор
Кнопка в панели инструментов 
отвечает за зачеркивание текста
Markdown редактор
Функционал реализован расширением стандартного синтаксиса markdown GFM Strikethrough
~~Текст~~
Заголовок #
Визуальный редактор
Устанавливаем курсор на строку где будет располагаться заголовок, затем выбираем уровень заголовка. По умолчанию уровень h2. Заголовком первого уровня устанавливается название поста автоматически (Первая строка поста).
Markdown редактор
## Заголовок h2
### Заголовок h3
#### Заголовок h4
##### Заголовок h5
###### Заголовок h6
Якорь #
Добавление якорей позволяет вам напрямую ссылаться на заголовки.
Визуальный редактор
Для начала выберем заголовок к которому будем крепить якорь (кликом). Затем в панели инструментов кликаем на кнопку якоря 
Затем во всплывающем окне указываем текстовый идентификатор якоря (уникальный для статьи, латинские буквы и цифры, без пробелов)
Markdown
Функционал реализован расширением стандартного синтаксиса markdown Heading ID
Чтобы добавить собственный идентификатор заголовка (якорь), заключите его в фигурные скобки в той же строке, что и заголовок.
### Мой заголовок {#anchor}
Связывание с идентификаторами заголовков #
Вы можете создать ссылку на заголовки с настраиваемыми идентификаторами в статье, создав стандартную ссылку со знаком номера (#), за которым следует идентификатор настраиваемого заголовка. Их обычно называют якорными ссылками.
Markdown
[Ссылка на наш заголовок](#anchor)
Другие веб-сайты могут ссылаться на заголовок, добавляя идентификатор пользовательского заголовка к полному URL-адресу веб-страницы (например, [Ссылка на наш заголовок](https://repka-pi.ru/blog/page/guidelines#anchor)) Ссылка на наш заголовок.
Встраивание кода в строку #
Визуальный редактор
Кнопка в панели инструментов
отвечает за встраивание кода в строку.
Пример встраивания: sh script.sh
Markdown редактор
Пример встраивания: `sh script.sh`
Ссылка #
Визуальный редактор
Для того чтобы добавить ссылку, сперва выделите текст, который будет являться ссылкой.
В панели инструментов станет доступна кнопка создания ссылки:
Кликаем на кнопку создания ссылки. И видим всплывающее окно над выделенным фрагментом текста, где мы можем указать адрес ссылки. Доступно 2 вида ссылок:
- Ссылка по абсолютному пути (Например: https://habr.com/ru/articles/719536/)
- Ссылка на якорь (Например: #link)
Указываем адрес ссылки и сохраняем.
Markdown редактор
Поддерживается только справичный формат указания ссылок. Формат с угловыми скобками <ссылка> - не поддерживается редактором. Например:
[Ссылка на хабр](https://habr.com/ru/articles/719536/)
Ссылка на файл #
Ссылка на файл - это обычная ссылка, но при клике на неё браузер начинает скачивать ресурс или файл на который эта ссылка указывает.
Визуальный редактор
Для того чтобы добавить ссылку на файл выделяем текст, который будет являться ссылкой.
В панели инструментов станет доступна кнопка создания ссылки на файл:
Кликаем на кнопку создания ссылки на файл. И видим всплывающее окно над выделенным фрагментом текста, где мы можем выбрать файл на компьютере для загрузки в редактор.
Выбираем файл для загрузки и ждем пока загрузка завершится. Максимальный возможный размер загружаемого файла: 100МБ. После этого файл можно скачать по ссылке:
Текст, скачать файл. Текст
Markdown редактор
Функционал реализован расширением стандартного синтаксиса markdown с привязкой на конкретное значение атрибута title у ссылки.
Для указания ссылки на скачивание файла просто добавьте ключевое слово “download“ вторым параметром ссылки (title ссылки):
[Текст](url “download“)
Например так:
[Скачать файл](https://ссылка.на/скачивание.файла "download")
Блочные элементы разметки #
Цитата #
Визуальный редактор
Для добавления блока цитаты необходимомо выбрать кнопку “Цитата“ в панели инструментов:
Поле этого можно запонять тело блока цитаты. Например:
Это пример блока цитаты
В визуальном редакторе поддерживаются цитаты любой сложности, слюбым кол-вом строк и вложенных блоков. Например:
Эта цитата содержит текст
А также здесь есть
маркированный список
При конвертации в markdown цитаты содержащие одну строку будет конвертироваться в markdown совместимый синтаксис.
Если же цитата содержит несколько строк или включает другие блочные элементы верстки, то конвертация будет происходить в HTML.
Markdown редактор
> Это пример блока цитаты
Список задач #
Список задач выглядит так:
-
Задача первая
-
Задача вторая
-
Задача третья
Элемент позволяет перечислять списком перечень задач и отмечать решенные / нерешенные задачи чекбоксами.
Визуальный редактор
Для создания списка задач выбираем соответствующий инструмент в панели инструментов:
Затем заполняем список задач и отмечаем решенные:
Markdown редактор
Функционал реализован расширением стандартного синтаксиса markdown GFM Task list
- [ ] Задача первая
- [x] Задача вторая
- [ ] Задача третья
Маркированный список #
Маркированный список выглядит так:
- Кошка
- Собака
- Мышь
Визуальный редактор
Для создания маркированного списка выбираем соответствующий инструмент в панели инструментов:
Затем выполняем наполнение списка значениями
Markdown редактор
- Кошка
- Собака
- Мышь
Нумерованный список #
Нумерованный список выглядит так:
- Завтрак
- Обед
- Ужин
Визуальный редактор
Для создания нумерованного списка выбираем соответствующий инструмент в панели инструментов:
Затем выполняем наполнение списка значениями
Markdown редактор
1. Завтрак
2. Обед
3. Ужин
Блок кода #
Блок кода предназначен для вставки в статью отформатированного участка кода с сохранением табуляции и подсветкой синтакиса. Для подсветки синтаксиса используется библиотека Highlight Js
Визуальный редактор
Для добавления блока кода нужно воспользоваться инструментом “Блок кода” из панели инструментов:
При клике на этот инструмент в редакторе появляется область для ввода участка кода. Также можно выбрать синтаксис языка из выпадающего списка.
package main
import "fmt"
func main() {
fmt.Println("hello world")
}
Markdown редактор
Допустимые значения синтакиса языков программирования:
- Не указано - синтаксис не будет подсвечиваться
- auto - Выбор синтаксиса автоматически
- bash
- c
- cpp
- csharp
- css
- diff
- go
- ini
- java
- javascript
- json
- kotlin
- less
- lua
- makefile
- xml
- markdown
- objectivec
- perl
- php
- php-template
- plaintext
- python
- python-repl
- r
- ruby
- rust
- scss
- shell
- sql
- swift
- typescript
- vbnet
- yaml
Пример оформления блока:
```go
package main
import "fmt"
func main() {
fmt.Println("hello world")
}
```
Изображение #
Визуальный редактор
Для добавления изображения нужно воспользоваться инструментом “Изображение” из панели инструментов:
При клике на этот инструмент в редакторе появляется форма добавления изображения:
Вставку изображения на этой форме можно произвести тремя способами:
- Добавить url на картинку со стороннего ресурса. Но будьте осторожны - если сторонний ресурс удалит/изменит/поменяет ссылку на изображение, то изображение пропадет из Вашей статьи!!!
- Выбрать файл с устройства и загрузить его.
- Вставить файл из буфера с помощью комбинации клавиш Ctrl+V
После вставки изображения можно указать:
- Описание изображения - это подпись к рисунку, отображаемая под ним в режиме просмотра поста, а также вспывающая при наведении курсора мыши.
- Текст до загрузки изображения - это текст, показывающийся на месте изображения до его загрузки на страницу (для устройств с медленным каналом интернета)
Markdown редактор
Видео или фрейм #
Данный инструмент призван облегчить встраивание страниц и видео со строннних ресурсов
Визуальный редактор
Для встраивания ресурса нужно воспользоваться инструментом “Видео или фрейм” из панели инструментов:
При клике на этот инструмент в редакторе появляется форма добавления ресурса:
Обратите внимание что встраиваемый ресурс не должен иметь ограничений на встраивание на своей стороне.
Список разрешенных сервисов для вставки ресурсов:
- youtube.com
- rutube.ru
- codesandbox.io
- gist.github.com
- instagram.com
- twitter.com
- twitch.tv
- vimeo.com
- codepen.io
- glitch.com
- jsbin.com
- jsfiddle.net
- repl.it
- reddit.com
- slideshare.net
- soundcloud.com
- stackblitz.com
Пример встраивания видео из youtube
Выделяем и копируем url браузерной строки со страницы с конкретным видеороликом:
Вставляем url в форму добавления ресурса и кликаем кнопку “Вставить“:
После вставки можем наблюдать встроенный ресурс
При клике на контейнере можно указать размеры встраиваемого контейнера (необязательно)
Markdown редактор
Встраивание ресурсов в markdown редакторе возможно через HTML синтаксис. Например:
<iframe src="https://www.youtube.com/embed/_zL4Zir-mww" frameborder="0" allowfullscreen="true" width="758" height="400" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" sandbox="allow-scripts allow-same-origin allow-presentation allow-popups"></iframe>
Таблица #
Визуальный редактор
Для добавления таблицы нужно воспользоваться инструментом “Таблица” из панели инструментов:
При клике на этот инструмент в редакторе появляется таблица:
После вставки таблицы мы можем менять ее конфигурацию через контекстное меню таблицы на панели инструментов:
Markdown редактор
Функционал реализован расширением стандартного синтаксиса markdown GFM Tables.
Стандартная таблицы в синтаксисе markdown содержит минимум 1 столбец и минимум 1 строку - заголовок. Если у таблицы нет загловка, то данная таблица не совместима с markdown синтаксисом и визуальный редактор сконвертирует её в html.
Конвертация в html будет произведена визуальным редактором автоматически если:
- У таблицы нет заголовка
- У таблицы есть объединенные ячейки
- Ячейки таблицы содержат многострочные участки текста или несколько блочных элементов разметки
- Ячейка таблицы содержит список, цитату, блок кода
- Имеет более одной строки заголовка, или имеет ячейку заголовок или строку заголовок
Пример markdown совместимой таблицы:
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Текст 1 | Текст 2 | Текст 3 |
| Текст 4 | Текст 5 | Текст 6 |
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
| --- | --- | --- |
| Текст 1 | Текст 2 | Текст 3 |
| Текст 4 | Текст 5 | Текст 6 |
Пример markdown несовместимой таблицы 1:
Текст 1 | Текст 2 | Текст 3 |
Текст 4 | Текст 5 | Текст 6 |
Текст 7 | Текст 8 | Текст 9 |
<table><tbody><tr><td colspan="1" rowspan="1"><p>Текст 1</p></td><td colspan="1" rowspan="1"><p>Текст 2</p></td><td colspan="1" rowspan="1"><p>Текст 3</p></td></tr><tr><td colspan="1" rowspan="1"><p>Текст 4</p></td><td colspan="1" rowspan="1"><p>Текст 5</p></td><td colspan="1" rowspan="1"><p>Текст 6</p></td></tr><tr><td colspan="1" rowspan="1"><p>Текст 7</p></td><td colspan="1" rowspan="1"><p>Текст 8</p></td><td colspan="1" rowspan="1"><p>Текст 9</p></td></tr></tbody></table>
Пример markdown несовместимой таблицы 2:
Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
Текст 1 | Текст 2 | Текст 3 |
Текст 4 | Текст 5 |
<table><tbody><tr><th colspan="1" rowspan="1"><p>Заголовок 1</p></th><th colspan="1" rowspan="1"><p>Заголовок 2</p></th><th colspan="1" rowspan="1"><p>Заголовок 3</p></th></tr><tr><td colspan="1" rowspan="1"><p>Текст 1</p></td><td colspan="1" rowspan="2"><p>Текст 2</p></td><td colspan="1" rowspan="1"><p>Текст 3</p></td></tr><tr><td colspan="1" rowspan="1"><p>Текст 4</p></td><td colspan="1" rowspan="1"><p>Текст 5</p></td></tr></tbody></table>
Горизонтальный разделитель #
Пример разделителя приведен ниже:
Горизонтальный разделитель призван помочь визуально отделить один тематический раздел от другого.
Визуальный редактор
Для добавления горизонтального разделителя нужно воспользоваться инструментом “Горизонтальный разделитель” из панели инструментов:
Markdown редактор
Строка, состоящая из 0–3 пробелов, за которыми следует последовательность из трех или более совпадающих символов -, _ или *, за каждым из которых может следовать любое количество пробелов или табуляции. Например:
Текст
---
Текст
___
Текст
***
Текст
Спойлер #
Пример спойлера приведен ниже:
Стабилитрон BZT52C5V6
Следующая модель Repka Pi 4 соответственно проектировалась как альтернатива Raspberry Pi 4.
Спойлер - это контент (текст, фото, видео, блок кода), который при загрузке поста или статьи изначально скрыт. При этом пользователь может раскрыть спойлер и просмотреть его содержимое.
Визуальный редактор
Для добавления спойлера нужно воспользоваться инструментом “Спойлер” (иконка глаза) из панели инструментов:
После этого необходимо:
- ввести заголовок спойлера;
- нажать на стрелочку слева от заголовока и переместить курсор печати во внутреннюю часть раскрывшегося спойлера ЛИБО просто нажать Enter, находясь в заголовке;
- соответственно, наполнить спойлер контентом.
Markdown редактор
Парный тэг details и вложенный в него с новой строки парный тэг summary (для заголовка). Далее вплоть до закрывающего тэга details с новой строки после закрывающего summary может идти содержимое спойлера.
Например, так выглядит Markdown код спойлера, представленного выше:
<details>
<summary>Стабилитрон BZT52C5V6</summary>
Следующая модель Repka Pi 4 соответственно проектировалась как альтернатива Raspberry Pi 4.
</details>
Примеры оформления статей #
Формирование содержания статьи #
Для формирования содержания нам нужно создать нумерованный список в начале статьи, создать якоря у заголовков и связать элементы списка и якоря при помощи ссылок.
Создаем заголовок Содержание с перечнем всех заголовков внутри статьи с учетов вложенности.
Например:
Оглавление #
- Заголовок 1
- Вложенный раздел 1
- Вложенный раздел 2
- Заголовок 2
Заголовок 1 #
Текст раздела
Вложенный раздел 1 #
Текст раздела
Вложенный раздел 2 #
Текст раздела
Заголовок 2 #
Текст раздела
Затем к каждому из заголовков привязываем якорь
Поcле этого связываем элементы списка и якоря при помощи ссылок.
После этого оглавление должно выглядеть так:
Оглавление #
Особенности при работе с редактором #
Замечены некоторые особенности при работе с редактором в Браузере Microsoft Edge и FIrefox в случае если на комьютере пользователя установлено ПО Kaspersky Antivirus, а также браузерные расширения Kaspersky Protection Firefox и Kaspersky Protection Edge.
Негативное влияние данного расширение замечено по таким признакам:
- В редакторе при нажатии на любую клавишу на клавиатуре пропадают раннее добавленные в статью изображения.
- В редакторе после нажатия на любую клавишу на клавиатуре пропадает возможность перехода к Markdown редактору