BBCode

BBCode ( kod tablicy ogłoszeń )
deweloper
phpBB
http://php.net/manual/en/book.bbcode.php
Informacje ogólne
typu mim	text/html
wpisz kod	TEXT
typ formatu	język znaczników
rozszerzony z	HTML
rozszerzony do	XBBCode
Normy	Nie ma standardowego dokumentu
otwarty format	?

BBCode z angielskiego Bulletin Board Code to lekki język znaczników używany najlepiej na forach dyskusyjnych i e- mailach , aby upiększyć sposób prezentacji wiadomości lub posta .

BBCodes nie może być interpretowany bezpośrednio przez przeglądarkę internetową, więc to własny system forum jest odpowiedzialny za tłumaczenie treści oznaczonych w BBCode na język zrozumiały dla przeglądarek internetowych, HTML lub XHTML .

BBCode nie jest oficjalnie uregulowany, ale dzięki szerokiemu zastosowaniu stał się de facto standardem, a także aktualnym standardem najlepszych praktyk .

Historia

BBCode został stworzony przez PhpBB dla własnych forów i został po raz pierwszy wprowadzony w 1998 roku wraz z oprogramowaniem forum Ultimate Bulletin Board w wersji 3. Dlatego czasami jest również nazywany UBBCode. Wreszcie, dzięki swojej prostocie, mocy i funkcjonalności, rozprzestrzenił się na zdecydowanej większości forów internetowych, a nawet w e-mailach.

Cel

BBCode został opracowany, aby zapewnić użytkownikom mechanizm usprawniający prezentację ich wiadomości w bezpieczniejszy, prostszy i bardziej ograniczony sposób. Wcześniej wiele forów pozwalało na używanie HTML, z takim skutkiem ubocznym, że źle napisany HTML zaburzałby cały układ strony lub HTML mógł być użyty do włączenia JavaScriptu, co powoduje poważne problemy z bezpieczeństwem poprzez umożliwienie ataków XSS .

Jednak niektóre implementacje BBCode mają problemy związane ze sposobem tłumaczenia BBCode na HTML, co może być sprzeczne z bezpieczeństwem, jakie BBCode miał zapewnić. Alternatywą jest poprawnie napisany filtr HTML (z których wiele jest dostępnych bezpłatnie).

Chociaż podstawowe tagi BBCode są podobne w większości programów do obsługi forów internetowych, tak naprawdę nie ma dokumentu standaryzującego BBCode iw konsekwencji istnieje wiele wariantów, które często są ze sobą niekompatybilne. W niektórych wariantach w nazwach tagów rozróżniana jest wielkość liter, a inne nie. Niektóre warianty mają tagi, które wyróżniają HTML, ASP, PHP, SQL i inne języki znaczników oraz języki programowania. Itp.

Struktura i składnia

BBCode jest oparty na języku HTML i jest do niego bardzo podobny pod względem struktury i składni. BBCode posiada elementy i atrybuty takie jak HTML, chociaż jest to jego uproszczona wersja, dzięki czemu jest znacznie łatwiejszy do nauczenia się i używania.

Elementy są podstawową strukturą języka, każdy element ma dwie podstawowe właściwości: treść i atrybuty.

Elementy

Elementy w BBCode zwykle mają znacznik początkowy i końcowy, treść jest umieszczona pomiędzy dwoma znacznikami. W BBCode nazwa tagu jest ujęta w nawiasy kwadratowe [ ] , w przeciwieństwie do HTML , gdzie używa się symboli nierówności < > . Niektóre tagi zawierają modyfikator, zwany również atrybutem, którego wartość jest przypisywana do samego tagu za pomocą symbolu = .

Atrybuty

Większość atrybutów elementu w BBCode to po prostu wartości zapisane w tagu początkowym elementu i przypisane mu przez znak równości = , po nazwie elementu. Wartość może być otoczona podwójnymi cudzysłowami lub nie, większość systemów forum toleruje te modyfikacje. Jednak pozostawienie wartości bez cudzysłowów jest uważane za niebezpieczną praktykę.

Ogólna składnia to wtedy:

[nombre_etiqueta="atributo"] Contenido [/nombre_etiqueta]

Parsowanie

BBCode jako taki byłby interpretowany przez przeglądarkę jako zwykły tekst. Aby nie wyglądało to jako takie, ale raczej w specjalnym formacie, musi najpierw zostać przetworzone przez skrypt analizy lub parser po stronie serwera, na którym znajduje się program forum. Parser analizuje tekst wprowadzony przez użytkownika przed dostarczeniem go do przeglądarki w odpowiednim formacie, tak aby mógł go zinterpretować. Parser BBCode w szczególności szuka znaczników BBCode i zastępuje je odpowiednimi znacznikami HTML, najpierw wykonując analizę składni w celu sprawdzenia błędów.

Na przykład element BBCode [b] [/b] dla pogrubienia, może być nadpisany przez element HTML < b> </ b> , ale nie byłoby to poprawne dla pojedynczego znacznika [b] , więc po tym parser wykonał analizę błędów składniowych, dostarcza wyjściowy kod HTML.

Z reguły parsowanie odbywa się „w jedną stronę”, to znaczy post na forum jest zapisywany w bazie forum wraz z BBCode w stabilny sposób i za każdym razem, gdy przeglądarka uzyskuje dostęp do tego konkretnego posta, parser forum tłumaczy BBCode przed przedstawieniem go w przeglądarce.

Skrypty parsujące mogą być pisane w różnych językach programowania po stronie serwera, z których kilka bardzo popularnych to na przykład PHP i Perl .

Przykładem bardzo prostego parsera napisanego w PHP może być:

<?php  
$text  =  preg_replace ( "/\[b\](.*)\[\/b\]/Usi" ,  "<b> \\ 1</b>" ,  $text ); 
$text  =  preg_replace ( "/\[i\](.*)\[\/i\]/Usi" ,  "<i> \\ 1</i>" ,  $text ); 
$text  =  preg_replace ( "/\[u\](.*)\[\/u\]/Usi" ,  "<u> \\ 1</u>" ,  $text ); 
$text  =  preg_replace ( "/\[kolor=(.*)\](.*)\[\/kolor\]/Usi" ,  "<span style= \" kolor: \\ 1 \" > \\ 2 </span>" ,  $tekst ); 
$text  =  preg_replace ( "/\[email=(.*)\](.*)\[\/email\]/Usi" ,  "<a href= \" mailto: \\ 1 \" > \\ 2 </a>" ,  $tekst ); 
?>

Korzystanie z BBCode

Język BBCode przedstawia elementy, które można pogrupować w pięć szerokich kategorii:

• Modyfikatory wyglądu tekstu
• pokaz slajdów
• hiperłącza
• uporządkowane struktury
• Specjalne bloki tekstowe użytkowe

Modyfikatory wyglądu tekstu

Do modyfikacji wyglądu tekstu można użyć następujących prostych znaczników, większość z nich pochodzi z HTML, a ich użycie jest szeroko rozpowszechnione w różnych wersjach BBCode:

Format	Oznaczający	Wygląd zewnętrzny
[b]Negrita[/b]	pogrubiony tekst	Pogrubiona czcionka
[u]Subrayado[/u]	Podkreślony tekst	Podkreślony tekst
[i]Cursiva[/i]	Tekst pisany kursywą lub kursywą	Kursywa
[s]Tachado[/s]	Przekreślony tekst	Przekreślenie
[size=18]Tamaño 18[/size]	Zwiększ rozmiar tekstu do 18 punktów ]	rozmiar 18

Modyfikatory wyrównania

Użycie znaczników wyrównania w BBCode może być mniej więcej podobne do HTML w zależności od używanego systemu forum, istnieją dwa główne mechanizmy wyrównywania tekstu, tabel lub obrazów.

• [align= alignment ]Treść do wyrównania[/align] gdzie atrybut wyrównania może przyjmować następujące wartości:

left : wyrównanie zawartości do lewej.

w prawo : aby wyrównać zawartość do prawej.

centrum : wyśrodkowanie treści.

uzasadnić : uzasadnić treść.

• [ Wyrównanie ]Treść do wyrównania[/ wyrównanie ], gdzie atrybut zastępuje nazwę znacznika.

Format	Oznaczający	Wygląd zewnętrzny
[align="left"]Contenido a alinear[/align]	wyrównaj do lewej	Treść do wyrównania
[align="right"]Contenido a alinear[/align]	wyrównaj w prawo	Treść do wyrównania
[align="center"]Contenido a alinear[/align]	Wyrównaj do środka	Treść do wyrównania
[align="justify"]Pequeño párrafo que demuestra el texto contenido justificado[/align]	Uzasadnij zawarty tekst	Mały akapit pokazujący wyjustowany tekst treści
[left]Contenido a alinear[/left]	wyrównaj do lewej	Treść do wyrównania
[right]Contenido a alinear[/right]	wyrównaj w prawo	Treść do wyrównania
[center]Contenido a alinear[/center]	Wyrównaj do środka	Treść do wyrównania
[justify]Pequeño párrafo que demuestra el texto contenido justificado[/justify]	Uzasadnij zawarty tekst	Mały akapit pokazujący wyjustowany tekst treści

Kolory

BBCode pozwala na modyfikację koloru wyświetlanego tekstu, albo poprzez użycie nazwy jednego z predefiniowanych kolorów w standardzie HTML, albo poprzez bezpośrednie wpisanie żądanego koloru w szesnastkowym kodzie RGB . Ta ostatnia metoda, choć nieco bardziej skomplikowana, pozwala na pracę z większą różnorodnością kolorów, jedynym wymaganiem jest umiejętność ich generowania. Istnieją narzędzia, które się tym zajmują, na przykład rozszerzenie ColorZilla dla przeglądarki Mozilla Firefox .

Niektóre programy na forum wspierają stosowanie ograniczonego 3-cyfrowego wariantu systemu szesnastkowego RGB (gdzie R jest wartością koloru czerwonego, G koloru zielonego, a B koloru niebieskiego) system ten jest łatwiejszy w obsłudze kosztem posiadania mniej odcieni kolorów. Jednak generalnie używany jest system 6 szesnastkowy (RRGGBB, gdzie RR oznacza wartość należącą do koloru czerwonego, GG do koloru zielonego, a BB do koloru niebieskiego).System ten teoretycznie pozwala na reprezentację 16 777 216 kolorów.

Mała lista przykładowych kolorów dostępnych w BBCode ze standardu HTML. Więcej kolorów znajdziesz w głównym artykule :

Format	Oznaczający	Wygląd zewnętrzny
[color="black"]Negro[/color]	Czarny tekst	Czarny
[color="brown"]Marrón[/color]	Tekst w kolorze brązowym	brązowy
[color="maroon"]Granate[/color]	bordowy tekst	Granat
[color="red"]Rojo[/color]	Tekst w kolorze czerwonym	Czerwony
[color="coral"]Coral[/color]	Tekst w kolorze koralowym	Koral
[color="orange"]Naranja[/color]	Tekst w kolorze pomarańczowym	Pomarańczowy
[color="yellow"]Amarillo[/color]	Żółty tekst	Żółty
[color="olive"]Oliva[/color]	Tekst w kolorze oliwkowym	Oliwa
[color="lime"]Verde lima[/color]	Kolor Tekst Limonkowy	Zielona limonka
[color="limegreen"]Verde claro[/color]	Tekst w jasnozielonym kolorze	Jasnozielony
[color="green"]Verde[/color]	Tekst w kolorze zielonym	Zielony
[color="darkgreen"]Verde oscuro[/color]	Tekst w kolorze ciemnozielonym	Ciemnozielony
[color="teal"]Cerceta[/color]	Turkusowy tekst	cyraneczka
[color="cyan"]Cian[/color]	Tekst w kolorze cyjan	cyjan
[color="lightskyblue"]Azul cielo claro[/color]	Jasnoniebieski kolor tekstu	jasny błękit nieba
[color="blue"]Azul marino[/color]	Tekst w kolorze granatowym	ciemnoniebieski
[color="navy"]Azul naval[/color]	Tekst w kolorze granatowym	ciemnoniebieski
[color="pink"]Rosa[/color]	Różowy tekst	Różowy
[color="magenta"]Magenta[/color]	Tekst w kolorze magenta	Magenta
[color="purple"]Púrpura[/color]	Tekst w kolorze fioletowym	Fioletowy
[color="gray"]Gris[/color]	Tekst w kolorze szarym	Szary
[color="silver"]Plata[/color]	Tekst w kolorze srebrnym	Srebro
[color="white"]Blanco[/color]	Biały tekst	Biały
[color=#B0C4DE]#B0C4DE[/color]	Kolorowy tekst RGB #B0C4DE	#B0C4DE

Źródła

BBCode umożliwia również zmianę czcionki tekstu, jednak wygodnie jest pamiętać, że nie wszystkie czcionki będą widoczne dla wszystkich, ponieważ aby czcionka wyświetlała się w przeglądarce, musi być zainstalowana w systemie. system operacyjny, na którym działa przeglądarka. Oto kilka przykładów najczęstszych:

Format	Oznaczający	Wygląd zewnętrzny
[font="Arial"]Arial[/font]	Tekst czcionki Arial	Arial
[font="Wingdings"]Wingdings[/font]	Tekst z czcionką Wingdings	Skrzydła
[font="Comic Sans MS"]Comic Sans MS[/font]	Tekst z czcionką Comic Sans MS	Komiks Sans MS
[font="Century Gothic"]Century Gothic[/font]	Tekst czcionką Century Gothic	Wieczny gotyk
[font="Courier"]Courier[/font]	Tekst czcionki kurierskiej	kurier
[font="Fixedsys"]Fixedsys[/font]	Tekst z czcionką Fixedsys	fixedsys
[font="Georgia"]Georgia[/font]	Tekst z gruzińską czcionką	Gruzja
[font="Lucida Sans"]Lucida Sans[/font]	Tekst czcionką Lucida Sans	Lucida Sans
[font="Monotype Corsiva"]Monotype Corsiva[/font]	Tekst czcionki Monotype Corsiva	Monotyp Corsiva
[font="Times New Roman"]Times New Roman[/font]	Tekst czcionką Times New Roman	Czcionka Times New Roman
[font="Trebuchet MS"]Trebuchet MS[/font]	Tekst czcionką Trebuchet MS	Trebusz MS
[font="Verdana"]Verdana[/font]	Tekst czcionki Verdana	Verdana

Prezentacja obrazów

Aby wyświetlić obraz BBCode, masz znacznik img. Ogólny format tego elementu to:

[img]Ruta de la imagen[/img]

Na przykład następujący kod:

[img]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]

Pokazywałby następujący wynik

Na wielu forach istnieje możliwość modyfikowania rozmiaru obrazka za pomocą atrybutów width i height . Domyślnie oba atrybuty wskazują rozmiar w pikselach , z jakim będzie wyświetlany obraz, chociaż można go dostosować za pomocą modyfikatora „ % ” (procent), aby wskazać, jaki procent widocznego obszaru będzie zajęty.

Na przykład kod:

[img width=264 height=240]http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Laser_Towards_Milky_Ways_Centre.jpg/660px-Laser_Towards_Milky_Ways_Centre.jpg[/img]

Pokazywałby ten wynik:

Hiperłącza

Jako język wywodzący się z HTML, jednym z najpotężniejszych elementów BBCode jest hiperłącze , zwykle reprezentowane przez tag URL . Istnieją dwa bezpośrednie sposoby tworzenia hiperłączy tekstowych w BBCode przy użyciu tagu URL :

Format	Oznaczający	Wygląd zewnętrzny
[url]http://www.google.com[/url]	Pokazuje hiperłącze na adresie docelowym	http://www.google.com
[url="http://www.google.com"]Google[/url]	Wyświetla hiperłącze przy wybranym słowie	Google

Uporządkowane struktury

BBCode posiada dwa główne typy uporządkowanych struktur, list i tabel. Te ostatnie nie są powszechnie akceptowane i tylko niektóre systemy forum pozwalają na pracę z nimi. Z kolei istnieją dwa rodzaje list, listy proste i listy uporządkowane. Wszystkie uporządkowane struktury w BBCode są zasadniczo podobne do swoich odpowiedników w HTML.

Listy proste lub nieuporządkowane

Lista nieuporządkowana wyświetla każdy element po kolei, jeden po drugim przez wcięcie każdego elementu rozpoczynającego się od znaku punktora. Aby utworzyć listę nieuporządkowaną, użyj znaczników [list] [/list] i zdefiniuj każdy element listy za pomocą specjalnego znacznika [*] .

Na przykład następujący kod

[list]

[*]Primer ítem

[*]Segundo ítem

[*]Tercer ítem

[/list]

Wygeneruje następujący wynik:

• pierwszy przedmiot
• drugi przedmiot
• trzeci przedmiot

Listy uporządkowane

Drugi rodzaj listy, lista uporządkowana, oferuje możliwość decydowania, co będzie wyświetlane jako wskaźnik kolejności przed każdą pozycją.

Aby utworzyć uporządkowaną listę, możesz użyć np. [list=1] [/list] , aby utworzyć listę numerowaną, lub alternatywnie możesz użyć np . [list=a] [/list] , aby utworzyć listę alfabetyczną. Dodatkowo możesz rozpocząć posortowaną listę dowolną inną cyfrą lub literą. Podobnie jak w przypadku list nieuporządkowanych, elementy są określane za pomocą [*] .

Na przykład kod

[list=1]

[*]Ir a la tienda

[*]Comprar una nueva PC

[*]Insultar a la PC cuando se cuelgue

[/list]

Wygeneruje następujący wynik:

1. Idź do sklepu

2. Kup nowy komputer!

3. Obrażaj komputer, gdy się zawiesi

Lub jeśli użyto listy alfabetycznej:

[list=a]

[*]Ir a la tienda

[*]Comprar una nueva PC

[*]Insultar a la PC cuando se cuelgue

[/list]

Wygeneruje następujący wynik:

a. Iść do sklepu

b. Kup nowy komputer

c. Obrażaj komputer, gdy się zawiesi

Stoły

Zarządzanie tabelami w BBCode jest bardzo podobne do HTML i odbywa się za pomocą elementu [table] [/table] , który również zawiera znaczniki [tr] [/tr] używane do odgraniczenia każdej linii oraz znaczniki [td][ /td] , z którym każda komórka jest oddzielona. Przykładowy kod tabeli z trzema wierszami i czterema kolumnami to:

[table border="1"]

[tr] [td]Celda 1.1[/td] [td]Celda 1.2[/td] [td]Celda 1.3[/td] [td]Celda 1.4[/td] [/tr]

[tr] [td]Celda 2.1[/td] [td]Celda 2.2[/td] [td]Celda 2.3[/td] [td]Celda 2.4[/td] [/tr]

[tr] [td]Celda 3.1[/td] [td]Celda 3.2[/td] [td]Celda 3.3[/td] [td]Celda 3.4[/td] [/tr]

[/table]

Atrybut border=" " służy do wskazania szerokości obramowania tabeli w pikselach; jeśli jest równy 0, granice nie są pokazywane. Ogólnie rzecz biorąc, tag dopuszcza również atrybuty width=" %" wskazujące w procentach szerokość, jaką powinna zajmować tabela, oraz align=" " , gdzie wyrównanie tabeli jest oznaczone jako blok, a nie zawartość komórek , że należy to zrobić w każdym znaczniku [tr] , jeśli chcesz wyrównać zawartość linii, lub w każdym znaczniku [td] , jeśli chcesz wyrównać każdą komórkę.

Powyższy kod da wynik podobny do następującego:

Komórka 1.1	Komórka 1.2	Komórka 1.3	Komórka 1.4
Komórka 2.1	Komórka 2.2	Komórka 2.3	Komórka 2.4
Komórka 3.1	Komórka 3.2	Komórka 3.3	Komórka 3.4

I modyfikując pierwszą linię przez:

[table border="1" align="center" width="90%"]

Otrzymuje się:

Komórka 1.1	Komórka 1.2	Komórka 1.3	Komórka 1.4
Komórka 2.1	Komórka 2.2	Komórka 2.3	Komórka 2.4
Komórka 3.1	Komórka 3.2	Komórka 3.3	Komórka 3.4

Specjalne bloki tekstu użytkowego

BBCodes pozwalają na obsługę bloków tekstu o specjalnych właściwościach używanych ogólnie do różnych typów cytatów lub odnośników. W szczególności większość forów pozwala na użycie trzech bloków tekstu o specjalnej użyteczności. Cytaty, odniesienia do kodu źródłowego i spoilery.

Cytaty

Bloki cytatów służą do transkrypcji wypowiedzi innych osób, odpowiednio wskazując, kto był autorem tych wypowiedzi. Użyty znacznik to [cytat] .

Przykładowy kod:

[quote="James"]Éste es el texto que quiero citar.[/quote]

Pokazywałoby coś podobnego do tego:

Jakub powiedział:

To jest tekst, który chcę zacytować.

Z drugiej strony, jeśli nie chcesz cytować nikogo konkretnie, możesz użyć znacznika cudzysłowu bez podawania nazwy:

[quote]Éste es el texto que quiero citar.[/quote]

Kody źródłowe

Gdy konieczne jest zacytowanie kodu źródłowego języka programowania lub języka znaczników, dobrą praktyką jest użycie znacznika kodu. Znacznik kodu pełni podwójną funkcję, z jednej strony to, co jest zawarte w znacznikach [code][/code] nie jest interpretowane przez program forum, co zapobiega wypadkom w prezentacji formatu podczas używania wyrażeń lub słowa zastrzeżone, a z drugiej strony czyni sam kod źródłowy bardziej czytelnym, ponieważ używany jest specjalny krój pisma o stałej szerokości, w którym wszystkie znaki, w tym spacja, mają tę samą szerokość i są takie same odstępy między wszystkimi znakami. W konsekwencji kod źródłowy pozostaje ułożony poziomo i pionowo w różnych wierszach.

Przykładowy kod:

[code]

int main()

{

printf("hola");

}

[/code]

wyglądałby tak

Kod:

intmain() { printf("cześć"); }

Spoilery

Element [spoiler] [/spoiler] służy do ukrywania poufnych treści, które mogą irytować innych użytkowników, pozostawiając każdemu możliwość sprawdzenia tych treści lub nie. Innym częstym zastosowaniem jest zmniejszenie pionowego rozmiaru słupka, aby nie męczyło go przechodzenie przez całą deskę.

Zawartość spoilera można wyświetlić, klikając przycisk zwykle zatytułowany „ spoiler ”, „ pokaż ” lub „ wyświetl ”.

Na przykład następujący kod:

[spoiler]Este es el contenido que debe permanecer oculto[/spoiler]

Pokazywałby wynik podobny do tego:

SPOILERY

To jest treść, która powinna pozostać ukryta

Podczas gdy następujący kod:

[spoiler="Título del Spoiler"]Este es el contenido que debe permanecer oculto[/spoiler]

Pokazywałby wynik podobny do tego:

Tytuł spoilera

To jest treść, która powinna pozostać ukryta

Bardziej złożone zastosowania

Zagnieżdżanie elementów

BBCodes pozwala na zagnieżdżanie elementów, aby uzyskać dużo bardziej atrakcyjne wyniki, typowym przykładem jest np. tworzenie linku na obrazku a nie na linii tekstu.

Kod do tego byłby następujący:

[url="ruta del enlace"][img] ruta de la imagen [/img][/url]

Inne przykłady to na przykład zmiana rozmiaru, koloru i czcionki tekstu lub akapitu, zmiana koloru linku itp.

Jednak praktycznie nie ma ograniczeń co do możliwych kombinacji, a aby uniknąć nieoczekiwanych wyników spowodowanych błędami analizy, zawsze wygodnie jest zamykać tagi dokładnie w odwrotnej kolejności niż były otwierane.

Na przykład byłaby to poprawna forma:

[font="Comic Sans Ms"][color="orange"][size=18] Texto a formatear [/size][/color][/font]

A to jest niepoprawny sposób:

[font="Comic Sans Ms"][color="orange"][size=18] Texto a formatear [/font][/color][/size]

Linki zewnętrzne

• Wyjaśnienie BBCode (z phpBB-Es.COM)
• Wyjaśnienie w języku angielskim (Web of phpBB, twórca języka)
• Wieloplatformowy edytor BBCode offline
• Gruszka: Informacje o pakiecie: HTML_BBCodeParser