Гайды на BBCode туллбар
Полный гайд по BBCode тулбару
"Оформляй посты красиво и профессионально"
"Оформляй посты красиво и профессионально"
📑 Навигация по гайду
ВВЕДЕНИЕ
🎨 Как работает BBCode?
BBCode — это простой язык разметки. Каждый тег состоит из двух частей:
📐 Структура тегов
Парные теги — имеют открывающую и закрывающую часть:
- Открывающий тег в квадратных скобках: [тег]
- Закрывающий тег со слэшем: [/тег]
- Между ними — твой контент
Одиночные теги — не требуют закрытия:
- Просто пишешь тег: [hr] или [br]
Теги с аргументами — имеют дополнительные параметры:
- Аргумент через знак равно: [тег=значение]
- Несколько аргументов через пробел: [тег арг1=знач1 арг2=знач2]
💡Совет
Тулбар автоматически вставляет теги при нажатии на кнопки. Если выделишь текст перед нажатием — тег обернёт выделенный фрагмент!
ГЛАВА 1
Базовое форматирование текста
# ✏️ Жирный текст
Тег: b
Как использовать: Оберни текст в [b] и [/b]
Горячая клавиша: Ctrl+B
Результат: Этот текст жирный
Когда использовать: Для выделения важных слов, терминов, заголовков в тексте.
# ✏️ Курсив
Тег: i
Как использовать: Оберни текст в [i] и [/i]
Горячая клавиша: Ctrl+I
Результат: Этот текст курсивный
Когда использовать: Для цитат, мыслей персонажа, иностранных слов, названий произведений.
# ✏️ Подчёркивание
Тег: u
Как использовать: Оберни текст в [u] и [/u]
Горячая клавиша: Ctrl+U
Результат: Этот текст подчёркнутый
Когда использовать: Для выделения ключевых фраз, важных дат, имён.
# ✏️ Зачёркивание
Тег: s
Как использовать: Оберни текст в [s] и [/s]
Результат: Этот текст зачёркнутый
Когда использовать: Для показа исправлений, устаревшей информации, юмористического эффекта.
# 🖍️ Маркер (выделение цветом)
Тег: mark
Аргументы:
- color — цвет маркера. Доступные значения: yellow (по умолчанию), orange, green, blue, red, purple, pink, cyan
Как использовать:
- Простой вариант: [mark]текст[/mark]
- С цветом: [mark color=orange]текст[/mark]
Примеры результата:
- Жёлтый маркер (по умолчанию)
- Оранжевый маркер
- Зелёный маркер
- Синий маркер
- Красный маркер
Когда использовать: Для привлечения внимания к критически важной информации.
# 📐 Нижний индекс
Тег: sub
Как использовать: Оберни текст в [sub] и [/sub]
Результат: H2O — формула воды
Когда использовать: Для химических формул, математических индексов.
# 📐 Верхний индекс
Тег: sup
Как использовать: Оберни текст в [sup] и [/sup]
Результат: E=mc2 — формула Эйнштейна
Когда использовать: Для степеней, сносок, математических формул.
ГЛАВА 2
Заголовки
# 📋 Теги заголовков
Теги: h1, h2, h3, h4, h5, h6
Как использовать: Оберни текст в [h1] и [/h1] (или h2, h3 и т.д.)
Аргументы:
- id — кастомный идентификатор для создания якоря. Пример: [h2 id=my-section]
Размеры заголовков (от большего к меньшему):
# Заголовок H1 — самый крупный
# Заголовок H2 — для разделов
# Заголовок H3 — для подразделов
# Заголовок H4 — для мелких секций
# Заголовок H5 — ещё мельче
# Заголовок H6 — самый мелкий
Когда использовать:
- H1 — главный заголовок поста (обычно один на пост)
- H2 — основные разделы
- H3 — подразделы внутри H2
- H4-H6 — мелкие заголовки для детализации
ℹ️Автоматические якоря
Каждый заголовок автоматически получает ID. Если хочешь задать свой — используй аргумент id. Это позволит ссылаться на заголовок через тег goto.
ГЛАВА 3
Стили текста
# 🎨 Цвет текста
Тег: color
Аргументы:
- color или первый аргумент — цвет текста. Можно указать:
- Название цвета: red, blue, green, orange, purple, pink, cyan, yellow, white, gray
- HEX-код: #ff6600, #9932CC, #00ff00
- RGB: rgb(255, 100, 50)
- Название цвета: red, blue, green, orange, purple, pink, cyan, yellow, white, gray
Как использовать: [color=red]текст[/color]
Примеры:
- Красный текст
- Синий текст
- Оранжевый по HEX
- Фиолетовый по HEX
# 📏 Размер шрифта
Тег: size
Аргументы:
- size или первый аргумент — размер текста. Можно указать:
- Число в пикселях: 12, 16, 24, 32
- С единицей измерения: 1.5rem, 2em, 150%
- Число в пикселях: 12, 16, 24, 32
Как использовать: [size=24]текст[/size]
Примеры:
- Мелкий текст (12px)
- Стандартный текст (16px)
- Крупный текст (24px)
- Очень крупный (32px)
# 🔤 Шрифт
Тег: font
Аргументы:
- font или первый аргумент — название шрифта
Доступные шрифты:
- Системные: Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Tahoma
- Google Fonts: Roboto, Open Sans, Montserrat, Roboto Mono и любые другие (загружаются автоматически!)
Как использовать: [font=Arial]текст[/font]
Примеры:
- Текст шрифтом Arial
- Текст шрифтом Georgia
- Текст моноширинным шрифтом
# 🌈 Градиент
Тег: gradient
Аргументы:
- from — начальный цвет градиента (обязательный)
- to — конечный цвет градиента (обязательный)
- dir — направление градиента. Значения: right (по умолчанию), left, top, bottom
Доступные цвета: orange, pink, blue, purple, green, red, yellow, cyan, indigo, teal
Как использовать: [gradient from=orange to=pink]текст[/gradient]
Примеры:
- Оранжево-розовый градиент
- Сине-фиолетовый градиент
- Зелёно-голубой градиент
- Красно-жёлтый градиент
Когда использовать: Для эффектных заголовков, названий, важных надписей.
# ✨ Свечение (Glow)
Тег: glow
Аргументы:
- color — цвет свечения. Значения: orange (по умолчанию), blue, green, red, purple, pink, cyan, yellow
- intensity — интенсивность свечения. Значения: light, medium (по умолчанию), strong
Как использовать: [glow color=blue intensity=strong]текст[/glow]
Примеры:
- Лёгкое оранжевое свечение
- Среднее синее свечение
- Сильное фиолетовое свечение
- Зелёный неон
Когда использовать: Для создания неонового эффекта в заголовках и акцентах.
ГЛАВА 4
Выравнивание текста
# 📐 По левому краю
Тег: left
Как использовать: [left]текст[/left]
Этот текст выровнен по левому краю. Он прижимается к левой границе блока.
# 📐 По центру
Тег: center
Как использовать: [center]текст[/center]
Этот текст выровнен по центру.
Когда использовать: Для заголовков, подписей, важных объявлений.
# 📐 По правому краю
Тег: right
Как использовать: [right]текст[/right]
Этот текст выровнен по правому краю.
Когда использовать: Для подписей, дат, авторства.
# 📐 По ширине
Тег: justify
Как использовать: [justify]текст[/justify]
Этот текст выровнен по ширине. Он растягивается так, чтобы занять всю доступную ширину блока. Края получаются ровными с обеих сторон. Особенно хорошо выглядит на длинных абзацах повествовательного текста.
Когда использовать: Для длинных текстов, историй персонажей, описаний.
ГЛАВА 5
Ссылки и якоря
# 🔗 Обычная ссылка
Тег: url
Аргументы:
- url или первый аргумент — адрес ссылки (обязательный)
- title — текст подсказки при наведении
- target — где открыть ссылку. Значения: _blank (новое окно, по умолчанию), _self (текущее окно)
Как использовать: [url=https://example.com]Текст ссылки[/url]
Результат: Текст ссылки
# 🔘 Кнопка-ссылка
Тег: button
Аргументы:
- url — адрес ссылки (обязательный)
- color — цвет кнопки. Значения: orange (по умолчанию), blue, green, red, purple, zinc
- size — размер кнопки. Значения: xs, sm, md (по умолчанию), lg, xl
- style — стиль кнопки. Значения: solid (по умолчанию), outline, ghost
- icon — эмодзи перед текстом
Как использовать: [button url=# color=blue size=lg icon=🚀]Текст[/button]
Примеры:
# ⚓ Создание якоря
Тег: anchor
Аргументы:
- anchor или id или первый аргумент — идентификатор якоря
Как использовать: [anchor=my-section]Текст[/anchor]
Правила именования ID:
- Используй только латиницу, цифры и дефисы
- Без пробелов и кириллицы
- Примеры: chapter-1, abilities, my-section
# ⚓ Переход к якорю
Тег: goto
Аргументы:
- goto или id или первый аргумент — идентификатор якоря, к которому нужно перейти
Как использовать: [goto=my-section]Перейти к разделу[/goto]
Результат: При клике страница плавно прокрутится к элементу с указанным ID.
⚠️Важно
Якорь (anchor) и ссылка на него (goto) должны иметь одинаковый ID!
# @ Упоминание пользователя
Тег: mention
Как использовать: [mention]username[/mention]
Результат: @Drakulyonok — кликабельная ссылка на профиль пользователя.
ГЛАВА 6
Списки
# 📝 Маркированный список
Тег: list
Как использовать:
- Открой список: [list]
- Каждый пункт начинай с [*]
- Закрой список: [/list]
Результат:
- Первый пункт
- Второй пункт
- Третий пункт
# 🔢 Нумерованный список
Тег: list с аргументом type
Аргументы:
- type или первый аргумент — тип нумерации:
- 1 или decimal — арабские цифры (1, 2, 3…)
- a или lower-alpha — строчные буквы (a, b, c…)
- A или upper-alpha — заглавные буквы (A, B, C…)
- i или lower-roman — римские строчные (i, ii, iii…)
- I или upper-roman — римские заглавные (I, II, III…)
- 1 или decimal — арабские цифры (1, 2, 3…)
Как использовать: [list=1] или [list type=a]
Результат:
- Первый шаг
- Второй шаг
- Третий шаг
# ✅ Чеклист
Тег: checklist
Как использовать:
- Открой чеклист: [checklist]
- Выполненный пункт: [x]текст[/x]
- Невыполненный пункт: [ ]текст[/]
- Закрой чеклист: [/checklist]
Результат:
- ✓Выполненная задача
- ○Невыполненная задача
- ✓Ещё одна выполненная
ГЛАВА 7
Медиа-контент
# 🖼️ Изображение
Тег: img
Аргументы:
- width — ширина. Значения: число (300), проценты (50%), пиксели (300px)
- height — высота. Значения: число, auto
- align — выравнивание. Значения: left, center, right
- rounded — скругление углов. Значения: none, sm, md, lg, xl, 2xl, 3xl, full
- shadow — тень. Значения: none, sm, md, lg, xl, 2xl
- caption — подпись под изображением
- hover — эффект при наведении. Значения: zoom (увеличение), lift (поднятие)
- lightbox — открытие в лайтбоксе. Значения: true, false
- border — толщина рамки в пикселях
- bordercolor — цвет рамки
Как использовать: [img width=300 align=center rounded=lg]URL_изображения[/img]
Внутрь тега вставляй прямую ссылку на изображение!
# 🖼️ Галерея
Тег: gallery
Аргументы:
- cols — количество колонок. По умолчанию: 3
- gap — отступ между изображениями. По умолчанию: 4
Как использовать:
- Открой галерею: [gallery cols=3 gap=4]
- Вставь несколько изображений через тег img
- Закрой галерею: [/gallery]
# ▶️ YouTube видео
Тег: youtube
Как использовать: [youtube]ссылка_или_id[/youtube]
Принимаемые форматы:
- Полная ссылка: https://www.youtube.com/watch?v=VIDEO_ID
- Короткая ссылка: https://youtu.be/VIDEO_ID
- Только ID видео: VIDEO_ID
# 🎬 Видео
Тег: video
Аргументы:
- poster — URL превью-изображения
- autoplay — автовоспроизведение. Значения: true, false (по умолчанию)
- loop — зацикливание. Значения: true, false (по умолчанию)
- muted — без звука. Значения: true, false (по умолчанию)
Как использовать: [video poster=url autoplay=false]url_видео.mp4[/video]
ГЛАВА 8
Блоки контента
# 💬 Простая цитата
Тег: quote
Аргументы:
- quote или author или первый аргумент — имя автора цитаты
Как использовать: [quote=Имя автора]Текст цитаты[/quote]
Результат:
Мудрец
Век живи — век учись.
# 💬 Блок-цитата
Тег: blockquote
Аргументы:
- author — имя автора
- source — источник цитаты (книга, интервью и т.д.)
- style — стиль оформления. Значения: default, modern, elegant, minimal
Как использовать: [blockquote author="Автор" source="Источник"]Текст[/blockquote]
Результат:
"Воображение важнее знания.
# 💬 Цитата с ответом
Тег: quotereply
Аргументы:
- post — ID поста, на который отвечаешь
- user — имя пользователя
Как использовать: [quotereply post=123 user="Username"]Цитируемый текст[/quotereply]
Результат:
Player писал(а):Как мне создать персонажа?
# 💻 Блок кода
Тег: code
Как использовать: [code]твой код[/code]
Результат: Текст отображается моноширинным шрифтом на тёмном фоне, с сохранением пробелов и переносов.
# 💻 Код с подсветкой
Тег: codeblock
Аргументы:
- lang или language — язык программирования. Примеры: python, javascript, html, css, java, php
- title — заголовок блока кода
- lines — показывать номера строк. Значения: true, false (по умолчанию)
Как использовать: [codeblock lang=python title="Пример"]код[/codeblock]
# 💻 Инлайн код
Тег: icode
Как использовать: [icode]код[/icode]
Когда использовать: Для вставки коротких фрагментов кода прямо в текст.
# 👁️ Спойлер
Тег: spoiler
Аргументы:
- title или первый аргумент — заголовок спойлера. По умолчанию: "Спойлер"
Как использовать: [spoiler=Заголовок]Скрытый контент[/spoiler]
Результат:
Спойлер
Это скрытое содержимое! Оно появляется только при клике на заголовок.
# 👁️ Инлайн спойлер
Тег: hide
Как использовать: [hide]скрытый текст[/hide]
Результат: Текст скрыт до клика: Секретная информация!
# 👁️ Details/Summary
Тег: details
Аргументы:
- summary или первый аргумент — заголовок. По умолчанию: "Подробнее"
- open — открыт ли по умолчанию. Значения: true, false (по умолчанию)
Как использовать: [details summary="Заголовок"]Контент[/details]
Результат:
Показать информацию
Это содержимое раскрывается при клике. Минималистичный стиль.
ГЛАВА 9
Контейнеры
# 📦 Карточка
Тег: card
Аргументы:
- title или первый аргумент — заголовок карточки
- color — цвет рамки. Значения: blue, green, orange, red, purple, pink, cyan, yellow, zinc
- icon — эмодзи перед заголовком
Как использовать: [card title="Заголовок" color=blue icon=📦]Содержимое[/card]
Результат:
📦Пример карточки
Это содержимое карточки. Карточки отлично подходят для группировки связанной информации.
# 📐 Бокс
Тег: box
Аргументы:
- bg — цвет фона (класс Tailwind). Пример: zinc-800, zinc-900
- border — цвет рамки (класс Tailwind). Пример: orange-500, blue-500
- padding — внутренний отступ. Значения: 2, 4, 6, 8
- rounded — скругление. Значения: none, sm, md, lg, xl, 2xl
- shadow — тень. Значения: sm, md, lg, xl
Как использовать: [box bg=zinc-800 border=orange-500 padding=4]Контент[/box]
Результат:
Простой бокс с настраиваемым оформлением.
# 🆔 Контейнер с ID
Тег: container
Аргументы:
- id — уникальный идентификатор для якоря
- class — дополнительные CSS-классы
Как использовать: [container id=my-section]Контент[/container]
Когда использовать: Когда нужно создать секцию, на которую можно ссылаться через goto.
# 🖼️ Фигура с подписью
Тег: figure
Аргументы:
- caption — текст подписи
- align — выравнивание. Значения: left, center (по умолчанию), right
Как использовать: [figure caption="Описание" align=center]Контент[/figure]
# 📊 Колонки
Тег: columns
Аргументы:
- cols или первый аргумент — количество колонок. По умолчанию: 2
- gap — отступ между колонками. По умолчанию: 1rem
Как использовать:
- Открой контейнер: [columns cols=2]
- Каждую колонку оборачивай в [col]…[/col]
- Закрой контейнер: [/columns]
Результат:
Первая колонка
Содержимое первой колонки.
Содержимое первой колонки.
Вторая колонка
Содержимое второй колонки.
Содержимое второй колонки.
ГЛАВА 10
Уведомления
# 🔔 Алерт (уведомление)
Тег: alert
Аргументы:
- type — тип уведомления. Значения:
- info — информация (синий)
- success — успех (зелёный)
- warning — предупреждение (жёлтый)
- error — ошибка (красный)
- tip — совет (фиолетовый)
- note — заметка (серый)
- info — информация (синий)
Как использовать: [alert type=info title="Заголовок"]Текст[/alert]
Примеры всех типов:
ℹ️Информация
Используй для общей информации и подсказок.
✅Успех
Используй для сообщений об успешных действиях.
⚠️Предупреждение
Используй для предупреждений и важных замечаний.
❌Ошибка
Используй для сообщений об ошибках.
💡Совет
Используй для полезных советов и рекомендаций.
# 💡 Callout
Тег: callout
Аргументы:
- title — заголовок
- icon — эмодзи иконка. По умолчанию: 💡
- color — цвет. Значения: blue (по умолчанию), green, orange, red, purple, yellow, cyan, pink
Как использовать: [callout title="Важно" icon=💡 color=purple]Текст[/callout]
Результат:
💡Полезный совет
Callout отлично подходит для выделения важной информации!
# 💬 Tooltip (подсказка)
Тег: tooltip
Аргументы:
- text или первый аргумент — текст подсказки (обязательный)
- position — положение подсказки. Значения: top (по умолчанию), bottom, left, right
Как использовать: [tooltip text="Текст подсказки" position=top]Слово[/tooltip]
Результат: Наведи на это слово Это всплывающая подсказка! .
ГЛАВА 11
Интерактивные элементы
# 📁 Вкладки (Tabs)
Тег: tabs
Как использовать:
- Открой контейнер вкладок: [tabs]
- Каждую вкладку создавай так: [tab=Название]Содержимое[/tab]
- Закрой контейнер: [/tabs]
Результат:
Содержимое первой вкладки. Здесь может быть любой контент.
# 🎹 Аккордеон
Тег: accordion
Как использовать:
- Открой аккордеон: [accordion]
- Каждую секцию создавай так: [section=Заголовок]Содержимое[/section]
- Закрой аккордеон: [/accordion]
Результат:
Первая секция
Содержимое первой секции. Раскрывается при клике на заголовок.
Вторая секция
Содержимое второй секции. При открытии одной секции другие закрываются.
Третья секция
Содержимое третьей секции.
# ⏱️ Таймлайн
Тег: timeline
Как использовать:
- Открой таймлайн: [timeline]
- Каждое событие: [event=Название|Метка]Описание[/event]
- Закрой таймлайн: [/timeline]
Формат события: event=Название события|Шаг или дата
Результат:
Год 1
Рождение
Герой родился в маленькой деревне.
Год 15
Обучение
Начал обучение у мастера.
Год 20
Приключение
Отправился в путешествие.
ГЛАВА 12
Специальные элементы
# 📊 Прогресс-бар
Тег: progress
Аргументы:
- text — подпись над прогресс-баром
- color — цвет. Значения: orange (по умолчанию), red, green, blue, yellow, purple, pink, cyan, teal, indigo
- show_percent — показывать проценты. Значения: true, false (по умолчанию)
- animated — анимация пульсации. Значения: true, false (по умолчанию)
- striped — полосатый стиль. Значения: true, false (по умолчанию)
Внутрь тега пишется число от 0 до 100 — процент заполнения!
Как использовать: [progress text="Навык" color=orange show_percent=true]75[/progress]
Примеры:
Фехтование85%
Магия огня60%
Скрытность40%
# ⭐ Рейтинг
Тег: rating
Аргументы:
- max — максимальное количество звёзд. По умолчанию: 5
- color — цвет звёзд. По умолчанию: yellow
Внутрь тега пишется оценка (число)!
Как использовать: [rating max=5 color=yellow]4[/rating]
Примеры:
- Оценка: ★★★★☆ (4.0/5)
- Сложность: ★★★☆☆ (3.0/5)
- Качество: ★★★★★ (5.0/5)
# 🏷️ Бейдж
Тег: badge
Аргументы:
- color — цвет. Значения: gray (по умолчанию), blue, green, red, orange, purple, yellow, pink, cyan
- size — размер. Значения: xs, sm (по умолчанию), md, lg
- pill — скруглённая форма. Значения: true, false (по умолчанию)
- icon — эмодзи перед текстом
Как использовать: [badge color=orange size=sm]Текст[/badge]
Примеры:
Новичок
Игрок
Модератор
Админ
VIP
# 📋 Таблица
Теги: table, thead, tbody, tr, th, td
Аргументы тега table:
- bordered — рамки. Значения: true, false (по умолчанию)
- striped — чередование цвета строк. Значения: true, false (по умолчанию)
- hover — подсветка при наведении. Значения: true, false (по умолчанию)
- compact — компактный вид. Значения: true, false (по умолчанию)
Структура таблицы:
- [table] — контейнер таблицы
- [thead] — шапка таблицы (заголовки колонок)
- [tbody] — тело таблицы (данные)
- [tr] — строка
- [th] — ячейка заголовка
- [td] — ячейка данных
Результат:
| Навык | Уровень | Описание |
|---|---|---|
| Фехтование | Мастер | 15 лет тренировок |
| Магия | Ученик | Базовые заклинания |
| Скрытность | Эксперт | Жизнь на улицах |
# 📖 Аббревиатура
Тег: abbr
Аргументы:
- title или первый аргумент — расшифровка аббревиатуры
Как использовать: [abbr title="Расшифровка"]АБВ[/abbr]
Результат: ИИ ИИ — Искусственный интеллект — при наведении появляется расшифровка.
# ⌨️ Клавиша
Тег: kbd
Как использовать: [kbd]Ctrl[/kbd]
Результат: Нажми Ctrl + C для копирования.
Когда использовать: Для отображения горячих клавиш и комбинаций.
# 📝 Сноска
Тег: footnote
Как использовать: Текст[footnote]Пояснение[/footnote]
Результат: Это важный факт[1].
Когда использовать: Для добавления примечаний, ссылок на источники.
# ➖ Горизонтальная линия
Тег: hr
Тип: Одиночный тег (не требует закрытия)
Как использовать: [hr]
Результат:
# ➖ Разделитель с текстом
Тег: divider
Аргументы:
- text или первый аргумент — текст в центре разделителя
- style — стиль линии. Значения: solid (по умолчанию), dashed, dotted
- color — цвет линии (класс Tailwind). По умолчанию: zinc-700
Как использовать: [divider text="Название раздела"]
Результат:
Пример разделителя
# ➖ Перенос строки
Тег: br
Тип: Одиночный тег (не требует закрытия)
Как использовать: Первая строка[br]Вторая строка
Когда использовать: Когда нужен принудительный перенос без создания нового абзаца.
ЗАКЛЮЧЕНИЕ
🎉 Поздравляем!
✅ Ты изучил все возможности тулбара!
Теперь ты знаешь:
- ✓Как форматировать текст
- ✓Как создавать заголовки
- ✓Как использовать цвета и градиенты
- ✓Как делать ссылки и якоря
- ✓Как создавать списки
- ✓Как вставлять медиа
- ✓Как делать цитаты и код
- ✓Как использовать спойлеры
- ✓Как создавать карточки и контейнеры
- ✓Как делать уведомления
- ✓Как создавать вкладки и аккордеоны
- ✓Как использовать таблицы
💡Финальные советы
- Практикуйся — чем больше используешь теги, тем быстрее запомнишь
- Используй превью — всегда проверяй результат перед публикацией
- Не переусердствуй — слишком много форматирования мешает читать
- Структурируй — разделяй большие посты на логические блоки
- Горячие клавиши — Ctrl+B, Ctrl+I, Ctrl+U для быстрого форматирования
Готовность к оформлению постов
100%
Гайд по BBCode тулбару | AureateSMP © 2025