Markdown

Zawarto┼Ť─ç

Dzisiaj chciałbym napisać co nieco o Markdown. Nim jednak zacznę, trochę wprowadzenia.

Ot├│┼╝, gdy moja strona bazowa┼éa na WordPress, u┼╝ywa┼éem w nim wbudowanego klasycznego edytora, kt├│ry z czasem zosta┼é zast─ůpiony przez Gutenberg. Ca┼éo┼Ť─ç bazowa┼éo na ideologii z edytor├│w tekstu takich jak Word. Mieli┼Ťmy do dyspozycji przyciski do pogrubienia tekstu, wy┼Ťrodkowania, zmiany koloru itp.. Wszystko pi─Öknie.

O ile wizualnie wszystko wygl─ůda┼éo ok, opr├│cz programu docelowego, ka┼╝dy inny program wy┼Ťwietla┼é tekst nieco inaczej.

W momencie przej┼Ťcia na Hugo zmieni┼éem m├│j spos├│b pisania.

Ograniczy┼éem wszelkie elementy, kt├│re powodowa┼éyby rozproszenie podczas zbierania my┼Ťli. Dlatego te┼╝ wybra┼éem iA Writer do tworzenia moich tekst├│w (je┼╝eli szukasz alternatywy, spr├│buj Typora.

iA Writer (czy te┼╝ Typora) witaj─ů ci─Ö z czyst─ů “kartk─ů” papieru, na kt├│r─ů wylewasz sw├│j tekst.

Opr├│cz mrugaj─ůcego kursora nie ujrzysz tam przycisk├│w do formatowania tekstu. Ca┼ée pisanie odbywa si─Ö za pomoc─ů “Markdown”. W pewnym sensie mo┼╝esz powiedzie─ç, ┼╝e piszesz za pomoc─ů kodu. Na szcz─Ö┼Ťcie ten “kod” jest bardzo prosty w przyswojeniu i ogranicza si─Ö do kilkunastu element├│w, z kt├│rych tak naprawd─Ö b─Ödziesz u┼╝ywa┼é tylko kilku podstawowych.

Markdown jest pot─Ö┼╝nym narz─Ödziem, kt├│re r├│wnie┼╝ zostaje dostrze┼╝one przez tw├│rc├│w WordPress/Gutenberg, kt├│ry obs┼éuguje blok, gdzie mo┼╝emy pisa─ç lub te┼╝ wklei─ç tekst napisany w ten w┼éa┼Ťnie spos├│b.

W internecie znajdziesz sporo odmian Markdown, jednak┼╝e ka┼╝de z nich opiera si─Ö na tych samych zasada, w zwi─ůzku z tym, gdy znasz podstawy jego u┼╝ywania, jeste┼Ť gotowy wybra─ç program go u┼╝ywaj─ůcy, kt├│ry najbardziej ci odpowiada.

R├│┼╝nica pomi─Ödzy iA Writer a Typora jest w tym, ┼╝e w iA Writer domy┼Ťlnie piszesz w Markdown. Aby wy┼Ťwietli─ç tw├│j tekst, w taki spos├│b, jaki b─Ödzie wy┼Ťwietlany, chocia┼╝by na stronie internetowej, musisz klikn─ů─ç przycisk podgl─ůdu.

iA Writer - Przycisk podgl─ůdu

Typora u┼╝ywa Markdown i automatycznie przekszta┼éca go w aktywny podgl─ůd.

Zaczynaj─ůc pisa─ç tytu┼é wpisu od # po przej┼Ťciu do nast─Öpnej linijki, mamy aktywny podgl─ůd jak to wszystko mniej wi─Öcej b─Ödzie wygl─ůda─ç.

Niekt├│rzy wol─ů jedno, inni drugie.

Podczas pisania nie przeszkadza mi podej┼Ťcie ┼╝adnego z program├│w. W trakcie tworzenia Typora mo┼╝e by─ç bardziej u┼╝yteczna, jednak┼╝e ni┼╝ m├│j tekst sko┼äcz─Ö i wstawi─Ö na stron─Ö, wol─Ö przejrze─ç wszystko w iA Writer (lub te┼╝ w Typora nacisn─ů─ç Ctrl+/ aby prze┼é─ůczy─ç si─Ö w tryb kodu).

Przewag─ů iA Writer jest fakt dost─Öpno┼Ťci aplikacji na platformy mobilne, dzi─Öki czemu zaczynaj─ůc pisa─ç na komputerze, mo┼╝emy kontynuowa─ç na kom├│rce lub tablecie.

Dlaczego pisa─ç z wykorzystaniem Markdown? #

Ot├│┼╝, otw├│rz sobie tekst napisany w Wordzie sprzed kilku lat, oraz tekst, kt├│ry napiszesz teraz.

Oba te dokumenty ÔÇö ich zawarto┼Ť─ç wygl─ůda inaczej. Nag┼é├│wki s─ů innej czcionki, sama czcionka mo┼╝e by─ç inna, odst─Öpy nie takie. I tak dale, i tak dalej.

Ca┼éy sens pisania w jednym formacie jest to, ┼╝e tekst napisany kilka lat temu po wy┼Ťwietleniu b─Ödzie wygl─ůda┼é sp├│jnie do tekstu, kt├│ry napiszesz dzisiaj.

Od czego zacz─ů─ç? #

Aby zacz─ů─ç, nale┼╝y pozna─ç, jak Markdown jest skonstruowany.

W tym celu mo┼╝esz pos┼éu┼╝y─ç si─Ö ┼Ťci─ůgawk─ů, lub przeczytaj dalej.

A wi─Öc zacznijmy.

Nagłówki #

Tak jak Word posiada Nag┼é├│wki (Headings), kt├│re wy┼Ťwietlaj─ů tekst w r├│┼╝nych wyr├│┼╝niaj─ůcych czcionkach, tak samo jest w przypadku Markdown.

Zaczynamy od napisania tytu┼éu wpisu poprzedzonego symbolem hash # (Nag┼é├│wek pierwszego poziomu ÔÇö g┼é├│wny, H1)

# Tytuł naszego wpisy

Ka┼╝de kolejne nag┼é├│wki w naszym tek┼Ťcie wprowadzamy jako ##, nag┼é├│wek drugiego poziomu ÔÇö H2, ###, nag┼é├│wek trzeciego poziomu ÔÇö H3, i tak dalej.

## Pod tytu┼é ÔÇö drugi poziom
### Trzeci poziom

I tak a┼╝ do poziomu sz├│stego ÔÇö H6.

Pogrubienie tekstu #

Aby pogrubi─ç tekst, wystarczy poprzedzi─ç go, oraz zako┼äczy─ç podw├│jn─ů gwiazdk─ů **.

Tekst **pogrubiony**

aby uzyska─ç: Tekst pogrubiony

Pochylenie tekstu (kursywa) #

Aby pochyli─ç tekst, wystarczy poprzedzi─ç go, oraz zako┼äczy─ç pojedyncz─ů gwiazdk─ů *.

Tekst *pochylony*

aby uzyska─ç: Tekst pochylony

Cytat #

Aby wyr├│┼╝ni─ç tekst w postaci cytatu, wystarczy poprzedzi─ç go znakiem >.

> Tekst cytowany

aby uzyska─ç:

Tekst cytowany

Lista #

Aby wprowadzi─ç list─Ö, wyliczank─Ö czy te┼╝ wypunktowanie (jak zwa┼é tak zwa┼é) wystarczy zdecydowa─ç si─Ö, czy chcemy list─Ö numerowan─ů (w├│wczas zaczynamy od numer├│w), czy wypunktowan─ů (w├│wczas poprzedzamy tekst znakiem my┼Ťlnika -).

Lista numerowana #

1. Tekst pierwszy
2. Tekst drugi
2. Tekst trzeci

aby uzyska─ç:

  1. Tekst pierwszy
  2. Tekst drugi
  3. Tekst trzeci

Lista wypunktowana #

- Tekst pierwszy
- Tekst drugi
- Tekst trzeci

aby uzyska─ç:

  • Tekst pierwszy
  • Tekst drugi
  • Tekst trzeci

Kod #

Markdown pozwala na wstawienie bloku zawieraj─ůcego tekst, kt├│ry ma by─ç zaprezentowany tak jak jest, czyli bez ┼╝adnych zmian. Jest to bardzo wa┼╝ny blok szczeg├│lnie dla programist├│w, kt├│rzy chc─ů si─Ö podzieli─ç kodem, tak, kt├│ry b─Ödzie dzia┼éa─ç po skopiowaniu i wklejeniu. Tego typu blok zosta┼é zastosowany w powy┼╝szych przyk┼éadach, gdy zaprezentowa┼éem, jak zastosowa─ç i jaki efekt uzyskamy.

Blok kodu wstawia si─Ö za pomoc─ů symbolu `.

Kod w tek┼Ťcie #

Je┼╝eli chcemy wstawi─ç kod w tekscie tak jak tutaj, u┼╝ywamy na pocz─ůtku i na ko┼äcu pojedynczego symbolu.

Kod w postaci bloku #

W przypadku, gdy chcemy utworzy─ç blok, kt├│ry mo┼╝e zawiera─ç kilka linijek, w├│wczas u┼╝ywamy na pocz─ůtku i na ko┼äcu trzy takie znaki (```).

blok kodu

Linia pozioma (separator) #

Aby szybko wstawi─ç lini─Ö, kt├│ra oddzieli jeden tekst od drugiego, wystarczy wstawi─ç trzy my┼Ťlniki ---

Efekt:


Odno┼Ťnik #

W trakcie pisania tekstu cz─Östo zd─ů┼╝y si─Ö, ┼╝e chcemy doda─ç odniesienie do innej cz─Ö┼Ťci na naszej stronie lub do czego┼Ť zlokalizowanego w internecie. W├│wczas u┼╝ywamy odno┼Ťnika w nast─Öpuj─ůcej formie [tekst odno┼Ťnika](https://www.example.com)

aby uzyska─ç:

tekst odno┼Ťnika

Obrazy #

Aby wstawi─ç obraz do naszego tekstu, wystarczy u┼╝y─ç podobnego bloku jak powy┼╝ej, tyle ┼╝e poprzedzi─ç go wykrzyknikiem ![tekst alternatywny](obraz.jpg)

Tekst alternatywny zostaje wy┼Ťwietlony, je┼╝eli jest problem z za┼éadowaniem naszego pliku obraz.jpg.

Obraz z Odno┼Ťnikiem #

Wszelkie powy┼╝sze bloki mo┼╝emy miksowa─ç ze sob─ů.

Je┼╝eli wstawimy obraz do naszego tekstu, przyda┼éoby si─Ö doda─ç mo┼╝liwo┼Ť─ç klikni─Öcia w niego, aby wy┼Ťwietli─ç go w pe┼énej okaza┼éo┼Ťci. W tym celu miksujemy powy┼╝sze w spos├│b nast─Öpuj─ůcy.

[![tekst alternatywny](obraz.jpg)](obraz.jpg)

Wewn─Ötrzny obraz.jpg odpowiada za to, co wy┼Ťwietli nam si─Ö na ekranie. Zewn─Ötrzny, za to, co wy┼Ťwietli nam si─Ö po klikni─Öciu.

I tyle, je┼╝eli chodzi o podstawowe elementy w Markdown.

Jak zauwa┼╝ysz, nie jest ich du┼╝o i podczas pisania staj─ů si─Ö one bardzo intuicyjne w u┼╝ytku.

Elementy zaawansowane w Markdown #

Tutaj sytuacja zaczyna si─Ö nieco komplikowa─ç.

W zale┼╝no┼Ťci od tego, gdzie b─Ödziemy u┼╝ywa─ç Markdown do dyspozycji mamy elementy, kt├│re w jednego odmianie Markdown b─Öd─ů dzia┼éa─ç, natomiast w innej nie. Dlatego wa┼╝ne jest wybranie mi─Ödzy innymi edytora, w kt├│rym b─Ödziemy pisa─ç, aby wspiera┼é to, co b─Ödziemy u┼╝ywa─ç, oraz skryptu do publikacji. W moim przypadku przedstawione elementy poni┼╝ej s─ů u┼╝ywane w ramach Hugo do wy┼Ťwietlenia ich na stronie internetowej.

Tabele #

Wykorzystuj─ůc poni┼╝szy Markdown otrzymamy tabel─Ö.

| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |

w nast─Öpuj─ůcej formie:

SyntaxDescription
HeaderTitle
ParagraphText

Przypisy #

Przypisy s─ů bardzo przydatne dla autor├│w tekstu, kt├│rzy dodaj─ů odniesienia do ┼║r├│de┼é. Dzi─Öki przypisom w tek┼Ťcie, na ko┼äcu strony buduje nam si─Ö tabela, kt├│r─ů p├│┼║niej uzupe┼éniamy tym, co potrzebujemy.

Tekst w twoim zdaniu. [^1]

[^1]: Przypis do tego tekstu

Je┼╝eli aktywnie u┼╝ywasz Wikipedii, zapewne zauwa┼╝y┼ée┼Ť, jak przypisy dzia┼éaj─ů, daj─ůc ci odniesienie do artyku┼é├│w ┼║r├│d┼éowych, na bazie kt├│rych dany wniosek zosta┼é wysnuty.

Przekre┼Ťlenie #

Czasami si─Ö zdarza tak, ┼╝e napiszemy tekst, kt├│ry p├│┼║niej poprawimy, ale chcieliby┼Ťmy pokaza─ç gdzie nast─ůpi┼éa zmiana. Do tego celu u┼╝ywamy dw├│ch symboli ~ przed i na ko┼äcu.

Bardzo lubi─Ö lody ~~czekoladowe~~ waniliowe.

Co b─Ödzie wygl─ůda─ç tak:

Bardzo lubi─Ö lody czekoladowe waniliowe.


I to by wystarczy┼éo na owocn─ů prac─Ö z tekstem.

Oczywi┼Ťcie, apetyt ro┼Ťnie w miar─Ö jedzenia. W zwi─ůzku z tym mo┼╝emy zacz─ů─ç wykorzystywa─ç inne dost─Öpne elementy Markdown, ale tak naprawd─Ö, to co przedstawione powy┼╝ej stanowi─ç b─Ödzie 95% tego, czego b─Ödziesz u┼╝ywa─ç podczas pisania.

Na koniec o Typora #

O ile iA Writer ma nieco wi─Öcej ‘oh’ w swoim wygl─ůdzie, o tyle Typora przypodoba┼éa mi si─Ö integracj─ů z systemem operacyjnym Windows 10.

Je┼╝eli w naszym systemie zainstalowane mamy dwa lub wi─Öcej j─Özyki wraz z dodatkiem do sprawdzania pisowni, program ten mo┼╝e to wykorzysta─ç wewn─ůtrz swojego okna aplikacji. Bez konieczno┼Ťci w┼éasnego wsparcia dla sprawdzania pisowni, mamy do dyspozycji pot─Ö┼╝ne narz─Ödzie dostarczone wraz z naszym systemem operacyjnym.

Pod koniec pa┼║dziernika 2021 roku Typora zmieni┼éa model, na kt├│rym operowa┼éa. Do tej pory by┼éa darmowa (chocia┼╝by na macOS), to jednak teraz otrzymujemy okres pr├│bny, po kt├│rym nale┼╝y zap┼éaci─ç $14.99 (na 3 urz─ůdzenia). Przy takim rozwi─ůzaniu jednak wol─Ö iA Writer. Jako darmow─ů alternatyw─Ö polecam Mark Text.

Oczywi┼Ťcie, ┼╝adne narz─Ödzie nie jest idealne i swoje teksty, przed publikacj─ů po polsku, przerzucam przez ortograf.pl. W przypadku j─Özyka angielskiego pomagam sobie przy pomocy Grammarly oraz Outwrite.

Pozdrawiam.

Komentarze
Kategorie