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

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

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

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>

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

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

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

текст `код` текст

текст @выделенный mark@ текст
текст @@выделенный samp@@ текст

текст ~~зачеркнутый~~ текст
текст ~~~подчеркнутый~~~ текст

Результат:

текст <em>курсив</em> текст
текст <strong>полужирный</strong> текст
текст <strong><em>полужирный курсив</em><strong> текст
текст <em><strong>курсив полужирный</strong></em> текст

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

текст <mark>выделенный mark</mark> текст
текст <samp>выделенный samp</samp> текст

текст <del>зачеркнутый</del> текст
текст <u>подчеркнутый</u> текст

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

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

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

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

текст код текст

текст выделенный mark текст

текст выделенный samp текст

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

текст подчеркнутый текст

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

__(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) Текст

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

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

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

Ссылки 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>

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

use.glightbox: +

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

Следующие 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 можно использовать **, а в качестве замены ol использовать *#. Примеры:

ul
	* Список
	* Список
/ul

ol
	* Список
	* Список
/ol

ul
	li Список
	li Список
/ul

ol
	li Список
	li Список
/ol

**
  	* Список UL
  	* Список UL
**

*#
	* Список OL
	* Список OL
*#

Результат:

<ul>
<li>Список</li>
<li>Список</li>
</ul>

<ol>
<li>Список</li>
<li>Список</li>
</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-cyan50)
    summary(bg-cyan200 hover-bg-cyan300 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>