Conversor de BBCode a HTML
BBCode, HTML y Pug con vista previa

Qué hace por ti un conversor de BBCode a HTML

BBCode es el marcado de los foros antiguos. Primero, escribes una etiqueta entre corchetes y el foro la convierte en negrita, un enlace o una cita. Además, otros sitios usan HTML y algunos usan Pug. Por eso a menudo necesitas pasar texto de uno a otro.

Esta herramienta lo hace en una sola caja. Primero, pega tu marcado. Después elige el formato que tienes y el que quieres. El resultado aparece mientras escribes, y una vista previa muestra cómo queda.

Lee BBCode, HTML y Pug. Después escribe esos mismos tres. Así salen seis pares, y cada uno funciona de la misma manera.

Todo se ejecuta en tu navegador. Así tu texto nunca sale de tu dispositivo. Eso importa, porque los mensajes y las plantillas suelen contener nombres y notas privadas.

De BBCode a HTML, etiqueta por etiqueta

Primero, la herramienta lee cada etiqueta entre corchetes. Negrita, cursiva, subrayado y tachado se vuelven strong, em, u y s. Un enlace se vuelve un ancla, y una cita se vuelve un blockquote con el nombre del autor en una etiqueta cite.

Además, las listas funcionan. Cada asterisco empieza un elemento nuevo, y un signo igual elige una lista numerada. Las etiquetas de color y tamaño se vuelven spans con estilo, y las etiquetas center, left y right fijan la alineación del texto.

Los bloques de código conservan su texto exactamente como lo escribiste. Así una etiqueta dentro de un bloque de código sigue siendo una etiqueta, y nada de lo que hay dentro se convierte en marcado.

Para más detalle, consulta: Wikipedia article on BBCode.

Un visor de BBCode seguro

Luego, la vista previa funciona como visor de BBCode. Dibuja el resultado un elemento cada vez, así que nada de tu texto puede ejecutarse. Solo pasa una lista corta de etiquetas.

Además, los enlaces se abren en una pestaña nueva con nofollow, y solo cuentan las direcciones web y de correo. La herramienta descarta un enlace que empieza por javascript y su texto se queda.

Las imágenes aparecen como una pequeña etiqueta en lugar de una imagen. Así se evita que la página cargue archivos de otros sitios.

De HTML a BBCode

Lo contrario también funciona. Primero, pega HTML y la herramienta escribe BBCode que puedes publicar en un foro. Strong y b se vuelven la etiqueta de negrita, em e i se vuelven cursiva, y un ancla se vuelve una etiqueta url.

Después las listas, las citas y los bloques de código conservan su forma. Además, los encabezados se vuelven una línea en negrita y más grande. La herramienta descarta las etiquetas para las que BBCode no tiene palabra, y su texto se queda.

La herramienta deja fuera los scripts, los estilos y el head de una página. Así obtienes texto limpio para un mensaje.

De HTML a Pug y de Pug a HTML

Pug, que antes se llamaba Jade, es una forma corta de escribir HTML. Quita los corchetes angulares y las etiquetas de cierre. Después usa sangrías. Un div con un id y una clase se vuelve una línea como almohadilla order punto card.

Primero, la herramienta escribe Pug a partir de tu HTML, con etiquetas, ids, clases y atributos. Después también lee Pug y lo devuelve a HTML, con dos espacios de sangría y un elemento por línea.

Además, lee la parte de marcado de Pug. Los bucles, las condiciones, los mixins y los includes necesitan el motor de Pug, así que la herramienta se salta esas líneas y te dice cuántas son.

Enlaces, colores y tamaños seguros

Primero, la herramienta comprueba cada valor antes de escribirlo. Un color debe ser un código hexadecimal o un nombre de color sencillo. Un tamaño debe ser un número del uno al siete, o un tamaño pequeño en píxeles. Un enlace debe empezar por http, https o mailto.

Así un valor malo nunca llega a tu HTML. La herramienta descarta la etiqueta y su texto se queda.

Saltos de línea y entidades

Primero, una línea nueva en BBCode se vuelve una etiqueta br. La herramienta se traga un salto de línea justo después de una cita, una lista o un bloque de código, porque el bloque ya empieza una línea nueva.

La herramienta escapa los caracteres especiales. Un signo menor que se vuelve una entidad en el HTML, así que no puede abrir una etiqueta por accidente.

Seguro por diseño

Primero, la herramienta lee tu marcado como texto y nunca se lo entrega al navegador como código. Así una etiqueta script no puede ejecutarse, y un manejador de eventos no puede dispararse.

La vista previa sigue la misma regla. Construye cada elemento a mano a partir de una lista corta de etiquetas seguras, así que ni un mensaje hostil puede tocar tu página.