Języki znaczników - jak szybko sformatować tekst na naszej stronie

Człowiek z natury jest leniwy i woli, gdy część pracy jest wykonywana za niego. Pisząc w Wordzie tekst, do formatowania używamy przycisków znajdujących się na pasku narzędziowym. Jednak w rzeczywistości program zapisuje informacje o formatowaniu za pomocą swojego własnego języka znaczników, aby przy kolejnym otwarciu dokument wyglądał tak, jak sobie tego zażyczyliśmy.

Pisząc stronę internetową, czasami sobie nie zdając sprawy, także używamy języka znaczników – najczęściej jest to HTML. <h1> oznacza nagłówek, natomiast <p> nowy paragraf. Użytkownik przeglądający witrynę nie widzi źródła strony, tylko gotowy, sformatowany kod.

Jednak HTML nie jest jedynym językiem znaczników. Formatowanie w nim kodu jest czasami uciążliwe – szczególnie, gdy w grę wchodzą tabele, list czy hiperłącza. Składnia potrafi czasami zaburzyć czytelność tekstu, który chcemy sformatować.

Najlepszym argumentem za tworzeniem nowych języków jest ograniczenie użytkownika. Oczywiście w pozytywnym tego słowa znaczeniu. Jeśli udostępnilibyśmy użytkownikowi komentującemu nasz wpis na blogu całą gamę znaczników HTML, możemy się spodziewać, że po chwili nasza strona nie będzie funkcjonować. Dlatego też stosuje się składnię alternatywną, np. BBCode, Textile, Markdown, itp.

W dzisiejszym poradniku chciałbym przedstawić kilka alternatywnych języków formatowania tekstu. Zadaniem będzie sformatować tekst za pomocą różnych języków, aby jego docelowy wygląd był następujący:

Zobaczmy jak radzą sobie z tym zadaniem najpopularniejsze języki.

HTML

HTML jest jednym z najbardziej znanych języków formatowania. Powstał on w latach 90’tych ubiegłego wieku. Od początku służył do formatowania stron internetowych. Z czasem jego składnia została ujednolicona i poprawiona, tworząc po części nowy język – xHTML.

Tekst formatowany jest za pomocą tzw. tagów. Zaczynają się one od <, a kończą >. Interpreter, czyli w tym przypadku przeglądarka, wie gdzie ma zastosować konkretne formatowanie.

I tak w HTMLu efekt z powyższego obrazka osiągniemy za pomocą kodu:

<h1>Języki znaczników</h1>
<p>Tworząc tekst na stronę w języku formatowania musimy zwrócić uwagę, 
aby tekst mógł być <b>pogrubiony</b>, <i>pochylony</i>, 
<strike>przekreślony</strike>, czy <u>podkreślony</u>. Musi mieć 
możliwość wstawiania <a href="http://google.pl">hiperłącza</a> do tekstu. 
Musi być możliwość wstawienia <code>fragmentów kodu</code>, 
lub <sup>indeksów górnych</sup> i <sub>indeksów dolnych</sub></p>

<h2>Informacje dodatkowe</h2>
<p>Musimy zwrócić też uwagę na</p>
<ul>
  <li>listy</li>
  <li>nieuporządkowane</li>
</ul>
<p>czy też</p>
<ol>
  <li>listy</li>
  <li>uporządkowane</li>
</ol>
<p>Dobrze by było, aby można było wstawić <q>krótki cytat</q>, 
czy też</p>
<blockquote>
  <p>
    dłuższy fragment cytowanego tekstu
  </p>
</blockquote>
<p>Nic nie stoi na przeszkodzie, aby móc wstawiać np. znaczki
 &lt;, &quot;, lub &gt;</p>
<p>Fajnie było, aby obsługiwał też obrazki 
<img src="smile.jpg" /></p>

HTML daje nam możliwość zagnieżdżania elementów, dodawania atrybutów, itp. Jednak jego składnia jest trochę przestarzała i ma kilka wad. Przykładowo, aby na ekranie mógł znaleźć się znaczek <, musimy użyć encji <. W ten sposób kod wydaje się być bardziej niezrozumiały i trudniejszy w interpretacji.

Należy też zwrócić uwagę, że przejście do nowej linii również wymaga podania przez nas odpowiedniego znacznika.

BBCode

BBCode powstał głównie na potrzeby for internetowych. Użytkownicy dostali konkretne znaczniki i tylko za ich pomocą mogli formatować wiadomości. Dzięki takiemu postępowaniu administrator serwisu ma wpływ na format wiadomości, bez obawy o to, że goście użyją tagów w nieoczekiwanym celu.

Składnia wygląda podobnie do HTMLa, jednak zamiast nawiasów kwadratowych, używa się [ i ].

BBCode standardowo nie daje nam możliwości tworzenia nagłówków, jednak możemy to obejść np. za pomocą tagu [size]. Spójrzmy na kod:

[size=6]Języki znaczników[/size]

Tworząc tekst na stronę w języku formatowania musimy zwrócić uwagę, 
aby tekst mógł być [b]pogrubiony[/b], [i]pochylony[/i], 
[s]przekreślony[/s], czy [u]podkreślony[/u]. Musi mieć możliwość 
wstawiania [url=http://google.pl]hiperłącza[/url] do tekstu. Musi być 
możliwość wstawienia [code]fragmentów kodu[/code], lub 
[sup]indeksów górnych[/sup] i [sub]indeksów dolnych[/sub]

[size=5]Informacje dodatkowe[/size]

Musimy zwrócić też uwagę na

[list]
  [*]listy
  [*]nieuporządkowane
[/list]

czy też

[list=1]
  [*]listy
  [*]uporządkowane
[/list]

Dobrze by było, aby można było wstawić [q]krótki cytat[/q], czy też

[quote]dłuższy fragment cytowanego tekstu[/quote]

Nic nie stoi na przeszkodzie, aby móc wstawiać np. znaczki <, ", lub >

Fajnie było, aby obsługiwał też obrazki [img]smile.jpg[/img]

Tekst pisany w BBCode jest bardziej przejrzysty, szczególnie jeśli chodzi o listy. BBcode nie ma problemu ze znakami <, czy >, gdyż jego interpretery zazwyczaj automatycznie przekształcają powyższe znaki na encje. Znaki nowej linii również zostają uwzględnione.

BBcode jest bardzo łatwo zaimplementować w PHP. Wystarczy znajomość wyrażeń regularnych.

Markdown

Markdown powstał w jednym celu: aby jak najbardziej uprościć pisanie i formatowanie tekstu. Zdania w nim pisane są zrozumiałe nawet bez konwertowania na format HTML. Jeśli zawiedzie interpreter, nie ma się co martwić – teks i tak będzie czytelny.

Kod, jaki musimy użyć, aby otrzymać efekt na powyższym obrazku:

Języki znaczników
=================

Tworząc tekst na stronę w języku formatowania musimy zwrócić uwagę, 
aby tekst mógł być **pogrubiony**, _pochylony_, 
<strike>przekreślony</strike>, czy <u>podkreślony</u>. Musi mieć 
możliwość wstawiania [hiperłącza](http://google.pl) do tekstu. 
Musi być możliwość wstawienia `fragmentów kodu`, 
lub <sup>indeksów górnych</sup> i <sub>indeksów dolnych</sub>

Informacje dodatkowe
--------------------

Musimy zwrócić też uwagę na

* listy
* nieuporządkowane

czy też

1. listy
2. uporządkowane

Dobrze by było, aby można było wstawić <q>krótki cytat</q>, 
czy też

> dłuższy fragment cytowanego tekstu

Nic nie stoi na przeszkodzie, aby móc wstawiać np. znaczki
 <, &, lub >;

Fajnie było, aby obsługiwał też obrazki !(smile.jpg)

W oryginale Markdown jest dosyć ubogi, jednak dzięki rozszerzeniom takim jak Markdown Extra możemy śmiało korzystać z jego dobrodziejstw.

Co ważne, Markdown pozwala nam korzystać ze standardowych tagów HTML, a jeśli się pomylimy, to sam skoryguje błędy.

Warto zajrzeć na oficjalną stronę projektu, a także na projekt PHP Markdown.

Textile

Textile chyba najbardziej przypadł mi do gustu. Przyznam, że dosyć późno się dowiedziałem o tym projekcie i aż sam się dziwię, że wcześniej z niego nie korzystałem. Pisanie tekstu w tym języku jest wprost bajeczne. W odróżnieniu od Markdown, możemy za jego pomocą uzyskać prawie dowolny tag HTML.

Gotowy kod, prezentujący obrazek testowy wygląda następująco:

h1. Języki znaczników

Tworząc tekst na stronę w języku formatowania musimy zwrócić uwagę, 
aby tekst mógł być *pogrubiony*, _pochylony_, -przekreślony-, czy 
<u>podkreślony</u>. Musi mieć możliwość wstawiania 
"hiperłącza":http://google.pl do tekstu. Musi być możliwość wstawienia
@fragmentów kodu@, lub ^indeksów górnych^ i ~indeksów dolnych~

h2. Informacje dodatkowe

Musimy zwrócić też uwagę na

* listy
* nieuporządkowane

czy też

# listy
# uporządkowane

Dobrze by było, aby można było wstawić ??krótki cytat??, czy też

bc. dłuższy fragment cytowanego tekstu

Nic nie stoi na przeszkodzie, aby móc wstawiać np. znaczki  <, &, lub >;

Fajnie było, aby obsługiwał też obrazki !smile.jpg!

Textile jest bardzo prosty w implementacji, a pisanie w nim kodu jest bardzo intuicyjne. Textile, w odróżnieniu od Markdown, czy BBcode, umożliwia nam formatowanie tekstu, poprzez dodawanie stylów, klas, itp.

Należy zwrócić uwagę, iż Markdown i Textile nie mają wbudowanej domyślnie opcji podkreślenia. Wynika to z faktu, iż znacznik <u> został wycofany ze specyfikacji i efekt podkreślenia możemy uzyskać za pomocą stylów.

Podsumowanie

Pisząc ten tutorial nie wymieniłem takich języków jak Wikitekst, czy LaTeX z jednego powodu: ich implementacja na serwerze jest bardzo trudna, lub wymaga doinstalowywania specjalnych rozszerzeń. BBcode, Markdown, czy Textile można zasmakować za pomocą kilku linijek kodu i pliku z klasą.

Jeśli znajdę więcej czasu przedstawię tutorial na temat Textile, gdyż moim zdaniem ma bardzo bogate możliwości. Sam stosuję go do pisania postów na blogu :)