Авторизация / Регистрация

После оформления мночисленных гайдов, возникла идея написать данный гайд по ББ коду. Посвящается Дитруму и Tequila Cat.
Огромная благодарность Lucky и Хидэо за помощь в написании, и всем остальным модераторам за подсказки и критику.

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


Основы лежат тут https://forums.goha.ru/misc.php?do=bbcode

Оглавление

Основные BB теги

Font - задает шрифт текста
Size - размер текста
Color - цвет текста
Format - формат текста
Align - выравнивание текста по горизонтали
List - формирует списки из отдельных строк
Indent - создает отступ (табуляция)
URL/Link - вставляет ссылку
Email - вставляет ссылку "mail to"
Img - вставляет изображение
ImgL/ImgR - вставляет изображение с выравниваем и обтеканием текста
Quote - вставляет цитату
PHP/Code - вставляет поле с цветовой подсветкой синтаксиса PHP
No parse - запрещает обрабатывать BB код
Offtop - помечает текст как оффтопик (не относящийся к обсуждению)
Collapse - создает спойлер (контейнер, который можно открыть/закрыть)
Hr - рисует горизонтальную линию разделитель
Mp3 - mp3 плеер
Video - Video плеер

Специальные BB теги

Pointer - позволяет создавать указатели, ссылки внутри темы
Table - создает таблицу
Embed - вставка видео и аудио плееров со сторонних сайтов

Основные BB теги

# Font

Тег позволяет задать тексту шрифт. Для корректного отображения текста у всех пользователей
допускается только перечень шрифтов, которые указаны ниже.

Использование

Код:

[FONT="%fontname%']GoHa.Ru[/FONT]

%fontname% - Название шрифта

Доступные шрифты: Arial, Arial Black, Arial Narrow, Book Antiqua, Century Gothic, Comic Sans MS, Courier New, Fixedsys, Franklin Gothic Medium, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Palatino Linotype, System, Tahoma, Times New Roman, Trebuchet MS, Verdana.

Пример кода	Результат
[FONT="Arial Black"]Текст[/FONT]	Текст

# Size

Тег задает шрифту определенный кегль (размер).

Использование

Код:

[SIZE="Х"]Текст[/SIZE]

Где Х - размер шрифта, от 1 до 7

Пример кода	Результат
[LIST=1] [*][SIZE="1"]Текст[/SIZE] [*][SIZE="2"]Текст[/SIZE] [*][SIZE="3"]Текст[/SIZE] [*][SIZE="4"]Текст[/SIZE] [*][SIZE="5"]Текст[/SIZE] [*][SIZE="6"]Текст[/SIZE] [*][SIZE="7"]Текст[/SIZE] [/LIST]	Текст Текст Текст Текст Текст Текст Текст

# Color

Тег позволяет задать цвет тексту. Будьте внимательны, при добавлении цвета, текст может некорректно отображаться на других стилях(темах) форума.
Цвет задается в любой из трех систем web-цветов. (в шестнадцатеричном коде, в десятичном,по названию некоторых цветов)

* Использование

Код:

[COLOR="%color%"]GoHa.Ru[/COLOR]

%color% - Значения или название цвета

* Допустимые значения
Диапазон #000000 - #FFFFFF, некоторые названия цветов - red,green,cyan...

Пример кода	Результат
[COLOR="Red"]Текст[/COLOR]	Текст

# Format

Тег позволяет выбрать для текста формат отображения. Разные форматы можно комбинировать вложением тегов. Цвет выделенного текста зависит от темы форума.

Пример кода	Результат
[B]Текст[/B] Полужирный [I]Текст[/I] Курсив [U]Текст[/U] Подчеркнутый [highlight]значение[/highlight] Выделенный [strike]значение[/strike] Зачеркнутый	Текст Полужирный Текст Курсив Текст Подчеркнутый значение Выделенный значение Зачеркнутый

# Align

Тег позволяет выровнять текст, изображения по краям или центру страницы/ячейки таблицы.

Пример кода	Результат
[LEFT]Текст[/LEFT] [CENTER]Текст[/CENTER] [RIGHT]Текст[/RIGHT]	Текст Текст Текст

# List

Тег позволяет создавать списки.

Ненумерованный список

Код:

[LIST]
[*]Текст1
[*]Текст2
[*]Текст3
А тут не "Текст 4"
[*]Текст5[/LIST]

• Текст1
• Текст2
• Текст3
  А тут не "Текст 4"
• Текст5

Нумерованный цифрами

Код:

[LIST=1]
[*]Текст1
[*]Текст2
[*]Текст3
...
[*]Профит[/LIST]

1. Текст1
2. Текст2
3. Текст3
   ...
4. Профит

Нумерованный буквами

Код:

[LIST=a]
[*]Текст1
[*]Текст2
[*]Текст3
...
[*]Профит[/LIST]

1. Текст1
2. Текст2
3. Текст3
   ...
4. Профит

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


# Indent

Тег позволяет задать отступы(табуляция) для любых объектов. Можно использовать в таблицах.

Код:

[INDENT]Текст1[/INDENT]
[INDENT][CENTER]Текст2[/CENTER][/INDENT]
[INDENT][RIGHT]Текст 3[/RIGHT][/INDENT]

Текст1

Текст2

Текст3

Если текст выровнен по правую сторону или по центру, отступ будет сделан слева. Тег можно многократно вкладывать в самого себя - с каждой итерацией отступ будет увеличиваться на одну табуляцию.

# URL/Link

Тег позволяет вставить ссылку на любую веб страницу.

Код:

[URL="https://www.goha.ru/"]Прошу перейти на наш Сайт![/URL]

Прошу перейти на наш Сайт!

Вставляет ссылку с заменой адреса на текст, открывается в новой вкладке.

Ссылка также является текстом, так что ей тоже можно настроить шрифт, размер, стиль. Цвет ссылки берется из темы форума.

Код:

[URL]https://www.goha.ru/[/URL]

https://www.goha.ru/

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

Код:

[link=https://www.goha.ru/]Открыть в этом же окне[/link]

Открыть в этом же окне

Открывает ссылку в этом же окне. ОЧЕНЬ НЕ РЕКОМЕНДУЮ ИСПОЛЬЗОВАТЬ! Это не прилично)


# Email

Тег позволяет вставить ссылку на емейл адрес.

Код:

[EMAIL="[email protected]"][email protected][/EMAIL]

[email protected]

Открывает стандартный почтовый клиент с новым письмом по адресу в ссылке.

# Img

Тег позволяет вставить изображение.

Код:

[IMG]https://forums.goha.ru/images/goharu.gif[/IMG]

Картинки как и текст, можно выравнивать по краям страницы, задавать отступ, вставлять в таблицы.

ВАЖНО! Использовать .gif для аваторок и подписей запрещено! Также для любых картинок в подписи есть ограничение, подробнее в правилах.


# ImgL/ImgR

Тег позволяет вставить изображение с выравниванием, с обтеканием текста вокруг него.

Картинка по левому краю, текст обтекает по правому краю изображения

Код:

[imgl]https://forums.goha.ru/images/goharu.gif[/imgl]

"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."

"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."

"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."

"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."

Если использовать тег [imgl10] картинка [/imgl10], вокруг картинки будет дополнительная граница в 10 пикселей.

Картинка по правому краю, текст обтекает по левому краю изображения

Код:

[imgr]https://forums.goha.ru/images/goharu.gif[/imgr]
"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."

"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."

"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."

"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."



# Quote

Тег позволяет вставить цитату.

[quote]Текст цитаты[/quote]

Цитата:

Текст цитаты

Если тегу установить параметр, тогда выведется Автор цитаты:

[quote="Ленин"]Учиться, учиться и учиться[/quote]

Сообщение от Ленин:

Учиться, учиться и учиться

# PHP/Code

Тег позволяет вставить цитату кода, с подсветкой разметки.

[php]<?php

$str = "Hello, Lucky!"

class Lucky {
public $me = 'Happy';
public function who($name){
return $this->me.' '.$name;
}
}
$l = new Lucky();
echo $l->who("Lucky"); //Happy Lucky[/php]

PHP код:

<?php

$str = "Hello, Lucky!"

class Lucky {
    public $me = 'Happy';
    public function who($name){
        return $this->me.' '.$name;
    }
 }
 $l = new Lucky();
 echo $l->who("Lucky"); //Happy Lucky

Без подсветки разметки:

[code]<?php

$str = "Hello, Lucky!"

class Lucky {
public $me = 'Happy';
public function who($name){
return $this->me.' '.$name;
}
}
$l = new Lucky();
echo $l->who("Lucky"); //Happy Lucky[/code]

Код:

<?php

$str = "Hello, Lucky!"

class Lucky {
    public $me = 'Happy';
    public function who($name){
        return $this->me.' '.$name;
    }
 }
 $l = new Lucky();
 echo $l->who("Lucky"); //Happy Lucky

# No parse

Тег позволяет вставить BB код как простой текст без парсинга его движком форума.

Парсинг - обработка BB кода форумом, и его рендеринг

Код:

[noparse][SIZE="7"][COLOR="Red"][FONT="Arial Black"]Текст[/FONT][/COLOR][/SIZE][/noparse]

[SIZE="7"][COLOR="Red"][FONT="Arial Black"]Текст[/FONT][/COLOR][/SIZE]

Полезно для написания гайдов по оформлению тем на форуме.


# Offtop

Тег позволяет выделить текст как оффтоп.

[offtop]значение[/offtop]

Offtopic: значение

Тег offtop позволяет подчеркнуть, что высказывание не имеет отношения к основной теме топика. Тем самым снижает аггро модеров и читателей. (с)


# Collapse

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

Код:

[COLLAPSE="Спойлер!"]
Текст1
Текст2
Текст3
[/COLLAPSE]

Спойлер! 

Текст1
Текст2
Текст3

Позволяет скрывать огромное количество текста, картинок, видео. Незаменим для визуального улучшения вида тем. Пример темы где спойлер очень удачно используется https://forums.goha.ru/showthread_0_0_t1026352

# Hr

Тег позволяет вставить горизонтальный разделитель.

Код:

[hr][/hr]

---

Не совсем корректно работает с спойлерами и таблицами. Текст внутри тега скрывается.


# Mp3

Тег позволяет вставить Mp3 плеер с указанным файлом.

Код:

[mp3]http://www.grind.fm/audio/download/1436/10.mp3[/mp3]

Работают только прямые ссылки на mp3! Музыка с ВКонтакте или других подобных сервисов не будет корректно работать, так как ссылки на Mp3 они дают в виде динамических ссылок для конкретного пользователя.

# Video

Тег позволяет вставить видео плеер.

[video=https://images-pub.goha.ru/gamestv/12341-online_19%28kclro675%29.mp4]http://www.games-tv.ru/picture/12344-online_19%28wp1jdsb1%29.jpg[/video]

[video=https://images-pub.goha.ru/gamestv/12341-online_19%28kclro675%29.mp4]http://www.games-tv.ru/picture/12344-online_19%28wp1jdsb1%29.jpg[/video]

В параметре тега прямая ссылка на видео, в теле тега - ссылка на картинку превью. Сайты с динамическими ссылками не работают!


Специальные BB теги


# Pointer

Теги позволяют создать указатель, и ссылку на него.

[scr_targ]111[/scr_targ] - создать указатель 111

[scr_to=111]Переход к 111[/scr_to] - создает ссылку для перехода к указателю.

Указатели можно использовать для облегчения навигации в темах, для создания оглавлений, или просто кнопки Вверх.


# Table

Тег позволяет вставлять таблицы.

Тело таблицы [table] [/table]

Тело таблицы без рамки [table0] [/table0]

Столбец [tr] [/tr]

Ячейка [td]Текст[/td]

Также можно задать конкретной ячейке фиксированную ширину в пикселях [td=100] Текст [/td], если ширину не указать, она выберется автоматически.

Пример:

Код:

[table][tr][td]Таблица умножения[/td][td]1[/td][td]5[/td][td]10[/td][/tr][tr][td]1[/td][td]1[/td][td]5[/td][td]10[/td][/tr][tr][td]5[/td][td]5[/td][td]25[/td][td]50[/td][/tr][tr][td]10[/td][td]10[/td][td]50[/td][td]100[/td][/tr][/table]

Результат:

Таблица умножения	1	5	10
1	1	5	10
5	5	25	50
10	10	50	100

Без рамки

Таблица умножения	1	5	10
1	1	5	10
5	5	25	50
10	10	50	100

Очень важно чтобы в коде таблицы не было лишних переносов строки, табуляций и пробелов. Если привести таблицу к такому виду, она будет адекватно отображаться:

[table][tr][td]Таблица умножения[/td][td]1[/td][td]5[/td][td]10[/td][/tr][tr][td]1[/td][td]1[/td][td]5[/td][td]10[/td][/tr][tr][td]5[/td][td]5[/td][td]25[/td][td]50[/td][/tr][tr][td]10[/td][td]10[/td][td]50[/td][td]100[/td][/tr][/table]

Есть неплохой онлайн генератор BB кода таблиц Free BBCode Table Generator. Главное не ставить галочку 1st Row is Header, и чистить код от переносов, табуляций и пробелов.


# Embed

Тег позволяет вставлять плееры с сторонних сайтов.

Обрамление тегом URL ссылок на некоторые сайты, вставляет в пост как объект. Внимание! При предварительном просмотре объекты из контейнера не всегда парсяться! Отображаются только в опубликованных постах.

Youtube

Код:

[url]https://www.youtube.com/watch?v=aa0MIuMgs6U[/url]

Альтернативный код, использует только код видео из ссылки https://www.youtube.com/watch?v=aa0MIuMgs6U

Код:

[youtube]aa0MIuMgs6U[/youtube]

YouTube

Vimeo

Код:

[url]https://vimeo.com/91605331[/url]

Альтернативный код, использует только код видео из ссылки vimeo.com/91605331

Код:

[vimeo]91605331[/vimeo]

Coub

Код:

[url]http://coub.com/view/5q0rw[/url]

Coub

Twitch (работает как на стримы так и на записи)

Код:

[url]http://www.twitch.tv/gohamedia[/url]

twitch.tv

Soundcloud

Код:

[url]https://api.soundcloud.com/tracks/193399228[/url]

soundcloud.com

[GoHa]

[Дитрум]

[Hideas_renamed_938321_29012024]

[Тоджик_renamed_655373_01042024]

[Disgusted]

Для тэга [php] в примере можно было бы что-нибудь вроде такого написать:

PHP код:

<?php

echo "Hello World!";

?>

Сообщение от Disgusted:

Для тэга [php] в примере можно было бы что-нибудь вроде такого написать:

Будет, нужен только пример получше, который покажет подсветку всего, и цифр, и комментов, и т.д.

Добавлено через 7 минут
Добавил пример, который отображает всю возможность подсветки кода PHP.

Спасибо Lucky

[Сойка]

Спасиб Taran! Я раньше вот этой теме ковырялась https://forums.goha.ru/misc.php?do=bbcode
но там много воды и примеры хуже

Сообщение от Taran:

очень

афтар пеши есчо


а так то надо бы со старой страницы (goha bb code) принудительный редирект поставить на эту тему.

или в той теме где бб коды - оставить наверху яркое указание на эту.

огромный труд, поклон

Минигайд по Соундклауду!

Ищем понравившийся трек, например https://soundcloud.com/megmyersofficial/sorry

Жмем

Далее жмем

После выбираем

Копируем код

PHP код:

[soundcloud url="https://api.soundcloud.com/tracks/193399228" params="auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" width="100%" height="450" iframe="true" /] 


нас интересует ссылка в коде

PHP код:

https://api.soundcloud.com/tracks/193399228 


копируем ее

Обрамляем ссылку в тег УРЛ

PHP код:

[url]https://api.soundcloud.com/tracks/193399228[/url] 


Поулучаем:

soundcloud.com

Не очень просто, но по другому никак

[НечтоХрустящее]

[fixeel]

ниже кстати были удаленные сообщения. не знаю почему их удалили но там было написано слово одного из любимых модераторов кошенька
выражаю сим постом личную благодарность. если тут удаляют слова благодарности то я средактирую ЭТОТ ХИЗ пост итт. но кошенька будет.
Добавлено через 1 секунду
слава!

Сохранить
Сохранить

[Страх божий_renamed_790157_30012024]

Народ подскажите пожалуйста, что в коде не так, мне нун табличку ,чтобы верхняя строка, накрывала собой 2 другие полу строки.
[table]][tr][th colspan=2]Р4[/th][/tr][tr][left][td]Р3[/td][td]Р3[/td][/tr][/table]
типа
------------------
--------|---------
--------|---------

[nORb Dragon]

Сообщение от Страх божий:

Народ подскажите пожалуйста, что в коде не так, мне нун табличку ,чтобы верхняя строка, накрывала собой 2 другие полу строки.

][th colspan=2]Р4[/th][left]

Р3	Р3

типа
------------------
--------|---------
--------|---------

1. th на гохе не поддерживается.
2. left - "левый" тег, убираем.
3. На гохе нельзя реализовать объединение ячеек (то, что ты хочешь увидеть в первой строке), имхо.

[table][tr][td]Р4[/td][/tr][tr][td]Р3[/td][td]Р3[/td][/tr][/table]

Р4
Р3	Р3

[Unter]

Я в таких случаях поступаю вот так

Р4	Р4
Р3	Р3

Смысл сохраняется

[Страх божий_renamed_790157_30012024]

Сообщение от Unter:

Я в таких случаях поступаю вот так
Р4 Р4
Р3 Р3
Смысл сохраняется
__________________

ясно спасибки