Контейнеры

В тексте можно использовать не заложенную функциональность оформления.

Для этого необходимо использовать конструкцию:

:::myclass #myid
Тут текст
:::

```html
<style>
    .myclass {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>

Получается вот такое оформление:

:::myclass #myid
Тут текст
:::

<style>
    .myclass {
        text-align: center;
        color: #1956AF;a
        border-radius: 10px;
        background-color: #E1EDFF;
        border: 1px solid #1956AF;
        padding-top: 20px;
        margin-bottom: 20px;
    }
</style>

Все дело в том, что этот текст трансформируется в вот такой HTML:

<div class="myclass" id="myid"><p>Тут текст</p></div>

<style>
    .myclass {
        text-align: center;
        color: #1956AF;
        border-radius: 10px;
        background-color: #A1EDAF;
        padding-top: 10px;
        margin-bottom: 10px;
    }
</style>

Таким образом, можно задавать свое оформление у блоков текста.

Так же у контейнера может не быть якоря #myid. В этом случае:

:::myclass_no_anchor
Тут текст
:::

<style>
    .myclass_no_anchor {
        text-align: center;
        color: #1956AF;
    }
</style>

Получаем:

:::myclass_no_anchor
Тут текст
:::

<style>
    .myclass_no_anchor {
        text-align: center;
        color: #1956AF;
    }
</style>

Важно! Стили в теге <style> можно добавлять как до контейнера, так и после него в любом месте документа.