BBCode

BBCode — это язык разметки, который используется на большинстве интернет-форумов. Он позволяет менять стиль текста или добавлять функциональные элементы с помощью специальных меток, или тегов (англ. tag). BBCode применяется для оформления текста в различных местах веб-сайта osu!: в постах и подписях на форуме, на юзерпейдже и в описании карт.

Форма редактирования поста

Механизм работы

При нажатии на одну из кнопок разметки вокруг курсора появятся открывающий и закрывающий теги. Если перед нажатием на кнопку в редакторе выделить текст, теги появятся вокруг него.

Если необходимо применить несколько тегов сразу, можно «вложить» их один в другой. Теги при этом должны закрываться в обратном порядке, иначе форматирование сломается. Примеры:

• [centre][b]текст[/b][/centre] — правильно
• [b][centre]текст[/b][/centre] — неправильно

Теги

Все теги BBCode заключены в квадратные скобки ([]). Эффект, связанный с каким-либо тегом, начинает действовать после его упоминания и заканчивается в момент появления закрывающего тега с таким же именем, перед названием которого есть слэш (/).

Помимо этого, у некоторых тегов есть параметры, которые задаются после знака равенства (=).

Ниже приведён список тегов BBCode, разрешённых на сайте osu!.

Полужирный

[b]текст[/b]

Тег [b] используется для изменения начертания шрифта на полужирное. Он не изменяет размер шрифта.

Кнопка:

Курсив

[i]текст[/i]

Тег [i] придаёт тексту начертание курсива, чуть наклоняя его.

Кнопка:

Подчёркивание

[u]текст[/u]

Тег [u] рисует под текстом горизонтальную черту, толщина которой также зависит от начертания шрифта.

Зачёркивание

[strike]текст[/strike]

Тег [strike] перечёркивает текст по горизонтали.

Кнопка:

Цвет шрифта

[color=#HEXCODE]текст[/color]

См. также: Список цветов в X11

Тег [color] изменяет цвет текста. Сам цвет задаётся либо шестнадцатеричным кодом, либо ключевым словом вроде red или green, которые нужно подставить в примере вместо #HEXCODE. Кавычки в параметре использовать не нужно.

Если цвет не задан, то тег не подействует и будет работать как обычный текст.

Размер шрифта

[size=NUMBER]текст[/size]

Тег [size] изменяет размер шрифта. В настоящее время сайт osu! поддерживает четыре разных размера: 50, 85, 100 и 150, которые также называются «tiny», «small», «normal» и «large». Кавычки в параметре NUMBER использовать не нужно.

Если указан неподдерживаемый размер текста, или если он не указан вообще, размер текста будет стандартным.

Кнопка:

Спойлер

Не путать со спойлербоксом.

[spoiler]текст[/spoiler]

Тег [spoiler] скрывает текст с помощью чёрного фона. Чтобы прочитать скрытый текст, выделите его курсором. Если использовать этот тег внутри [color], то текст изменит цвет, но фон у него будет по-прежнему чёрного цвета.

Спойлеры часто используют для скрытия важной сюжетной информации о сериалах, фильмах, книгах и т.д., а также для создания комического эффекта, построенного на внезапности.

Контейнер

Не путать со спойлербоксом.

[box=NAME]
текст
[/box]

Тег [box] используется для скрытия текста и изображений в контейнере, который открывается по клику.

Название контейнера задаётся аргументом NAME и показывается на самом контейнере. Если название не указано, контейнер можно будет открыть, только кликнув по стрелке слева. Если в названии есть несколько пробелов подряд, они будут оставлены как есть. Кавычки в параметре использовать не нужно.

Контейнеры часто используют для того, чтобы улучшить читаемость поста и ограничить его размер — например, при составлении FAQ или анонсировании скинов.

Примечание: кнопка, создающая контейнер, называется «spoiler box», но не использует тег [spoilerbox].

Кнопка:

Спойлербокс

[spoilerbox]текст[/spoilerbox]

Спойлербокс — особый вид контейнера, где в качестве имени используется слово SPOILER. Для его создания используется отдельный тег, но функциональность полностью повторяет обыкновенные контейнеры.

Цитата

[quote="NAME"]
текст
[/quote]

Тег [quote] применяется при цитировании: слева от выделенного текста рисуется вертикальная черта и добавляется отступ. Саму цитату необходимо поместить между открывающим и закрывающим тегами. Для упоминания имени автора можно использовать необязательный аргумент NAME.

Примечание: при замене аргумента NAME кавычки обязательны (").

На форумах osu! цитаты чаще всего используются для ответа на чей-то пост. Их можно добавить автоматически с помощью кнопки Quote reply, расположенной справа вверху у каждого поста и видной только при наведении курсора на эту область.

Кнопка:

Код

Не путать с фрагментом кода.

[c]текст[/c]

Тег [c] включает моноширинный шрифт и меняет цвет фона текста на серый. В противовес фрагменту кода, этот тег работает только с текстом, набранным в одну строку.

На форумах osu! кодом часто обозначаются сочетания клавиш, подписи в интерфейсах и тому подобные вещи.

Фрагмент кода

Не путать с кодом.

[code]
текст
[/code]

Тег [code] включает моноширинный шрифт. Текст, заключённый в [code], будет иметь серый фон, и никакие другие теги внутри него не будут работать.

На форумах osu! в виде фрагментов кода чаще всего оформляются сториборды, а также параграфы, где необходимо подчеркнуть обязательное использование тегов.

Центрирование

[centre]текст[/centre]

Тег [centre] выравнивает текст по центру. Если вместе с ним использовать [quote], текст внутри цитаты будет отцентрирован, но вертикальная линия останется слева.

Ссылка

[url=LINK]текст[/url]

Тег [url] создаёт ссылку с указанным названием.

Примечание: можно не использовать [url], если название не важно: вставленная ссылка будет работать и так.

Чтобы вставить ссылку, вместо параметра LINK нужно указать адрес вместе с протоколом; текст при этом станет названием ссылки. Если название не указано, в качестве него будет использован адрес ссылки. Кавычки в параметре использовать не нужно.

Кнопка:

Профиль

[profile=userid]username[/profile]

Тег [profile] создаёт ссылку на профиль в osu!, которая при наведении курсора покажет карточку игрока. Чтобы создать такую ссылку, можно использовать как ник пользователя (только параметр username), так и его идентификатор (параметр userid). При этом, если ссылка задана с помощью ника, она перестанет работать или начнёт указывать на другой профиль, если игрок поменяет ник.

Примечание: идентификатор пользователя — это число после /users/ в ссылке на его профиль.

При указании идентификатора нужно обязательно заполнить поле username (но вместо него будет подставлен текущий ник игрока). Если в теге указан только ник пользователя, то ссылка перестанет работать, как только пользователь поменяет ник.

Список

[list=TYPE]
[*]пункт 1
[*]пункт 2
[*]пункт 3
[/list]

Тег [list] создаёт список (по умолчанию он будет ненумерованным). Для каждого нового пункта необходимо использовать звёздочку в квадратных скобках ([*]).

Если вместо TYPE что-нибудь указать, то список будет нумерованным.

Примечание: списки в BBCode можно объединять, но форматирование в них может сломаться.

Кнопки:

Email

[email=ADDRESS]текст[/email]

Тег [email] вставляет ссылку, при нажатии на которую запустится программа для отправки почты на указанный адрес.

Чтобы ссылка работала, вместо ADDRESS нужно вписать корректный адрес электронной почты, а вместо текст — название ссылки.

Изображение

[img]ADDRESS[/img]

Тег [img] вставляет изображение. Вместо ADDRESS нужно указать прямую ссылку на картинку из интернета (ссылки на файлы на вашем компьютере, вроде C:\Users\Name\Pictures\image.jpg, работать не будут).

Чтобы найти правильную ссылку, откройте страницу с изображением, кликните по нему правой клавишей и выберите Копировать ссылку на изображение или пункт с похожим названием.

Источник может быть любым, но стоит учесть, что некоторые сайты могут запрещать прямые ссылки на свои изображения или со временем их удалять. Если нужно, чтобы изображение было всегда доступно, загрузите его на любой известный хостинг картинок вроде ImgBB.

Примечание: сервис картинок Imgur в какой-то момент заблокировал IP-адреса сервисов osu!, поэтому новые картинки, залитые на Imgur, не будут видны на сайте.¹

Кнопка:

Карта изображений

[imagemap]
IMAGE_URL
X Y WIDTH HEIGHT REDIRECT TITLE
[/imagemap]

С помощью тега [imagemap] изображение можно разделить на несколько прямоугольных областей, у каждой из которых будет своя собственная ссылка.

Вместо IMAGE_URL нужно вписать ссылку на картинку, которую вы хотите использовать. Ссылка должна быть прямой.

Следующие строки описывают, как нужно разметить картинку. X и Y — это координаты верхнего левого угла прямоугольника, по которому можно будет кликнуть, а WIDTH и HEIGHT — его ширина и высота. Вместо REDIRECT нужно вставить ссылку (или пропустить её, указав вместо ссылки #), а вместо TITLE — указать подпись, которая будет показана при наведении курсора на область. Координаты и размеры прямоугольника (X, Y, WIDTH и HEIGHT) измеряются в процентах от общего размера картинки, сам символ процента указывать не надо.

Кнопка:

YouTube

[youtube]VIDEO_ID[/youtube]

Тег [youtube] встраивает в пост видео с YouTube. Для этого нужно заменить VIDEO_ID на код видео — 11 символов, которые идут сразу после ?v= или &v= в ссылке на него (ссылку целиком вставлять не нужно).

Аудио

[audio]URL[/audio]

Тег [audio] добавляет HTML5-плеер, воспроизводящий аудио. Вместо URL нужно указать прямую ссылку на аудио из интернета (ссылки на файлы на вашем компьютере, вроде C:\Users\Name\Music\audio.mp3, работать не будут).

Предупреждение: далеко не все сайты разрешают прямые ссылки на свои аудиофайлы. osu! не несёт ответственности за любые проблемы, связанные с нарушением авторских прав и вызванные использованием ссылок на аудио.

Заголовок (вариант 1)

[heading]текст[/heading]

Тег [heading] создаёт большой заголовок розового цвета. Такие заголовки имеют только один размер, и на них нельзя ссылаться.

Кнопка:

Примечание

[notice]
текст
[/notice]

Тег [notice] обводит параграф с текстом и помещает его в контейнер тёмного цвета.

Устаревшие теги

Эти теги убраны с сайта osu! и больше не работают (однако имеют некоторую историческую ценность).

Поиск Google

[google]поисковый запрос[/google]

Тег [google] раньше вставлял ссылку на поисковую выдачу Google по указанному запросу. Как тогда, так и сейчас поисковая выдача в разных странах и у разных пользователей отличается из-за поисковых фильтров и персонализации.

Мне повезёт

[lucky]поисковый запрос[/lucky]

Тег [lucky] раньше вставлял ссылку на первый результат поисковой выдачи Google по указанному запросу, имитируя нажатие на кнопку I'm Feeling Lucky (в русской редакции — Мне повезёт). Как и в случае обычного поискового запроса, адрес первого результата у разных пользователей может отличаться.

Заголовок (вариант 2)

[текст]

Ранее заголовок можно было создать двумя способами: как с помощью тега [heading], так и путём заключения текста в квадратные скобки. Текст, оформленный вторым образом (который, к слову, действовал только в подфоруме с картами), имел пурпурный цвет и слабое свечение.

Заметки

• Эта статья — переработанное руководство HOW TO: Forum BBCodes от Stefan.
• Когда-то при указании цвета шрифта можно было использовать слово transparent, делающее его прозрачным. В настоящее время эта возможность не работает (текст сохраняет белый цвет).
• До добавления тега imagemap к картинке можно было добавлять ссылку, комбинируя теги url и img, — но всего одну. Если требовалось создать несколько ссылок, картинку приходилось резать на индивидуальные мелкие фрагменты, а затем вставлять и размечать каждый из них отдельно.

Ссылки