BB-коды

В составе фреймворка PipUI есть компонент с заготовленными стилями для BB-кодов. Всё что необходимо сделать, это выставить необходимую разметку или классы

Жирное начертание шрифта (теги [b][/b])

<span class="bb-bold">Жирное начертание шрифта</span>

Наклонный текст (теги [i][/i])

<span class="bb-italic">Наклонный текст</span>

Зачеркнутый текст (теги [s][/s])

<span class="bb-strike">Зачеркнутый текст</span>

Подчеркнутый текст (теги [u][/u])

<span class="bb-underline">Подчеркнутый текст</span>

Выравнивание по левому краю (теги [left][/left])

<div class="bb-text-left">Выравнивание по левому краю</div> 

Выравнивание по правому краю (теги [right][/right])

<div class="bb-text-right">Выравнивание по правому краю</div> 

Выравнивание по центру (теги [center][/center])

<div class="bb-text-center">Выравнивание по центру</div> 

Горизонтальная линия (тег [line])

<div class="bb-line"></div> 

Скрытый текст (теги [spoiler="Показать/Скрыть"][/spoiler])

<div class="bb-spoiler">
    <a href="#" rel="nofollow" class="bb-spoiler-trigger" data-collapse="#collapse-trigger-1">Показать/Скрыть</a>
    <div class="bb-spoiler-text collapse" id="collapse-trigger-1">Скрытый текст!</div>
</div>

Изображение (теги [img]url[/img])

<img src="/Themes/Default/img/logo.svg" alt="IMG" class="bb-image" /> 

Цитата (теги [quote][/quote])

<div class="bb-quote-wrapper">
    <div class="bb-quote">
        <div class="bb-quote-title">PipUI - 01.01.2019</div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, in.
    </div>
</div>

Вставка кода (теги [code][/code])

<div class="bb-code">
    <div class="bb-code-language">Javascript</div>
    <div class="bb-code-text">alert('PipUI');</div>
</div>

Вставка YouTube проигрывателя (теги [youtube][/youtube])

<div class="bb-youtube">
    <iframe width="510" height="287" src="https://www.youtube.com/embed/eY52Zsg-KVI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>