Справочник по bbcode

BBCode: Подробное руководство с примерами

BBCode (Bulletin Board Code) — это упрощённая система разметки текста, которая широко используется на форумах, в блогах и других платформах для форматирования сообщений. Она безопасна, проста в использовании и позволяет создавать структурированный контент без сложных технических навыков. Давайте подробно рассмотрим основные теги BBCode, их функционал и приведём множество примеров для каждого из них.

1. Жирный текст:
   - Тег:текст
   - Описание: Этот тег используется для выделения важных частей текста жирным шрифтом. Жирный текст помогает привлечь внимание читателя к ключевым словам или фразам.
   - Примеры:
   1. BBCode:Это [b]важный[/b] момент.
   Результат: Это важный момент.
   
   2. BBCode:Обратите внимание на [b]следующее[/b].
   Результат: Обратите внимание на следующее.
   
   3. BBCode:Мы предлагаем [b]лучшие цены[/b] на рынке.
   Результат: Мы предлагаем лучшие цены на рынке.
   
2. Курсив:
   - Тег:текст
   - Описание: Курсив используется для акцентирования внимания на цитатах, мыслях или других элементах текста, которые требуют особого выделения. Он также может передавать эмоциональный оттенок.
   - Примеры:
   1. BBCode:Он сказал: "[i]Я приду позже[/i]".
   Результат: Он сказал: "Я приду позже".
   
   2. BBCode:[i]Мечты сбываются[/i], если верить в них.
   Результат:Мечты сбываются, если верить в них.
   
   3. BBCode:Важно помнить: [i]терпение — ключ к успеху[/i].
   Результат: Важно помнить: терпение — ключ к успеху.
   
3. Подчёркивание:
   - Тег:текст
   - Описание: Подчёркивание используется для выделения ссылок, ключевых слов или других важных элементов текста. Оно помогает привлечь внимание к определённым частям текста.
   - Примеры:
   1. BBCode:Нажмите [u]здесь[/u], чтобы продолжить.
   Результат: Нажмите здесь, чтобы продолжить.
   
   2. BBCode:[u]Важная информация[/u] находится ниже.
   Результат:Важная информация находится ниже.
   
   3. BBCode:Для регистрации перейдите по ссылке: [u]https://example.com[/u].
   Результат: Для регистрации перейдите по ссылке: https://example.com.
   
4. Зачёркивание:
   - Тег:текст
   - Описание: Зачёркивание используется для указания на ошибочную информацию или для создания эффекта "перечёркнутого" текста. Часто применяется в рекламе для демонстрации старых цен.
   - Примеры:
   1. BBCode:Цена товара составляет [s]1000 рублей[/s] 800 рублей.
   Результат: Цена товара составляет 1000 рублей 800 рублей.
   
   2. BBCode:[s]Эта информация устарела[/s].
   Результат:Эта информация устарела.
   
   3. BBCode:Старая цена: [s]500 рублей[/s], новая цена: 400 рублей.
   Результат: Старая цена: 500 рублей, новая цена: 400 рублей.
   
5. Ссылки:
   - Тег:[url=https://example.com]текст ссылки[/url]
   - Описание: Ссылки используются для создания гиперссылок, которые ведут на другие страницы или сайты. Они могут быть как текстовыми, так и прямыми URL-адресами.
   - Примеры:
   1. BBCode:Посетите наш сайт: [url=https://example.com]Нажмите здесь[/url].
   Результат: Посетите наш сайт: Нажмите здесь.
   
   2. BBCode:Узнайте больше о [url=https://example.com/news]новостях[/url].
   Результат: Узнайте больше о новостях.
   
   3. BBCode:Прямая ссылка: [url]https://example.com[/url].
   Результат: Прямая ссылка: https://example.com.
   
6. Изображения:
   - Тег: [img]https://example.com/image.jpg[/img]
   - Описание: Тег для вставки изображений. В BBCode изображение вставляется без дополнительных атрибутов, таких как alt, но его можно использовать для добавления картинок в текст.
   - Примеры:
   1. BBCode:[img]https://example.com/logo.png[/img]
   Результат: Изображение будет отображено на странице.
   
   2. BBCode:Посмотрите наш новый продукт: [img]https://example.com/product.jpg[/img].
   Результат: Посмотрите наш новый продукт: .
   
   3. BBCode:[img]https://example.com/banner.png[/img]
   Результат:.
   
7. Цитаты:
   - Тег:

   Цитата:
   цитируемый текст

   - Описание: Цитаты используются для выделения цитируемого текста или фрагментов из других источников. Они помогают структурировать диалоги или обсуждения.
   - Примеры:
   1. BBCode:[quote]Всё, что нас не убивает, делает нас сильнее.[/quote]
   Результат:
   

   Цитата:
   Всё, что нас не убивает, делает нас сильнее.

   
   2. BBCode:[quote]Никогда не сдавайся, даже когда кажется, что всё потеряно.[/quote]
   Результат:
   

   Цитата:
   Никогда не сдавайся, даже когда кажется, что всё потеряно.

   
   3. BBCode:[quote]Успех — это сумма маленьких усилий, повторяемых день за днём.[/quote]
   Результат:
   

   Цитата:
   Успех — это сумма маленьких усилий, повторяемых день за днём.

8. Списки:
   - Тег (нумерованный список):
   [ol]
   [li]Первый пункт
9. Второй пункт

- Тег (маркированный список):
[list]
[*]Первый пункт
[*]Второй пункт
[/list]
- Описание: Списки помогают организовать информацию в удобном для восприятия виде. BBCode поддерживает как нумерованные списки (

), так и маркированные ([list]).
- Примеры:
1. BBCode (нумерованный список):
[ol]
[li]Шаг первый: подготовка[/li]
[li]Шаг второй: выполнение[/li]
[li]Шаг третий: завершение[/li]
[/ol]
Результат:
[ol]
1. Шаг первый: подготовка
2. Шаг второй: выполнение
3. Шаг третий: завершение

2. BBCode (маркированный список):
[list]
[*]Яблоки
[*]Груши
[*]Бананы
[/list]
[b]Результат:[/b]
[list]
[*]Яблоки
[*]Груши
[*]Бананы
[/list]

3. BBCode (смешанный список):
[ol]
[li]Основные ингредиенты:
[list]
[*]Мука
[*]Сахар
[*]Яйца
[/list]
[/li]
[li]Дополнительные ингредиенты:
[list]
[*]Какао
[*]Ваниль
[/list]
[/li]
[/ol]
Результат:

1. Основные ингредиенты:
   [list]
   [*]Мука
   [*]Сахар
   [*]Яйца
   [/list]
2. Дополнительные ингредиенты:
   [list]
   [*]Какао
   [*]Ваниль
   [/list]

[/li]

Цвет текста:
- Тег:текст
- Описание: Этот тег позволяет изменить цвет текста. Цвет можно указать как словом (например, red), так и в формате HEX (#FF0000).
- Примеры:
1. BBCode:[color=blue]Этот текст синий[/color].
Результат:Этот текст синий.

2. BBCode:[color=#FF0000]Этот текст красный[/color].
Результат:Этот текст красный.

3. BBCode: [color=green]Зелёный текст[/color] выглядит приятно.
Результат:Зелёный текст выглядит приятно.

Размер текста:
- Тег:текст
- Описание: Тег [size] позволяет изменить размер текста. Размер указывается в процентах или пикселях, в зависимости от платформы.
- Примеры:
1. BBCode:[size=30]Большой текст[/size].
Результат:Большой текст.

2. BBCode:[size=10]Маленький текст[/size].
Результат:Маленький текст.

3. BBCode:[size=50]Очень большой текст[/size].
Результат:Очень большой текст.

Заголовки:
- Тег: [h1]Заголовок первого уровня[/h1]
- Описание: Заголовки используются для структурирования контента. В BBCode поддерживаются заголовки от [h1] до [h6].
- Примеры:
1. BBCode:[h1]Главный заголовок[/h1]
Результат:
[h1]Главный заголовок[/h1]

2. BBCode:[h2]Подзаголовок[/h2]
Результат:
[h2]Подзаголовок[/h2]

3. BBCode:[h3]Дополнительный раздел[/h3]
Результат:
[h3]Дополнительный раздел[/h3]

[/ol]

Заключение

BBCode — это мощный, но простой инструмент для форматирования текста на форумах, блогах и других платформах. Он предоставляет все необходимые теги для создания читаемого и структурированного контента, включая выделение текста, создание списков, вставку изображений и ссылок. Знание основных тегов BBCode поможет вам легко адаптироваться к различным платформам и создавать качественный контент.

Можешь почитать и вот эту статейку "FileInput - плагин заменяющий стандартный input type="file""