Обсуждение Гайд по BB коду GoHa.Ru

После оформления мночисленных гайдов, возникла идея написать данный гайд по ББ коду. Посвящается Дитруму и 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

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

Использование
%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.



# Size

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

Использование
Где Х - размер шрифта, от 1 до 7



# Color

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

* Использование
%color% - Значения или название цвета

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



# Format

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



# Align

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



# List

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

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

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

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

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

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

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

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


# Indent

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

Текст1

Текст2

Текст3

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

# URL/Link

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

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

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

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

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

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


# Email

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

[email protected]

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

# Img

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



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

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


# ImgL/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."

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

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



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

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

[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]


# No parse

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

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

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

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


# Offtop

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

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



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


# Collapse

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




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

# Hr

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

---

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


# 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], если ширину не указать, она выберется автоматически.

Пример:

Результат:


Без рамки

Таблица умножения	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
Альтернативный код, использует только код видео из ссылки https://www.youtube.com/watch?v=aa0MIuMgs6U




Vimeo


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





Coub




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




Soundcloud