[Instrukcja] Znaczniki BBCode; formatowanie treści
: 01 lut 2019, 15:43
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":
czyli napisanie tego:
[/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:
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:
Oczywiście nic nie stoi na przeszkodzie żeby napisać to wszystko w jednej linii:
Każdy użytkownik Worda czy innego edytora może zatęsknić za listą numerowaną - niepotrzebnie:
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?
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:
Kod źródłowy:
A tak to się prezentuje:
Ta sama tabelka z ograniczoną szerokością do 200 pikseli:
Kod źródłowy:
I wynik:
5. YOUTUBE
UWAGA! Znacznik YOUTUBE jest przestarzały. Działa, ale lepiej użyć tego: viewtopic.php?p=161423#p161423
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 , tj:
czyli:
źródło: https://www.youtube.com/watch?v=Vrbtn9XeSTI
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.
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]
Kod: Zaznacz cały
[code][b]pogrubienie[/b]
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;
-------------------------------------------------------------------------------
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.
Kod źródłowy | Wynik wizualny |
---|---|
Kod: Zaznacz cały
|
|
Kod źródłowy | Wynik wizualny |
---|---|
Kod: Zaznacz cały
|
|
Kod źródłowy | Wynik wizualny |
---|---|
Kod: Zaznacz cały
|
|
Kod: Zaznacz cały
|
|
Kod źródłowy | Wynik wizualny |
---|---|
Kod: Zaznacz cały
|
|
Kod: Zaznacz cały
|
|
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
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
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]
Nagłówek 1 | Nagłówek 2 |
---|---|
dane 1 | dane 2 |
dane 3 | dane 4 |
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]
Nagłówek 1 | Nagłówek 2 |
---|---|
dane 1 | dane 2 |
dane 3 | dane 4 |
UWAGA! Znacznik YOUTUBE jest przestarzały. Działa, ale lepiej użyć tego: viewtopic.php?p=161423#p161423
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 , tj:
- domena youtube.com,
- zawierającym TYLKO identyfikator filmu; żadnych dodatkowych znaczników,
- i to tyle
ani
Kod: Zaznacz cały
[youtube]https://www.youtube.com/watch?v=Vrbtn9XeSTI[/youtube]
źródło: https://www.youtube.com/watch?v=Vrbtn9XeSTI