[Instrukcja] Znaczniki BBCode; formatowanie treści

[dziobu]

Pewnie każdy zauważył szereg tajemniczych przycisków nad polem tekstowym z wiadomością. Podstawowe jak pogrubienie czy kolor tekstu są chyba wszystkim znane, ale jest kilka mniej popularnych pozycji - i je chciałbym tu opisać.

Quote nie opisuję - szablon jest zawsze podczas cytowania kogokolwiek; to chyba nie wymaga komentarza.

UWAGA!Wszystkie wcięcia w poniższych kodach źródłowych mają na celu tylko zwiększenie czytelności i nie wpływają na formatowanie tekstu.

1. CODE
Wbrew temu co by się wydawało, ten znacznik jest niemal zapomniany. Pozwala na zapisanie fragmentu tekstu bez żadnego formatowania czy ucinania białych znaków. Np - chcę pokazac jak zapisać pogrubienie, ale z automatu skrypt mi zamienia mój przykład na gruby tekst. Rozwiązaniem jest otoczenie go takiem "code":

Kod: Zaznacz cały

[b]pogrubienie[/b]

czyli napisanie tego:

Kod: Zaznacz cały

[code][b]pogrubienie[/b]

[/code]

Tak powyższa częsc posta wygląda w rzeczywistości w edytorze:

A teraz w drugą stronę - mam tekst konsolowy który wymaga do zapisania czcionki o stałej szerokości a całość wyrównana jest spacjami. Dobrym przykładem będzie kawałek kodu źródłowego:

-------------------------------------------------------------------------------
L := Length(S);
n := 1;
while (I <= L) and (S[n] <= ' ') do
Inc(I);

if I > L then
begin
Result := '';
end else
begin
while S[L] <= ' ' do
Dec(L);

L := L - n + 1;
if L > 0 then
begin
SetLength(Result, L);
CopyMemory(@Result[1], @S[n], L*2);
end else
Result := '';
end;
-------------------------------------------------------------------------------

Chyba każdy przyzna że nie jest szczególnie czytelny. Co innego jak zapisze się go tak:

Kod: Zaznacz cały

-------------------------------------------------------------------------------
L := Length(S);
i := 1;
while (I <= L) and (S[i] <= ' ') do
  Inc(I);

if I > L then
begin
  Result := '';
end else
begin
  while S[L] <= ' ' do
    Dec(L);

  L := L - i + 1;
  if L > 0 then
  begin
    SetLength(Result, L);
    CopyMemory(@Result[1], @S[i], L*2);
  end else
    Result := '';
end;
-------------------------------------------------------------------------------

Ciekawostka - w powyższym przykładzie tekst (S) jest indeksowany zmienną "i". W tagu CODE zamieściłem oryginał i tu to widać. Natomiast w niesformatowanym przykładzie jeszcze wyżej musiałem zamienić go na "n" ([ n ]), ponieważ [ i ] oznacza włączenie kursywy. Do tego - znacznik jest usuwany co w kodzie źródłowym nie jest pożądane. Właśnie z tego powodu, kod źródłowy - czy to kod progamu, strony czy byle plik konfiguracyjny - dobrze jest zamieszczać z użyciem CODE.../CODE.

2. LIST
Często wymienianie listy pozycji (elementów, adresów, sprzętu, itp) jest nieczytelne - "pauza" sprawdza się na kartce, w sieci wygląda już gorzej.
Format listy to:

• całość otoczona tagami LIST,
• każdy element rozpoczyna się tagiem * (gwiazdka); i - tu wyjątek - nie ma on zakończenia.

W praktyce wygląda to tak:

Kod źródłowy	Wynik wizualny
Kod: Zaznacz cały [list] [*]Pierwsza pozycja [*]Druga pozycja [*]Trzecia pozycja [/list]	Pierwsza pozycja Druga pozycja Trzecia pozycja

Oczywiście nic nie stoi na przeszkodzie żeby napisać to wszystko w jednej linii:

Kod źródłowy	Wynik wizualny
Kod: Zaznacz cały [list][*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list]	Pierwsza pozycja Druga pozycja Trzecia pozycja

Każdy użytkownik Worda czy innego edytora może zatęsknić za listą numerowaną - niepotrzebnie:

Kod źródłowy	Wynik wizualny
Kod: Zaznacz cały [list=1] [*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list] (list=1)	Pierwsza pozycja Druga pozycja Trzecia pozycja
Kod: Zaznacz cały [list=a] [*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list] (list=a)	Pierwsza pozycja Druga pozycja Trzecia pozycja

To teraz moze trochę skomplikować zabawę - lista w liście. Dlaczego nie. Przecież można w ramach jednego taga zawrzeć drugi, dlaczego więc nie taki sam?

Kod źródłowy	Wynik wizualny
Kod: Zaznacz cały [list][*]Pierwsza lista [list=1][*]element 1 [*]element 2 [*]element 3 [*]element 4 [/list] [*]Druga pozycja [*]Trzecia pozycja [list=a][*]element 1 [*]element 2 [list][*]cośtam [*]inne cośtam [*]jeszcze inne cośtam [/list] [*]element 3 [/list] [/list]	Pierwsza lista element 1 element 2 element 3 element 4 Druga pozycja Trzecia pozycja element 1 element 2 cośtam inne cośtam jeszcze inne cośtam element 3
Kod: Zaznacz cały [list][*]Dodam, [list][*]że [list][*]takich [list][*]list [list][*]można [list][*]zagłębić [list][*]dowolnie [list][*]dużo [/list] [/list] [/list] [/list] [/list] [/list] [/list] [/list]	Dodam, że takich list można zagłębić dowolnie dużo

3. IMG
Jeśli bardzo nie trzeba, nie używajcie tego Zdjęcia na zewnętrznych serwerach giną czy są usuwane, a treść z przykładowymi obrazkami - których wtedy nie ma - jest bezwartościowa. Bardziej polecam załączać zdjęcia do postów:
viewtopic.php?f=22&t=2109&view=unread#unread

4. TABLE
Jak widać na przykładzie tego posta, tabelki są fajne i przydatne. (na chwile obecną są też brzydkie i zupełnie niekonfigurowalne, ale co tam )

Ogólne zasady:

• Całość tabelki zamyka się tagami TABLE
  • samo "TABLE" tworzy tabelkę o szerokości całego dostępnego miejsca (zmienia się wraz ze zmianą szerokości okna przeglądarki!),
  • "TABLE=XXX" tworzy tabelkę o szerokości podanej jako XXX (w pikselach).
• Tabelkę zapisuje się wierszami, tę natomiast oznacza się tak: TR <kolejno komórki wiersza> /TR
• Komórki:
  • nagłówek: TH <zawartość> /TH
  • normalna komórka: TD <zawartość> /TD

To teraz przykłady: (niestety tabelki nie da się zapisać w innej tabelce więc tu nie mogę umieścić kodu i wyniku w poziomie)
Kod źródłowy:

Kod: Zaznacz cały

[table]
  [tr]  [th]  Nagłówek 1  [/th]  [th]  Nagłówek 2  [/th]  [/tr]
  [tr]  [td]  dane 1      [/td]  [td]  dane 2      [/td]  [/tr]
  [tr]  [td]  dane 3      [/td]  [td]  dane 4      [/td]  [/tr]
[/table]

A tak to się prezentuje:

Nagłówek 1	Nagłówek 2
dane 1	dane 2
dane 3	dane 4

Ta sama tabelka z ograniczoną szerokością do 200 pikseli:
Kod źródłowy:

Kod: Zaznacz cały

[table=200]
  [tr]  [th]  Nagłówek 1  [/th]  [th]  Nagłówek 2  [/th]  [/tr]
  [tr]  [td]  dane 1      [/td]  [td]  dane 2      [/td]  [/tr]
  [tr]  [td]  dane 3      [/td]  [td]  dane 4      [/td]  [/tr]
[/table]

I wynik:

Nagłówek 1	Nagłówek 2
dane 1	dane 2
dane 3	dane 4

5. YOUTUBE
Czasem pojawia się pytanie jak prawidłowo zamieścić film z YT:
chwilowo jedynym działającym sposobem żeby znacznik YOUTUBE zadziałał poprawnie jest umieszczenie w nim linku w formacie https://www.youtube.com/watch?v=Vrbtn9XeSTI, tj:

• domena youtube.com,
• zawierającym TYLKO identyfikator filmu; żadnych dodatkowych znaczników,
• i to tyle

Nie zadziała:

• https://youtu.be/Vrbtn9XeSTI
  ani
• https://www.youtube.com/watch?v=Vrbtn9X ... e=youtu.be

Zamieszczenie samego filmu jest już proste:

Kod: Zaznacz cały

[youtube]https://www.youtube.com/watch?v=Vrbtn9XeSTI[/youtube]

czyli:


źródło: https://www.youtube.com/watch?v=Vrbtn9XeSTI

[dziobu]

Po krótkiej namowie @FlameRunner dorzucił pewne modyfikacje tabelek. Kolorowego ryjbuka tu nie będzie, ale i tak skok funkcjonalny jest imho wystarczający na potrzeby forum.

Pomysł na modyfikacje jest mój, a jako że nie znam HTMLa na tyle na ile powinienem to ewentualne uwagi nt samego rozwiązania jak i wybranych parametrów należy kierować do mnie. (ja te uwagi od razu wyciepię na hasiok, ale to inna kwestia )

6. TABLE2
Całość działa i zachowuje się jak zwykła tabela (Table z poprzedniego posta). Inna jest nazwa tagów (doszła cyfra "2") i parametry. Jest możliwość zadania grubości obwiedni, wymuszenia szerokości kolumn oraz łączenia komórek w pionie i w poziomie.

Dostępne tagi:

• table2 b=... (definicja tabeli)
  • b - grubość obwódki [px]
• th2 w=... b=... cs=... (definicja nagłówka kolumny)[/color]
  • w - szerokość kolumny [%]
  • b - grubość obwódki [px]
  • cs - wartość dla colspan [ilość kolumn]
• td2 w=... b=... cs=... rs=... (definicja komórki)
  • w - szerokość kolumny [%]
  • b - grubość obwódki [px]
  • cs - wartość dla colspan [ilość kolumn]
  • rs - wartość dla rowspan [ilość wierszy]

A po co to wszystko?
A no po to:

Kod źródłowy

Kod: Zaznacz cały

[table2 b=1]
[tr]
  [th2 w=20 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=60 b=1 cs=2]Nagłówek 2[/th2]
  [th2 w=20 b=0 cs=1]Nagłówek 3[/th2]
[/tr]
[tr]
[td2 w=20 b=1 cs=1 rs=2]Dane 1[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 2[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 3[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 4[/td2]
[/tr]
[tr]
[td2 w=25 b=1 cs=1 rs=1]Dane 5[/td2]
  [td2 w=25 b=1 cs=2 rs=2]Dane 6[/td2]
[/tr]
[tr]
[td2 w=25 b=1 cs=1 rs=1]Dane 8[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 9[/td2]
[/tr]
[/table2]

I część wizualna:

Nagłówek 1	Nagłówek 2		Nagłówek 3
Dane 1	Dane 2	Dane 3	Dane 4
	Dane 5	Dane 6
Dane 8	Dane 9

Można też ukryć wybrane linie:

Kod: Zaznacz cały

[table2 b=0]
[tr]
  [th2 w=33 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=33 b=1 cs=1]Nagłówek 2[/th2]
  [th2 w=33 b=1 cs=1]Nagłówek 3[/th2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 1[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 2[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 3[/td2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 4[/td2]
  [td2 w=33 b=3 cs=1 rs=1]Dane 5[/td2]
  [td2 w=33 b=3 cs=1 rs=1]Dane 6[/td2]
[/tr]
[/table2]

Nagłówek 1	Nagłówek 2	Nagłówek 3
Dane 1	Dane 2	Dane 3
Dane 4	Dane 5	Dane 6

Inne mniej lub bardziej praktyczne zastosowania:

Kod: Zaznacz cały

[table2 b=3]
[tr]
  [th2 w=50 b=0 cs=1]Nagłówek 1[/th2]
  [th2 w=50 b=0 cs=1]Nagłówek 2[/th2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 1[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 2[/td2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 3[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 4[/td2]
[/tr]
[/table2]

Nagłówek 1	Nagłówek 2
Dane 1	Dane 2
Dane 3	Dane 4

Kod: Zaznacz cały

[table2 b=0]
[tr]
  [th2 w=20 b=0 cs=1][/th2]
  [th2 w=30 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=30 b=1 cs=1]Nagłówek 2[/th2]
  [th2 w=20 b=0 cs=1][/th2]
[/tr]
[tr]
  [td2 w=1 b=0 cs=1 rs=1][/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 1[/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 2[/td2]
[/tr]
[tr]
  [td2 w=1 b=0 cs=1 rs=1][/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 3[/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 4[/td2]
[/tr]
[/table2]

	Nagłówek 1	Nagłówek 2
	Dane 1	Dane 2
	Dane 3	Dane 4

[dziobu]

7. Box, BoxC
Wyświetla okienko na całą szerokość posta z zadeklarowanym kolorem tła i czcionki.

Kod: Zaznacz cały

[box=red]test[/box]

test

BoxC robi to samo, ale wyrównuje tekst do środka okna.

Kod: Zaznacz cały

[boxc=red]test[/boxc]

test

8. Frac, Sup, Sub
Ułamek zwykł, indeks górny i indeks dolny.
Wartościami mogą być także teksty, nie tylko liczby.

Kod: Zaznacz cały

[frac]2/3[/frac]

²⁄₃

Kod: Zaznacz cały

[frac]ale/fajne[/frac]

^ale⁄_fajne


Podobnie jest z indeksem górnym i dolnym:

Kod: Zaznacz cały cośtam[sup]2[/sup] cośtam2 Kod: Zaznacz cały cośtam[sup]też tekst[/sup] cośtamteż tekst

Kod: Zaznacz cały cośtam[sub]2[/sub] cośtam2 Kod: Zaznacz cały cośtam[sub]też tekst[/sub] cośtamteż tekst

[dziobu]

9. Anchor
Dodaje kotwicę (znacznik taki) pozwalający zrobić odnośnik do konkretnego miejsca w poście. Każdy kto na HTMLa wie o co chodzi, zaś normalniejszą część populacji zapraszam do przykładu poniżej:

Gdzieś w poście dodajemy taki znacznik:

Kod: Zaznacz cały

[anchor]TutajPatrz[/anchor]

Treść wewnątrz jest dowolna; to musi to być tekst składający się z samych liter.

Następnie bierzemy adres strony gdzie jest nasz post - w tym przypadku jest to

Kod: Zaznacz cały

https://reprapy.pl/viewtopic.php?t=3794

i dodajemy odnośnik do kotwicy "#TutajPatrz". Wychodzi taki link:

Kod: Zaznacz cały

https://reprapy.pl/viewtopic.php?t=3794#TutajPatrz

Jak to działa? Skopiuj link do schowka i wklej w nowym oknie przeglądarki. Otworzy się ta strona ale już przewinięta do punktu "9. Anchor" ponieważ nad nim dodałem wspomniany kod z tagiem "Anchor".