код спойлера для форума

Код спойлера для форума

bbCode — Bulletin Board Code, или язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Для форматирования текста используются теги, подобные тегам HTML. В отличие от тегов HTML, теги bbCode заключают в квадратные скобки. Перед отображением страницы движок форума производит разбор текста и преобразовывает bbCode в HTML-код.

На многих форумах возможность использования BB-кодов настраивается администратором индивидуально на каждый раздел форума. Поэтому, прежде чем использовать BB-коды в сообщениях, необходимо убедиться, что они разрешены.

Базовые тэги для работы с текстом:

[p] Обычный абзац с отступом. [/p]

[p= стиль ] Абзац, которому можно задавать стиль. [/p]
* Здесь и далее «стиль» — это аналог style в HTML.
[p=стиль]текст[/p] аналогично в HTML

** С тэгами [p] [/p] можно использовать другие тэги, такие как [b], [i], [s] и т.д.

[span= стиль ] Текст, которому с помощью стиля можно менять свойства. [/span]

[div= стиль ] Ограниченная область, которой с помощью стиля можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.). [/div]
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей [div].

Форматирование текста:

[b] Важный текст, полужирный [/b]

[i] Важный текст, курсив [/i]

[bold] Просто полужирный [/bold]

[italic] Просто курсив [/italic]

[u] Подчёркнутый текст [/u]

[s] Зачёркнутый текст [/s] — аналогично варианту [strike] [/strike]

[small] Уменьшенный шрифт [/small]

Знак сноски [sup] сверху [/sup] или индекс _{[sub] снизу [/sub]} от текста

[del] Удалённый текст [/del]

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

[size=13pt] Шрифт размером 13 пунктов [size]

[size=15pt] Шрифт размером 15 пунктов [size]

[size=9px] Шрифт размером 9 пикселей [size]

[size=12px] Шрифт размером 12 пикселей [size]

[size=15px] Шрифт размером 15 пикселей [size]

[size=0] Размер 0 [size]

[size=+1] Размер +1 [size]

[size=+2] Размер +2 [size]

Возможные варианты размеров шрифтов (визуальная оценка) доступны здесь.

Заголовки:

[h1] Заголовок 1-го уровня [/h1]

[h2] Заголовок 2-го уровня [/h2]

[h3] Заголовок 3-го уровня [/h3]

[h4] Заголовок 4-го уровня [/h4]

[h5] Заголовок 5-го уровня [/h5]

[h6] Заголовок 6-го уровня [/h6]

Оформление текста с помощью шрифтов:

[font= Times New Roman ] Шрифт Comic Sans Ms [/font]

[font= Monotype Corsiva ] Шрифт Monotype Corsiva [/font]

[font= Tahoma ] Шрифт Tahoma [/font]

Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны здесь.

Оформление текста с помощью цвета:

[color= Red ] Красный текст [/color]
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

[color= #0000ff ] Синий текст [/color]
* Цифра #0000ff означает синий цвет в RGB палитре.

[bg= #eeeeff ] Голубой фон [/bg]
* У фона тоже можно менять цвет.

[color= #0000ff ] [bg= lightgray ] Синий текст, серый фон [/bg] [/color]

Некоторые предопределённые цвета:

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего ( RR GG BB ):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Возможные варианты палитры цветов и их кодов/наименований доступны здесь.

Выравнивание текста:

[left] Выравнивание текста по левой стороне [/left]

[left стиль ] Выравнивание по левой стороне со стилем [/left]

[pleft] Выравнивание в абзаце влево [/pleft]

[center] Выравнивание текста по центру [/center]

[center стиль ] Выравнивание по центру со стилем [/center]

[pcenter] Выравнивание в абзаце по центру [/pcenter]

[right] Выравнивание текста по правой стороне [/right]

[right стиль ] Выравнивание по правой стороне со стилем [/right]

[pright] Выравнивание в абзаце справа [/pright]

[justify] Выравнивание текста по обеим сторонам [/justify]

[justify стиль ] Выравнивание по обеим сторонам со стилем [/justify]

[pjustify] Выравнивание в абзаце по обеим сторонам [/pjustify]
* Выравнивание текстов по обеим сторонам отображается для текстов, имеющих длину более одной строки.

Оформление сносок (комментариев) с отступом абзаца:

[q свойства ] Цитата в строке со свойствами [/q]

[quote]
Процитированный в отдельном блоке текст, у которого будет
небольшой отступ слева и особое оформление (стиль форума).
[/quote]

Примеры:
[quote]Lorem ipsum dolor sit amet[/quote]
[quote=John Doe]Lorem ipsum dolor sit amet[/quote]
[quote=John Doe;54525188]Lorem ipsum dolor sit amet[/quote]

Форматирование параграфов и областей:

Используем тэг [ul] или [list] для маркированных списков:

[ul]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ul]

Для пронумерованных списков используем тэг [ol]:

[ol]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ol]

Закрывающий тэг [/*] не обязателен для использования:

[list]
[*] Один из пунктов списка
[*] Другой такой пункт
[*] Ещё один пункт.
[/list]

Также возможно прямое указания вида списка:
[list=1] — пронумерованный список
[list=a] — алфавитный список
[list=i] — список, пронумерованный римскими цифрами

[img] http://img.cx/img/primer.jpg [/img] — пример вставки картинки.

[imgleft] http://img.cx/img/primer.jpg [/imgleft] — картинка слева.
* Данный код аналогичен коду в HTML:

[imgright] http://img.cx/img/primer.jpg [/imgright] — картинка справа.
* Данный код аналогичен коду в HTML:

[imgcenter] http://img.cx/img/primer.jpg [/imgcenter] — картинка по центру.
* Данный код аналогичен коду в HTML:

Аналогичные тэги с названиями и всплывающими подсказками:

Важно! В названии картинки нельзя использовать кавычки!

[img Название ] http://img.cx/img/primer.jpg [/img] — пример вставки картинки.

[imgleft Название ] http://img.cx/img/primer.jpg [/imgleft] — картинка слева.

[imgright Название ] http://img.cx/img/primer.jpg [/imgright] — картинка справа.

[imgcenter Название ] http://img.cx/img/primer.jpg [/imgcenter] — картинка по центру.

Картинки с указанными размерами:

[img=300×500] http://img.cx/img/primer.jpg [/img] — пример картинки с размером.
* Данный код аналогичен коду в HTML:

[imgleft=300×500] http://img.cx/img/primer.jpg [/imgleft] — картинка слева, с размером.

[imgright=300×500] http://img.cx/img/primer.jpg [/imgright] — картинка справа, с размером.

Вставка больших изображений с полосами прокрутки:

[image] http://www.hdsw.ru/pics/IMG_1734.jpg [/image] — картинка в выделенной области, если она больше доступного размера отображения на форуме.

Миниатюры изображения со ссылкой на оригинал:

[imgmini=_ адрес-mini ] адрес [/imgmini] — открыть изображение в новом окне.
* Данный код аналогичен коду в HTML:

[imgmini= адрес-mini ] адрес [/imgmini] — открыть изображение в том же окне.
* Данный код аналогичен коду в HTML:

[url] http://www.hdsw.ru/ [/url] — обычная ссылка.
* Данный код аналогичен коду в HTML:
http://www.hdsw.ru/

Картинка-ссылка (баннер):
[url= http://www.hdsw.ru/ ] [img] http://img.cx/img/primer.jpg [/img] [/url]

[email] e-mail@example.com [/email] — почтовый ящик как ссылка.
[email= e-mail@example.com ] текст под ссылкой на e-mail [/email]

[icq] номер ICQ [/icq] — вставка ICQ-номера как ссылки.

[skype] логин в Skype [/skype] — вставка учётной записи Skype как ссылки.

[wmid] номер WMID [/wmid] — вставка WebMoney-идентификатора WMID как ссылки.

[wiki] искомое значение [/wiki] — ссылка на значение в энциклопедии.

[wiki= искомое значение ] отображаемый текст [/wiki] — ссылка в текущем тексте (любом) на нужное значение в энциклопедии.

Ссылки внутри форумов и блогов:

[user] имя_пользователя [/user] — ссылка на профиль пользователя.
[user= ID_пользователя ] имя_пользователя_произвольно [/user] — ссылка на профиль пользователя с произвольным текстом.

[forum= ID_форума ] Описание [/forum] — ссылка на подфорум по его ID.

[blog= ID_блога ] Описание [/blog] — ссылка на блог по его ID.

[thread] ID_темы [/thread] — ссылка на тему по его ID.
[thread= ID_темы ] Описание [/thread]

[topic= ID_темы ] Описание [/topic] — ссылка на тему по его ID.

[post] ID_сообщения [/post] — ссылка на сообщение по его ID.
[post= ID_сообщения ] Описание [/post]

[snapback] ID_сообщения [/snapback] — вставляет маленькую иконку со ссылкой на указанное сообщение по его ID.

[entry= ID_поста ] Описание [/entry] — ссылка на пост в блоге по его ID.

Пример простейшей таблицы:

[table]
[tr]
[td] Строка 1, колонка 1 [/td]
[td] Строка 1, колонка 2 [/td]
[/tr]
[tr]
[td] Строка 2, колонка 1 [/td]
[td] Строка 2, колонка 2 [/td]
[/tr]
[/table]

В таблице можно указывать произвольные стили и классы. Примеры:
[table style=»border: 1px solid red»]
[tr rowspan=»2″]
[td style=»font-size: 18pt»]

[br] — тэг переноса строки.

[bs] — вставка неразрывного пробела, преобразуется в

[tab] — вставка отступа на 32 пикселя (4 символа), аналог символа TAB.

[ucase] ТЕКСТ [/ucase] — выделенный текст в верхнем регистре.

[lcase] текст [/lcase] — выделенный текст в нижнем регистре.

[highlight] Этот текст выделен [/highlight] — позволяет выделить ваш текст (цветом/фоном/шрифтом).

[spoiler= заголовок ] скрытый текст [/spoiler] — позволяет спрятать большой кусок текста и изображения под ссылку (кат). Пример:
[spoiler=»Скриншоты»] [img] http://example.com/1.jpg [/img] скрытый текст [/spoiler]

[extract] текст [/extract] — позволяет выделить часть поста в блоге, которая будет показана на титульной странице блога и в RSS feed. Остальной текст будет показан только на странице поста.

[noparse] [b]значение[/b] [/noparse] — отменяет распознавание BB-кодов в выделенном тексте.

[noindex] текст [/noindex] — выделенный текст не будет индексироваться поисковыми системами.

[abbr] аббревиатура [/abbr] — указывает, что последовательность символов является аббревиатурой.
[abbr= расшифровка_аббревиатуры ] аббревиатура [/abbr]

[cite] Сноска [/cite] — помечает текст как цитату или сноску на другой материал.
[cite свойства ] Сноска [/cite]

[address] адрес [/address] — тэг предназначен для хранения информации об авторе и может включать в себя любые элементы вроде ссылок, текста, выделений и т.д.
[address свойства ] адрес [/address]

[text-demo] — подключает файл text-demo.txt (можно использовать для проверки стилей шаблона).

[hr] — тэг вставки линии на всю ширину доступной области:

Для работы с терминами используется тройка элементов [dl], [dt], [dd], предназначенных для создания списка определений. Каждый такой список начинается с контейнера [dl], куда входит тег [dt], создающий термин и тег [dd], задающий определение этого термина. Закрывающий тег [/dt] не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.

Пример:
[dl]
[dt] Термин 1 [/dt]
[dd] Определение термина 1 [/dd]
[dt] Термин 2 [/dt]
[dd] Определение термина 2 [/dd]
[/dl]

Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег [dfn] применяется для выделения таких терминов, при их первом появлении в тексте.

[dfn] Новый термин [/dfn]

[dfn свойства ] Новый термин [/dfn]

— универсальный тег.

Тэги под специализированные видеохостинги с использованием идентификатора:

[youtube] идентификатор [/youtube] — вставка видеоролика с YouTube.com

[rutube] идентификатор [/rutube] — вставка видеоролика с RuTube.ru

[googlevideo] идентификатор [/googlevideo] — вставка видеоролика с Google.com

[veoh] идентификатор [/veoh] — вставка видеоролика с Veoh.com

[smotri] идентификатор [/smotri] — вставка видеоролика с Smotri.com. Возможна модификация [smotricomvideo]

Тэги под специализированные видеохостинги с использованием ссылки:

[mailvideo] ссылка [/mailvideo] — вставка видеоролика с Mail.ru

[yandexvideo] ссылка [/yandexvideo] — вставка видеоролика с Yandex.ru

Любые flash-объекты (сторонние видеохостинги, flash-игры, flash-баннеры и т.д.) можно использовать с помощью: [flash= ширина,высота ] адрес_объекта [/flash]
* Размер области определяется в пикселях.

Примеры:
[youtube]9L4YCG7dJeE[/youtube]

[googlevideo]8420876204610684862[/googlevideo]
[veoh]v922088SBwxySaR[/veoh]
[yandexvideo]pugachev-alexander/1rgzbi6w6b.809/[/yandexvideo]

BB-код в том числе предназначен для публикации примеров различных кодов. С помощью специального форматирования код будет только отображаться, но не исполняться. Кроме того, программный код будет отображаться с «цветовой подсветкой» (highlight).

[prog= язык ] текст программы [/prog]
где «язык» может принимать значения: cpp, objectivec, cs, delphi, avrasm, 1c, python, profile, perl, erlang, erlang_repl, apache, nginx, php, xml, html, css, java, javascript, vbscript, sql, lisp, django, scala, ruby, go, lua, vala, rsl, rib, mel, smalltalk, bash, cmake, axapta, vhdl, parser3, tex, haskell, dos, ini, diff, no-highlight.

[code] текст моноширинным шрифтом [/code] — любой код и текст.
[code= php ] текст [/code] — код языка PHP с соответствующей «цветовой подсветкой».

[php] отображаемый HTML-код [/php] — код PHP с «цветовой подсветкой».

[html] отображаемый HTML-код [/html] — код HTML с «цветовой подсветкой».

[sql] отображаемый HTML-код [/sql] — SQL-код с «цветовой подсветкой».

* — Зажмите кнопку ALT, наберите код, отпустите ALT. Работает в Windows.
** — Вставьте подряд несколько таких пробелов чтобы они не сливались в один:
— теперь слева отступ в шесть пробелов!

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

Источник

BB-коды

ul»>Помощь

Делает выделенный текст полужирным, наклонным, подчёркнутым или зачёркнутым.

Пример: Это [B]полужирный[/B] текст.
Это текст [I]курсивом[/I].
Это [U]подчёркнутый[/U] текст.
Это [S]перечёркнутый[/S] текст. Вывод: Это полужирный текст.
Это текст курсивом.
Это подчёркнутый текст.
Это перечёркнутый текст.

Изменяет цвет, шрифт или размер выделенного текста.

Создаёт ссылку из выделенного текста.

Делает выделенный текст ссылкой на интернет-страницу или на адрес электронной почты.

Пример: [URL=http://www.example.com]Ссылка на example.com[/URL]
[EMAIL=example@example.com]Моя почта[/EMAIL] Вывод: Ссылка на example.com
Моя почта

Ссылка на профиль пользователя. Как правило добавляется автоматически при упоминании пользователя.

Пример: [USER=1]Имя пользователя[/USER] Вывод: Имя пользователя

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

Пример: [IMG]https://www.forumhouse.ru/​styles/default​/xenforo/avatars/avatar_s.png[/IMG] Вывод:

Вставляет в сообщение медиа с разрешенных сайтов. Рекомендуется использовать кнопку добавления медиа в панели инструментов редактора. Одобренные сайты: Dailymotion; Facebook; Liveleak; Metacafe; Video.Mail.Ru; Vimeo; YouTube;

Пример: [MEDIA=youtube]oHg5SJYRHA0[/MEDIA] Вывод: Встроенный YouTube плеер появится здесь.

Отображает нумерованный или маркированный список.

Изменяет выравнивание выделенного текста.

Пример: [LEFT]По левому краю[/LEFT]
[CENTER]По центру[/CENTER]
[RIGHT]По правому краю[/RIGHT] Вывод:

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

Пример: [QUOTE]Процитированный текст[/QUOTE]
[QUOTE=Пользователь]Что-то сказал[/QUOTE] Вывод:

Скрывает текст, который может содержать спойлеры (преждевременно раскрытая важная сюжетная информация). Чтобы увидеть текст, нужно нажать кнопку спойлера.

Пример: [SPOILER]Простой спойлер[/SPOILER]
[SPOILER=Заголовок спойлера]Спойлер с заголовком[/SPOILER] Вывод:

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

Увеличивает отступ выделенного текста. Можно использовать несколько раз для создания больших отступов.

Пример: Обычный текст
[INDENT]Небольшой отступ
[INDENT]Значительный отступ[/INDENT]
[/INDENT] Вывод: Обычный текст

Отключает распознавание BB-кодов внутри выделенного текста.

Пример: [PLAIN]Это не [B]полужирный[/B] текст.[/PLAIN] Вывод: Это не [B]полужирный[/B] текст.

Вставляет вложение в указанной точке. Если вложение является изображением, будет вставлена его уменьшенная версия или всё оно целиком. Для этого нужно нажать на соответствующую кнопку.

Пример: Миниатюра: [ATTACH]123[/ATTACH]
Полный размер: [ATTACH=full]123[/ATTACH] Вывод: Содержание вложений появится здесь.

Источник

BB-коды. Оформление сообщений.

BB-код или BBCode (аббр. от англ. Bulletin Board Code) — язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Для форматирования текста используются теги, подобные тегам HTML, но, в отличие от них, заключённые в квадратные скобки. [WIKI]

жирный текст
курсивный текст
подчеркнутый текст
перечеркнутый текст
верхний индекс
нижний _индекс

Результат:
увеличенный размер
уменьшенный размер

Результат:
Upload. BB-коды. Оформление сообщений. Инструкции. Работа сайта и форума. 8777. BB-коды. Оформление сообщений. Инструкции. Работа сайта и форума. 8777. BB-коды. Оформление сообщений. Инструкции. Работа сайта и форума.
Если вставить кривую ссылку, результат будет такой: invalid url
Тег работает только с файлами, загруженными на сервер ХД!

Тег может принимать в качестве параметра формат подсветки синтаксиса.
Включенные форматы: javascript, arduino, c, cpp (С++), python, sql.

Результат: 100% спирта не бывает

Результат: [b]жирный текст[/b]

Источник

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

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

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

К сожалению, у дефолтного маркера есть два недостатка:

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

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

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник