Los códigos BBCode (También se puede ver escrito separado, como BB Code) sirven para especificar la forma con la que se debe mostrar un texto, por medio de una especie de etiquetas, parecidas a las que conocemos en HTML, que permiten formatear dicho texto. Estos códigos podemos haberlos visto utilizarse en foros o a la hora de subir comentarios de usuarios a una página web.

Los BBCode son como estos:

Esto es un [i]ejemplo de texto[/i] con BBcodes: [b]aquí pongo una negrita[/b].
[code]y esto es un código fuente...[/code]
Y ahora una [url]http://www.desarrolloweb.com[/url].

Este código, como se puede apreciar, tiene varias marcas entre corchetes, para producir diversos estilos y bloques de texto que deben formatearse de una manera específica. Al procesar este texto y sus códigos BBCode, obtendremos como resultado un HTML como este:

Esto es un <em>ejemplo de texto</em> con Bbcodes: <strong>aquí pongo una negrita</strong>.
<code>y esto es un código fuente...</code>
Y ahora una <a href="http://www.desarrolloweb.com/">http://www.desarrolloweb.com</a>.

En definitiva, los BBCode, sirven para permitir a los usuarios un control mayor de los estilos y el formato en general de los mensajes que publican en foros o en comentarios de posts. Pero sin llegar a permitirles escribir directamente código HTML, para asegurarse que se mantiene controlado el formato de estos contenidos a la hora de visualizarlos en las páginas. En este artículo de desarrollo web .com explicaremos qué son los BBCode y dejaremos para artículos posteriores la explicación sobre cómo implementarlos en nuestras aplicaciones web.

Los BBCode Fueron creados originalmente por el sistema de foros PhpBB, y son las siglas de Buletin Board Code. Actualmente se han convertido en un estándar para la edición de textos en diversos foros y sistemas de comunidades, donde los usuarios pueden participar.

Podemos ver una lista de los BBCodes aquí:

Formateo de texto sencillo

[b]Negrita[/b]
[u]Subrayado[/u]
[i]Itálica[/i]
[s]Tachado[/s]
[sub]Subíndice[/sub]
[sup]Superíndice[/sup]

Formateo de textos avanzado

[color=blue]En color azul[/color] ( permite otros colores, claro, con valores hexadecimal como #ff5500)
[size=12]tamaño texto[/size] (permite valores distintos, consultar el estilo en tu implementación)
[font=arial]cambio la tipografía[/font]
[align=right]alineación del texto[/align]
[quote="Pepe"]Esta es una cita de un texto enviado por Pepe[/quote]
[code]Esto es un código fuente[/code]

Enlaces

[url]http://www.desarrolloweb.com[/url]
[url=http://www.desarrolloweb.com]DesarrolloWeb.com[/url] (para que el texto del enlace sea distinto que la URL enlazada

Imágenes

[img]http://www.desarrolloweb.com/images/logo_desarrollo_web.gif[/img]

Listas

[list]
[*]Red
[*]Blue
[*]Yellow
[/list]

Las listas permiten otros tipos de lista si se indica un valor al iniciar la lista, como [list=1]

Enlaces a email

[email]email@dominiodelemail.com[/email]