Internet Technologies & News

Markdown opis i sposób używania

Przy okazji pisania skryptu wiki (być może niektórzy z was już wiedzieli), wybrać musiałem jakiś język text to html. Wybór padł na Markdown. Dlaczego?

Po pierwsze niesamowita wprost przejrzystość kodu, łatwość edytowania i łatwość przyswajania składni
Po drugie edytory WYSWIG czasami nie spełniają swojego zadania ( szczególnie jak się pogubią )
Po trzecie po chwili pracy z Markdown jestem w stanie osiągnąć zamierzony cel szybciej.

Przejście do nowej linii

Aby przejść do nowej lini należy zrobić dwie spacje i następnie enter. Jest to tak zwane twarde formatowanie.

Nagłówki

Markdown wspiera 6 poziomów nagłówków. Składnia jest bardzo prosta:

#to jest nagłówek H1  
##to jest nagłówek H2##  
###to jest nagłówek H3  
i tak dalej

Kończenie nagłówków ( jak w przykładzie H2 ) jest opcjonalne.

Cytowanie

Cytowanie w Markdown jest identyczne z tym stosowanym w emailach. Wystarczy przed każdą linią do zacytowania umieścić znak >:

>Umieszczenie takiego tekstu  
>spowoduje automatyczne zamienienie go na cytat
>z użyciem znacznika <blockquote>

W cytatach mogą znajdować się również znaczniki normalnie zamieniane na nagłówki, listy itd. Można też zagnieżdżać.

Code

Aby utworzyć blok należy zostawić jedną pustą linię a następną zacząć od minimum 4 spacji.

To jest linia pierwsza
    To zostanie zamienione na <code>
    I tu następna linia <code>
A tu już bez <code>

Można też używać symbolu ` bezpośrednio przed i za frazą:

`przyklad`  

Ten sposób jednak nie umożliwia dodania kilku linii code na raz.

Linie poziome

Jest kilka sposobów na ich generowanie:

* * *
***
- - -
---

Znaków może być 3 i więcej.

Linki

Dodawanie linków w Markdown jest bardzo proste:

[Nazwa Linku](http://adres.docelowy "Tytuł linku")

Tytuł jest opcjonalny.

Można też zdefiniować globalne linki:

[Nazwa Linku][id]

Następnie najlepiej na końcu dokumentu umieścić:

[id]: http://adres.docelowy 'Tytuł linku'

Dzięki temu jeśli w dowolnym miejscu strony umieścimy [Inna Nazwa Linku][id] zostanie on zamieniony zgodnie z definicją id. Nazwa tworzonego linku może być dowolna, jeśli id zostanie zdefiniowane. Globalne linki powodują, że tekst staje się bardziej czytelny dla tworzącego.

Inny sposób:

[Nazwa Linku][]

A w na dole tekstu:

[Nazwa Linku]:http://adres.docelowy 'Tytuł linku'  

Automatyczne linki

Wstawienie w tekst:

<http://adres.codelowy>  

Spowoduje utworzenie linku:

<a href="http://adres.codelowy">http://adres.codelowy</a>

Dodawanie adresów mail wygląda dokładnie tak samo:

<me@pigmej.eu>  

Spowoduje wygenerowanie:

<a href="&#109;&#x61;&#x69;&#108;&#x74;  
&#x6f;&#58;&#x6d;&#x65;&#64;&#x70;&#x69;  
&#103;&#x6d;&#x65;&#106;&#x2e;&#x65;&#117;">  
&#x6d;&#x65;&#64;&#x70;&#x69;&#103;&#x6d;  
&#x65;&#106;&#x2e;&#x65;&#117;</a>  

Jest to mechanizm obronny przed botami skanującymi strony www w poszukiwaniu adresów email. Przeglądarka zamienia powyższy link na:

<a href="mailto:me@pigmej.eu">me@pigmej.eu</a>  

W kodzie strony widać zakodowaną postać tego maila (sprawdź źródło jeśli nie wierzysz). Skutecznie eliminuje to większość botów spamerskich.

Dodatkowo w skrypcie Pigmej-Wiki wszystkie frazy które wyglądają:

JakiśTekst
Jakiś-Tekst

Zostaną zamienione automatycznie na linki wewnętrzne prowadzące do artykułów. W przypadku używania skryptu Pigmej-Wiki odpowiednio:

<a href="/JakiśTekst" title="Jakiś Tekst">JakiśTekst</a>  
<a href="/Jakiś-Tekst" title="Jakiś Tekst">Jakiś Tekst</a>  

Formatowanie tekstu

Kursywa:

_tekst pisany kursywą_
*ten też*

Pogrubienie:

__tekst pogrubiony__
**ten też**  

Pogrubienie i kursywa:

___tekst z kursywą i pogrubieniem___
***ten też***  

Listy

Lista numerowana:

1. Pierwszy element  
8. Drugi element
5. Trzeci element  

Kolejność numerów nie ma znaczenia.

Lista nie numerowana:

* pierwszy element
* drugi element  

lub

- pierwszy element
- drugi element  

lub

+ pierwszy element
+ drugi element

Ponieważ Markdown tworzy listy numerowane według definicji:

Na początku linii cyfry zakończone kropką.

Dodanie:

20. wiek za nami  

Spowoduje automatyczne wygenerowanie listy numerowanej. Dlatego jeśli dodasz:

20\. wiek za nami  

Wszystko będzie poprawnie wyświetlone [^poprawnie].

Obrazki

Aby wstawić obrazek należy wstawić:

![Tekst Alt](ścieżka/do/obrazka.jpg 'Tutuł obrazka')  

Tak jak w przypadku Linków można również definiować globalne obrazki:

![Tekst Alt][id]  

I na dole w tekście:

[id]: ścieżka/do/obrazka.jpg 'Tytuł obrazka'  

Można podawać też adresy url obrazków.

Znaki specjalne

Ponieważ Markdown używa znaków

\, `, *, _, {}, [], (), #, +, - (minus), . (kropka), !  

Więc jeśli chcesz dodać na stronie jeden z ww znaków musisz sam poprzedzić go backslashem:

\`to NIE będzie code\`  

Instrukcja ta pochodzi z powstającego skryptu wiki mojego autorstwa. Bazuje ona na Markdown Syntax

W wersji na wordpress nie mam zainstalowanej wtyczki Footnotes.

1 Komentarz dla “Markdown opis i sposób używania”

  1.   Pigmej Wiki - darmowy silnik Wiki Pigmej Blog:

    […] linków ( nawet w panelu administracyjnym ), składnia “obsługiwana” przez Markdown ( tutaj ) i inne […]

Napisz komentarz

Musisz być zalogowany aby napisać komentarz.