Logo Taat

Pełna wersja instrukcji Markdown

Język znaczników Markdown

Markdown jest łatwym językiem znaczników. Dzięki prostym symbolom można w szybki sposób sformatować tekst, uwzględniający w treści nagłówki, listy, wypunktowania, cytaty, linki itd. Język Markdown w całości składa się ze znaków interpunkcyjnych i stworzony został jako format zapisu treści do Internetu. Ideą Markdown jest ułatwienie czytania, pisania i edytowania treści. W przypadku, gdy nie można zastosować języka Markdown, stosuje się język HTML. Należy jednak język Markdown nie może być stosowany wewnątrz tagów języka HTML.

Elementy blokowe

Paragrafy i znaki końca wiersza

W języku Markdown, aby przejść do następnego wiersza, tzn. aby uzyskać podobny efekt jak w edytorze tekstowym po zastosowaniu Shift+Enter, należy na końcu wiersza zastosować podwójną spację. Podwójne zastosowanie spacji działa jak tag <br /> (tag łamania wiersza) w HTML-u. Zobacz poniższy przykład.

Łamanie wiersza w Markdown
Markdown HTML Przeglądarka

Na końcu tego wiersza zastosowano podwójną spację,
dlatego tekst został przeniesiony do następnej linii.

<p />Na końcu tego wiersza zastosowano podwójną spację,<br/>
dlatego tekst został przeniesiony do następnej linii. </p>

Na końcu tego wiersza zastosowano podwójną spację,
dlatego tekst został przeniesiony do następnej linii.

Przejście do następnej linii możemy również uzyskać poprzez zastosowanie blockquote lub lists.

Nagłówki

Markdown obsługuje dwa style nagłówków: Setex i ATX. Pierwszy z nich pozwala na zastosowanie dwóch poziomów nagłówków za pomocą „=” i „-”.
Nagłówki Setex.
Markdown HTML Przeglądarka

Header 1
=======

Header 2
-----------

<h1>Nagłówek H1</h1>
<h2>Nagłówek H2</h2>

Nagłówek H1

Nagłówek H2

Drugi styl nagłówków pozwala na format nagłówków w skali od 1 do 6, gdzie nagłówek h1 jest największy, a h6 najmniejszy. Aby zastosować ten styl nagłówków należy otoczyć „Header” znakiem „#”. Jeśli nagłówek ma być np. stopnia drugiego, należy postawić dwa „#”, tak jak w poniższej tabeli:

Nagłówki ATX.
Markdown HTML Przeglądarka

# Header 1 #

## Header 2 ##

### Header 3 ###

<h1>Nagłówek H1</h1>
<h2>Nagłówek H2</h2>
<h3>Nagłówek H3</h3>

Nagłówek H1

Nagłówek H2

Nagłówek H3

Cytaty

Jeśli chcesz zacytować jakiś fragment tekstu przy użyciu Markdown, możesz uczynić to dzięki symbolowi „>”. Usytuowanie go na początku wiersza sprawi, że tekst zostanie przeniesiony do nowej linii i zostanie stworzony cytat. Jeśli w tekście chcemy mieć kilka cytatów, wówczas należy znak „>” postawić kilkakrotnie. Blockquotes może być stosowane również z innymi elementami języka Markdown, na przykład z: nagłówkami, blokami tekstu oraz listami.

Cytaty w Markdown.
Markdown HTML Przeglądarka

> To jest cytat.
>> To jest cytat.
>>> To jest cytat.

<blockquote> <p> To jest cytat.</p> </blockquote>
<blockquote> <p> To jest cytat.</p> </blockquote>
<blockquote> <p> To jest cytat.</p> </blockquote>

To jest cytat.

To jest cytat.

To jest cytat.

Listy

W Markdown można tworzyć uporządkowane, a także nieuporządkowane listy. Chcąc stworzyć nieuporządkowaną listę zastosujemy symbol gwiazdki „*”, plusa „+” lub minusa „-”.

Lista nieuporządkowana.
Markdown HTML Przeglądarka

* Pierwszy element listy
* Drugi element listy
* Trzeci element listy

+ Pierwszy element listy
+ Drugi element listy
+ Trzeci element listy

- Pierwszy element listy
- Drugi element listy
- Trzeci element listy

<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
  • Pierwszy element listy
  • Drugi element listy
  • Trzeci element listy

W języku HTML, aby zmienić styl wypunktowania listy na przykład z punktowego na kwadratowe, należy w arkuszu stylów CSS zmienić ustawienia stylu listy.

Lista uporządkowana.
Markdown HTML Przeglądarka

1. Pierwszy element listy
2. Drugi element listy
3. Trzeci element listy

2. Pierwszy element listy
2. Drugi element listy
2. Trzeci element listy

3. Pierwszy element listy
6. Drugi element listy
7. Trzeci element listy

<ol>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ol>
  1. Pierwszy element listy
  2. Drugi element listy
  3. Trzeci element listy

Aby otrzymać listę uporządkowaną, w Markdown można stosować kolejne cyfry: 1, 2, 3… a także wpisać obojętnie jaką cyfrę, powielając ją na początku każdego nowego punktu np.: 2, 2, 2… Ostatnim sposobem na otrzymanie listy uporządkowanej jest rozpoczęcie wiersza od losowo wybranej cyfry, przykładowo: 3, 6, 7… Wówczas Markdown również zamieni cyfry w uporządkowaną listę. Nigdy nie wolno zapomnieć o znaku interpunkcyjnym kropki „.” umieszczonej tuż za każdą z cyfr…

Aby wypunktowanie było równe, w przypadku listy uporzadkowanej (w przeciwieństwie do nieuporządkowanej) trzeba przed tekstem zastosować czterokrotnie spację albo jeden Tab. W przypadku listy nieuporządkowanej nie musimy się martwić o to, by wyrównywać listę, gdyż Markdown zrobi to za nas automatycznie.

Zobacz różnicę w poniższych przykładach:

Lista uporządkowana, a wcięcie przed wypunktowaniem.
Markdown HTML Przeglądarka
* Ten element listy składa się z dwóch paragrafów. To jest pierwszy paragraf…
<Tab>A to jest drugi paragraf.
* Drugi element listy
<ul>
<li><p>Ten element listy składa się z dwóch paragrafów. To jest pierwszy paragraf…</p>
<p>A to jest drugi paragraf.</p></li>
<li>Drugi element listy</li>
</ul>
  • Ten element listy składa się z dwóch paragrafów.To jest pierwszy paragraf…

    A to jest drugi paragraf.

  • Drugi element listy
Lista nieuporządkowana, a wcięcie przed wypunktowaniem.
Markdown HTML Przeglądarka
1. Ten element listy składa się z dwóch paragrafów. To jest pierwszy paragraf…
A to jest drugi paragraf.
2. Drugi element listy
<ol>
<li><p>Ten element listy składa się z dwóch paragrafów. To jest pierwszy paragraf…</p> <p>A to jest drugi paragraf.</p></li>
<li>Drugi element listy</li>
</ol>
  1. Ten element listy składa się z dwóch paragrafów. To jest pierwszy paragraf…

    A to jest drugi paragraf

  2. Drugi element listy

Aby tworzyć zagnieżdżoną listę, wystarczy przed znakiem wypunktowania (tj. gwiazdki, plusa czy minusa) postawić odpowiednią ilość znaków spacji. Jeśli przykładowo postawimy jedną spację przed elementem listy, wówczas pojawi się drugi poziom wypunktowania.

Bloki kodu

Wstępnie sformatowane bloki kodu są wykorzystywane najczęściej do pisania na temat programowania. To, co zostało zapisane jako blok kodu traktuje się dosłownie. Aby w języku Markdown stworzyć taki blok kodu, wystarczy przed tekstem zastosować 4 spacje albo użyć Tab. Markdown przeformatuje tekst i umieści go w tagach pre i code.

Bloki kodu w Markdown
Markdown HTML Przeglądarka
<div class="footer">
    © 2010 Taat Corporation
</div>
<div> class="footer"> <br />
<pre><code> 2010 Taat Corporation </code></pre><br />
</div>
<div class="footer">
© 2010 Taat Corporation
</div>

Style linii

Poziomą linię <hr> w Markdown uzyskujemy poprzez zapis minimum trzema znakami: „*” lub „-”. Linię wykropkowaną można stworzyć poprzez zastosowanie pomiędzy znakami „gwiazdek” trzech spacji…

W języku HTML linię hr można ostylować na kropkowaną dzięki - dołączonym do pliku - stylom CSS.

Pozioma linia w Markdown
Markdown HTML Przeglądarka
* * * *
******
- - - - -
--------
*   *   *   
-   -   -   
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>






Pozostałe elementy

Aby utworzyć link należy użyć dwóch nawiasów: pierwszy - kwadratowy, w którym wpisuje się treść linku oraz tuż za nim otwiera się nawias okrągły, w którym wpisuje się adres URL, a za nim w cudzysłowie tytuł linku. Spójrz na poniższy przykład:

Tworzenie odnośnika (linku) w Markdown
Markdown HTML Przeglądarka
[taat.pl](http://taat.pl/ "Taat Technologie Cyfrowe") <a href="http://taat.pl/" title="Taat Technologie Cyfrowe">taat.pl</a> taat.pl

Jeśli chcemy podać ścieżkę do konkretnej podstrony lub do konkretnej cześci strony, wystarczy zapisać ją w postaci szybkiego odnośnika:

Tworzenie szybkiego odnośnika (linku) w Markdown
Markdown HTML Przeglądarka
[Markdown](#markdown) <a href="#markdown">Markdown</a> Markdown

Kolejny sposób (bardziej czytelny) zapisu linku polega na zapisie w dwóch nawiasach kwadratowych danych o linku, tzn. w pierwszym nawiasie kwadratowym zapisuje się opis linku, a w drugim nawiasie wpisujemy krótką nazwę, która jest tylko punktem odniesienia do legendy. Legenda skonstruowana jest z nawiasu kwadratowego, w nim powtarza się krótka nazwa (taka sama jak w drugim nawiasie kwadratowym), za nim znak dwukropka, a za nim adres strony. W ten sposób gdziekolwiek na stronie użyjemy zapisu [Taat Technologie Cyfrowe][taat], wówczas zawsze pojawi się link do strony taat.pl.

Tworzenie szybkiego odnośnika (linku) w Markdown
Markdown HTML Przeglądarka
[Taat Technologie Cyfrowe][taat]
[taat]: http://www.taat.pl/
<a href="http://taat.pl/" title="Taat Technologie Cyfrowe">taat.pl</a> taat.pl

Markdown pozwala na dodawanie automatycznych linków z adresami URL oraz linki do adresów e-mail za pomocą nawiasów ostrych. W przypadku maila jest to o tyle dobre, że Markdown po wpisaniu adresu mailowego zamienia go na encje. Dzięki temu nasz adres mailowy jest znacznie trudniej dostępny dla robotów spamujących. Zobacz przykład:

Przed kodowaniem w Markdown:
<address@example.com>

Po kodowaniu w Markdown:
<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65; &#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111; &#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61; &#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

Automatyczne dodawanie linku lub adresu mailowego
Markdown HTML Przeglądarka
<info@taat.pl> <a href="info@taat.pl">info@taat.pl</a> info@taat.pl

Wyróżnienie

Aby wyróżnić element tekstu: pogrubić bądź zapisać go kursywą, w Markdown można to zrobić za pomocą znaku „*” lub podkreślnika „_”. Liczba zastosowanych gwiazdek czy podkreślników odpowiednio stylizuje tekst:

Wyróżnienie tekstu w Markdown
Markdown HTML Przeglądarka
*pochylony tekst*
**pogrubiony tekst**
***pogrubiony i pochylony tekst***
_pochylony tekst_
__pogrubiony tekst__
___pogrubiony i pochylony test___
<i>pochylony tekst</i>
<strong>pogrubiony tekst</strong>
<strong><i>pogrubiony i pochylony tekst </i></strong>
<i>pochylony tekst</i>
<strong>pogrubiony tekst</strong>
<strong><i>pogrubiony i pochylony tekst </i></strong>
pochylony tekst
pogrubiony tekst
pogrubiony i pochylony tekst
pochylony tekst
pogrubiony tekst
pogrubiony i pochylony tekst

Kod

Jeśli chcemy zapisać fragment kodu w oryginalnej formie kodu, należy umieścić go miedzy znakami lewych apostrofów (`). Na przykład:
Kod w Markdown
Markdown HTML Przeglądarka
Użyj funkcji `printf()` Użyj funkcji <code>printf()</code> Użyj funkcji printf()

Obrazki

Jeśli chcemy za pomocą języka Markdown wstawić plik graficzny do dokumentu, trzeba stworzyć odpowiedni zapis (ścieżkę do pliku). Taki zapis składa się z wykrzyknika (usytuowanego na samym początku zapisu), nawiasów: kwadratowego oraz okrągłego, alternatywnego tekstu (wyświetlanego w przypadku, gdy nie można otworzyć obrazu), ścieżki do pliku oraz krótkiego opisu obrazu.

Zamieszczanie obrazu za pomoca Markdown
Markdown HTML Przeglądarka
![Logo Taat Technologie Cyfrowe](http://taat.pl/gfx/logo_taat.png "logo Taat") <img src="http://taat.pl/gfx/logo_taat.png" alt="Logo Taat" title="Logo Taat Technologie Cyfrowe" /> Logo Taat

Backslash Escapes

Jeśli tekst umieszczony jest np. między gwiazdkami, czyli ma zostać pogrubiony, to zastosowanie backslash'a spowoduje, że zostanie wyświetlony nie efekt końcowy, czyli pogrubiony tekst, ale tekst między gwiazdkami. Spójrz na poniższy przykład:

Backslash Escapes
Markdown HTML Przeglądarka
\**ten tekst bez backslash'a byłby pogrubiony,
ale dzięki zastosowaniu znaku „\” zostanie on tylko
umieszczony między gwiazdkami i nie będzie pogrubiony\**
**ten tekst bez backslash'a byłby pogrubiony,
ale dzięki zastosowaniu znaku „\” zostanie on tylko
umieszczony między gwiazdkami i nie będzie pogrubiony**
**ten tekst bez backslash'a byłby pogrubiony,
ale dzięki zastosowaniu znaku „\” zostanie on tylko
umieszczony między gwiazdkami i nie będzie pogrubiony**

Backslash Escapes działa również w przypadku takich znaków jak: