Разметка с помощью TextSimple

TextSimple — это синтаксис разметки, который предназначен для создания HTML-кода. В его основе лежат идеи MarkDown и TextLite. В отличие от других парсеров, TextSimple ориентирован именно на генерацию управляемого HTML-кода. Например с его помощью можно указывать css-классы и стили, что невозможно сделать в других парсерах.

Основные правила

TextSimple обрабатывает каждую строчку индивидуально — она завершается переносом строки Enter, как и обычные тексты.

По умолчанию в Albireo CMS парсер включен для всех страниц. Это можно изменить в конфигурации config.php или явно указав на странице parser: textsimple. Если нужно отключить парсер на одной странице, то нужно указать parser: -.

Автоматическая расстановка абзацев

TextSimple автоматически расставляет html-абзацы <p>, при условии, что строка не начинается с символа <.

Заголовки H1..H6

H1..H6-заголовки указываются в одной строке. Код указывается в её начале.

h1 заголовок
h2 заголовок
h3 заголовок
h4 заголовок
h5 заголовок
h6 заголовок

Также поддерживается MarkDown синтаксис:

# h1 заголовок
## h2 заголовок
### h3 заголовок
#### h4 заголовок
##### h5 заголовок
###### h6 заголовок

Этот код будет преобразован в HTML:

<h1>заголовок</h1>
<h2>заголовок</h2>
<h3>заголовок</h3>
<h4>заголовок</h4>
<h5>заголовок</h5>
<h6>заголовок</h6>

Строчные коды форматирования текста

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

текст _курсив_ текст
текст *курсив* текст

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

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

текст `код` текст -> текст <code>код</code> текст

текст ~~зачеркнутый~~ текст -> текст <del>зачеркнутый</del> текст

текст @выделенный текст@ -> текст <mark>выделенный текст</mark>
нажмите @@Enter@@ для продолжения -> нажмите <kbd>Enter</kbd> для продолжения

Результат:

текст курсив текст
текст курсив текст
текст полужирный текст
текст полужирный текст
текст полужирный курсив текст
текст код текст
текст ~~зачеркнутый~~ текст
текст выделенный текст
нажмите Enter для продолжения

В случаях, когда код находится в начале текста, указывайте два пробела:

__(t-red) *Текст* (не сработает)
__(t-green)  *Текст* (сработает)

*Текст* (не сработает)

Текст (сработает)

Если нужно сохранить в тексте символы *, _, @, `, то их следует экранировать с помощью символа \.

Lorem ipsum dolor \*sit amet\*, consectetur *adipiscing elit*, sed do eiusmod. 
Lorem ipsum dolor \_sit amet\_, consectetur _adipiscing elit_, sed do eiusmod. 
Lorem ipsum dolor \@sit amet\@, consectetur @adipiscing elit@, sed do eiusmod. 
Lorem ipsum dolor \`sit amet\`, consectetur `adipiscing elit`, sed do eiusmod.

Lorem ipsum dolor *sit amet*, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor _sit amet_, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor @sit amet@, consectetur adipiscing elit, sed do eiusmod.
Lorem ipsum dolor `sit amet`, consectetur adipiscing elit, sed do eiusmod.

Горизонтальна линия HR

Линия указывается в виде

hr

Также можно использовать три минуса:

---

Результат:

<hr>

Цитаты BLOCKQUOTE

Цитата BLOCKQUOTE может быть создана с помощью однострочного кода:

bqq цитата

Либо можно использовать

> цитата

Если цитата располагается на несколько строк, то нужно использовать блок:

bq
	цитата
/bq

или

blockquote
	цитата
/blockquote

Во всех случаях это создаст HTML:

<blockquote>цитата</blockquote>

Абзац P

Для явного указания тэга абзаца <p>, используется символ подчеркивания _ в начале строки.

_ текст
_ текст
_ текст

Результат:

<p>текст</p>
<p>текст</p>
<p>текст</p>

Символ _ выбран исходя из того, что доступен в любой раскладке клавиатуры.

Перенос строки BR

Если нужно отбить абзацы текста с помощью <br>, то можно использовать в начале строки

текст
br
br
текст

Указание CSS-классов

Можно задать произвольный css-класс в виде скобок:

_(класс) Текст
h1(класс) Заголовок
ul(класс)
div(класс)
__(класс1 класс2) Текст

Например:

_(t-bold) Текст
<p class="t-bold">Текст</p>

_(t-bold t-red500) Текст
<p class="t-bold t-red500">Текст</p>

Указание атрибута style

HTML-style указывается во вторых скобках:

_(класс)(стили) Текст
h1(класс)(стили) Заголовок
div(класс)(стили)
section(класс)(стили)
__()(стили) Текст

Примеры:

_(t-bold)(color: red) Текст
<p class="t-bold" style="color: red">Текст</p>

_()(color: red) Текст
<p class="" style="color: red">Текст</p>

_(t-bold)(color: var(--primary500)) Текст
<p class="t-bold" style="color: var(--primary500)">Текст</p>

Ссылки A

Ссылки можно указывать в Markdown-варианте:

[](https://en.wikipedia.org/)
[Название](https://en.wikipedia.org/)

Результат:

<a href="https://en.wikipedia.org/">https://en.wikipedia.org/</a>
<a href="https://en.wikipedia.org/">Название</a>

Если ссылка начинается с //, то это автоматически указывает на UPLOADS_URL. Если указать ##, то это корень сайта.

Также можно явно указывать php-константы в прямых скобках: UPLOADS_URL, SITE_URL, PAGES_URL:

[](##blog)                  -> https://site.com/blog
[](//image.jpg)             -> https://site.com/website/uploads/image.jpg
[]([UPLOADS_URL]image.jpg)  -> https://site.com/website/uploads/image.jpg
[]([SITE_URL]blog)          -> https://site.com/blog
[]([PAGES_URL]image.jpg)    -> https://site.com/website/pages/image.jpg

Можно указать дополнительные параметры ссылки через пробел после адреса:

[Название](https://en.wikipedia.org/ class="t-red" rel="nofollow" target="_blank")

<a href="https://en.wikipedia.org/" class="t-red" rel="nofollow" target="_blank">Название</a>

Изображения IMG

Изображения можно указывать в MarkDown-варианте:

![](https://site.com/image.jpg)
![Подсказка](https://site.com/image.jpg)

Результат

<img src="https://site.com/image.jpg" alt="" title="">
<img src="https://site.com/image.jpg" alt="Подсказка" title="Подсказка">

Для них действуют те же правила, что и для ссылок.

![](##image.jpg)             -> https://site.com/image.jpg
![](//image.jpg)             -> https://site.com/website/uploads/image.jpg
![]([UPLOADS_URL]image.jpg)  -> https://site.com/website/uploads/image.jpg
![]([SITE_URL]image.jpg)     -> https://site.com/image.jpg
![]([PAGES_URL]image.jpg)    -> https://site.com/website/pages/image.jpg

Можно указать дополнительные параметры изображения через пробел после адреса:

![Подсказка](https://site.com/image.jpg class="mar20" width="400")
<img src="https://site.com/image.jpg" alt="Подсказка" title="Подсказка" class="mar20" width="400">

![подсказка](//file.webp width="300" class="glightbox cursor-pointer")
<img src="https://site.com/website/uploads/file.webp" width="300" class="glightbox cursor-pointer" title="подсказка" alt="подсказка">

Изображения в ссылке (лайтбокс)

Обычно это используется для создания лайтбокса glightbox (используется по умолчанию).

!![](//image.webp)
!![](//image.webp width="300")

Это создаст html-код по тем же правилам, что и для ссылок и изображений:

<a href="путь-к-uploads/image.webp" class="glightbox"><img src="путь-к-uploads/image.webp"></a>
<a href="путь-к-uploads/image.webp" class="glightbox"><img src="путь-к-uploads/image.webp" width="300"></a>

При необходимости можно использовать дополнительные атрибуты ссылки в фигурных скобках.

!![My image](//image.webp width="200"){data-fslightbox}
!![My image](//image.webp width="200"){class="glightbox"}
!![My image](//image.webp){data-fslightbox}
!![](//image.webp){data-fslightbox}
!![](//image.webp){target="_blank"}
!![](//image.webp){}

!![My image](//image.webp width="200"){data-fslightbox}

<a href="путь-к-uploads/image.webp" data-fslightbox><img src="путь-к-uploads/image.webp" width="200" alt="My image"></a>

Для подключения лайтбоксов к странице нужно в её полях указать:

use.glightbox: +
use.fslightbox: +

Тэги с закрывающим тэгом

Следующие simple-коды двойные <tag> </tag>:

article
aside
blockquote
bq
details
detailsopen
div
dl
fieldset
footer
form
header
hgroup
label
main
nav
ol
section
select
table
tbody
tfoot
thead
tr
ul

Блочные коды в одной строке

Несколько блочных тэгов можно задавать в одной строке через ||.

div(layout-center-wrap) || div(layout-wrap)
	текст
/div || /div

Блок DIV

Тэг DIV может быть создан с помощью двойного кода div :

div
	текст
/div

либо одиночного с помощью __ (двойное подчеркивание):

__ текст

Результат:

<div>текст</div>

Списки UL/OL/LI

Элементы списка можно указывать в нескольких вариантах. Обязательно нужно указывать обрамляющие ul /ul, ol /ol, которых нет в синтаксисе Markdown.

ul
- Список
* Список
+ Список
li Список (формат TextSimple)
li(t-red) Список (формат TextSimple)
/ul

ol
- Список
* Список
+ Список
li Список (формат TextSimple)
li(t-red) Список (формат TextSimple)
/ol

Списки DL/DT/DD

Элементы dl-списка строятся так:

dl
	dt Термин 1
	dd Определение термина 1

	dt Термин 2
	dd Определение термина 2
/dl

Этот simple-код будет преобразован в HTML:

<dl>
	<dt>Термин 1</dt>
	<dd>Определение термина 1</dd>
    
	<dt>Термин 2</dt>
	<dd>Определение термина 2</dd>
</dl>

Блок details

Такой блок используется для отображения скрытой информации. В простом виде он выглядит так:

details
summary Нажмите, чтобы открыть блок

Текст
/details

Нажмите, чтобы открыть блок

Текст

Если нужно чтобы блок был сразу открыт, то используйте detailsopen:

detailsopen
summary Уже открытый блок

Текст
/details

Уже открытый блок

Текст

Используйте css-классы, чтобы изменить оформление блока.

details(bg-primary50)
    summary(bg-primary200 hover-bg-primary300 pad10) Нажмите, чтобы открыть блок
    
    div(pad25-rl pad20-t pad5-b)
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    /div
/details

Нажмите, чтобы открыть блок

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Текст без обработки

Если какой-то текст нужно разместить без обработки, то его следует разместить так:

<!-- nosimple --> текст без обработки <!-- /nosimple -->

Либо использовать <keep> (существующая, но не рекомендуемая альтернатива)

<keep> текст без обработки </keep>

Преформатированный текст PRE

Рекомендуется использовать такой вариант:

```
преформатированный текст
```

Этот код будет обрамлён в <pre>, а содержимое будет преобразовано в html-сущности.

Если предполагается использование подсветки кода с помощью highlight.js (нужно указать use.highlight: +), то используйте такой вариант. Он создаст <pre class="hl">

```(hl)
преформатированный текст с подсветкой
```

Классы PRE могут быть произвольными.

Таблицы TABLE

В простом виде ячейки таблицы (td) можно задать с помощью символа |, а ячейки th ограничить |: ячейки :|. Внутри ячеек можно использовать любое форматирование.

table(table-striped table-border-none table-hover)
    caption(t-bold bg-green200 pad10) Название таблицы
    
    |: header1 | header2 | header3 :|
    | Text1 | Text11 | Text111 |
    | Text2 | Text22 | Text222 |
    | Text3 | Text33 | Text333 |
/table

Название таблицы
header1	header2	header3
Text1	Text11	Text111
Text2	Text22	Text222
Text3	Text33	Text333

Если нужен контроль за каждой ячейкой и/или строкой, то используются td, th, tr. У них можно указать css-классы. Этот вариант можно сочетать с |-форматированием ячеек.

table
    caption Название таблицы
    
    tr(bg-orange100)
        th header1
        th header2
        th header3
    /tr

    tr
        td(bg-blue100) Text2
        td(bg-blue200) Text22
        td(bg-blue300) Text222
    /tr

    | Text3 | Text33 | Text333 |
/table

Название таблицы
header1	header2	header3
Text2	Text22	Text222
Text3	Text33	Text333

Список TODO

Этот список такого вида:

Придумать идею

Воплотить её в жизнь

- [x] Придумать идею
- [ ] Воплотить её в жизнь

Что будет преобразовано в такой код:

<div><input type="checkbox" disabled class="task-list-item-checkbox"> Придумать идею</div>
<div><input type="checkbox" disabled checked class="task-list-item-checkbox"> Воплотить её в жизнь</div>