Markdown: Egyszerűen szövegelek, tehát vagyok!

A Markdown egy egyszerűsített leíró nyelv, ami főleg olyan blogolóknak lehet hasznos, akik nem szeretnének alámerülni a HTML-kódolás mélységeiben, azért mert nincs rá idejük, kedvük, tehetségük vagy „kinek mi köze hozzá?” Egyszerűbben: akik nem szeretnének bonyolult html tageket begépelgetni, vagy nem akarnak kattintgatni a Wysiwyg szerkesztő gombjaira, azok csillagokkal és/vagy aláhúzásokkal formázhatják meg aktuális szövegeiket.

Természetesen mindehhez fontos, hogy a blogmotoron „tekerjen” az éppen aktuális Markdown PhP verzió, és egy plugin (markup selecter), ami választhatóvá teszi a szerkesztőfelületen a Markdown beviteli formátumot. (Lásd az ábrán az „izzó” Markdown rádiógombot!)

Az alábbiakban néhány fontosabb syntaxisra láthattok példát, ami természetesen nem a lehetőségek teljes tárháza, de ahhoz éppen elegendő, hogy megkezdhessétek Markdown-ban a szövegelést egy blogoldalon. Ezután már csak abban kell reménykednetek, hogy valaki olvassa is a szövegeiteket! Természetesen az már „más tészta”, mert azon a Markdown kiváló ismerete nem segít, csak a „jó szövegelés”!

Alapvető beállítások

Főcím

Syntaxis:

##Főcím     Minél több az andráskereszt (#), annál kisebb a címsor!

Alcím 1.

Syntaxis:

###Alcím 1.     Minél több az andráskereszt (#), annál kisebb a címsor!

Alcím 2.

Syntaxis:

####Alcím 2.     Minél több az andráskereszt (#), annál kisebb a címsor!

Alcím 3.

Syntaxis:

#####Alcím 3.     Minél több az andráskereszt (#), annál kisebb a címsor!

Vastag betű

Syntaxis:

**Vastag betű**     Két csillag (**), majd egy kis szöveg, azután ismét két csillag (**)

Döntött betű

Syntaxis:

*Döntött betű*     Egy csillag (*), majd egy kis szöveg, azután ismét egy csillag (*)

Sortörés (Html-ben: <br />)

Syntaxis:

A szövegsor után 2 db. space (szóköz), és már kezdődik is egy újabb sor.

Szakasz vagy bekezdéstörés (Html-ben: <p></p>)

Syntaxis:

A szövegsor után 1 db. üres sor, és már kezdődik is egy újabb bekezdés.

Listaelemek

Egyszerű felsorolás:

• listaelem1.
• listaelem2.
• listaelem3.

Syntaxis:

* listaelem1.
* listaelem2.
* listaelem3.

Az első listaelem1 előtt egy üres sort kell hagyni, és az utolsó listaelem3 után is
egy üres sornak kell állnia.

Számozott felsorolás:

1. listaelem1.
2. listaelem2.
3. listaelem3.

Syntaxis:

1. listaelem1.  
2. listaelem2.  
1. listaelem3.  

Az első listaelem1 előtt egy üres sort kell hagyni, és az utolsó listaelem3 után is 
egy üres sornak kell állnia. A számozásnak nem kell folyamatosnak lennie, így
könnyebb cserélni a listaelemeket. Amennyiben egy szám mögött pont van, azt a 
Markdown felsorolásnak fogja tekinteni. Ez az évszámoknál problémás lehet.

Évszámok felsorolása (dátum helyes megjelenítése):

2010. augusztus 19. = első nap,
2010. augusztus 20. = második nap,
2010. augusztus 21. = harmadik nap.

Syntaxis:

2010\. augusztus 19.
2010\. augusztus 20.
2010\. augusztus 21.

Amennyiben az első évszám előtt üres sor áll, és/vagy az utolsó évszám mögött üres sor áll,
akkor a Markdown felsorolásnak tekinti az évszámokat és helytelenül jeleníti meg. Pl.:

1. augusztus 19.
2. augusztus 20.
3. augusztus 21.

Ezért a helyes megjelenítéshez az évszám pontja elé egy (\) jelet kell kitenni.

Linkek megjelenítése

Egyszerű linkek megjelenítése:

https://digiblog.hu

Syntaxis:

<https://digiblog.hu> Az URL-t (webcím) kacsacsőrrel kell „körbezárni.”

Szöveges hivatkozás weboldalra „title” opcióval:

Ugorj a weblapunkra!

Syntaxis:

[Ugorj a weblapunkra!](https://digiblog.hu/ "Ajánlott weblap")
Ez esetben az „Ugorj a weblapunkra!” szöveg jelenik meg a felületen,
amire ráklikkelve a https://digiblog.hu weblapra ugrunk. 
„title” opció: ha a link fölé visszük az egeret, akkor kis buborékban az 
„Ajánlott weblap” felirat jelenik meg.

Hivatkozás saját szerverünkön/blogunkon lévő korábbi írásra/linkre relatív útvonallal:

Nézd meg A Wysiwyg webszerkesztőkről általában című cikkünket!

Syntaxis:

[A Wysiwyg webszerkesztőkről általában](/riportok-a-wysiwyg-webszerkesztokrol-altalaban/)
Az írásunkban linkként a „A Wysiwyg webszerkesztőkről általában” fog megjelenni,
amire ráklikkelve a saját szerverünkön/blogunkon lévő másik cikkre ugorhatunk.
A linket a „/riportok-a-wysiwyg-webszerkesztokrol-altalaban/” relatív útvonallal adtuk meg,
így egy esetleges domain név (digiblog.hu) változtatáskor nem kell akár több száz cikkben
átírnunk a hivatkozásokat.

Képek megjelenítése

Sajnos a Markdown a képkezelést nagyon nehézzé teszi, ezért ez esetben célszerű a legegyszerűbb HTML-kódokat alkalmazni a helyes megjelenítés érdekében. A Markdown előnye, hogy a HTML-kódokat is helyesen kezeli.

képmegjelenítés balra rendezve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at quam in est aliquam pretium. Nulla magna tortor, porta et lobortis quis, luctus a dolor. Fusce tempus, enim quis euismod mattis, odio sem rutrum magna, at molestie lectus nibh nec enim. Vivamus rhoncus vestibulum ornare. Etiam pulvinar felis ut purus tempus ac mattis mauris varius. Sed imperdiet, urna ut porttitor feugiat, mauris ipsum porta orci, in aliquet orci nisi ac nisl. Donec massa ligula, consectetur a porttitor eleifend, cursus ut lorem. Integer laoreet ultricies arcu quis mattis. Duis id risus eu mi cursus bibendum ut sed tellus. In sit amet tincidunt turpis. Duis interdum semper nisl a venenatis. Sed et turpis ligula. Suspendisse pulvinar enim id risus sollicitudin blandit. https://digiblog.hu Nunc sodales lectus vel lorem posuere laoreet. Phasellus euismod aliquam rhoncus. Nulla consectetur adipiscing erat ac vestibulum. Praesent dui ligula, pharetra dapibus rutrum porta, varius eu diam. Vestibulum placerat ultrices mauris, sed sollicitudin urna hendrerit vel. Fusce consectetur, neque at tristique mollis, tellus ante tristique velit, ut varius ligula purus vel elit.

Syntaxis:

<p markdown="1">
<div class="kepbalra">
<img src="/wp-content/uploads/2010/08/riportok-a-szamitogep-hat-evtizede.jpg"
    class="kepkeret" title="A számítógép hat évtizede"/>
</div>
**képmegjelenítés balra rendezve** Lorem ipsum ...
</p>

1. képfelirat (középre igazított kép)

Syntaxis:

<p class="kozepre">
<img src="/wp-content/uploads/2010/08/riportok-a-szamitogep-hat-evtizede.jpg"
class="kepkeret" title="A számítógép hat évtizede"/>
</p>
<p markdown="1" class="kozepre">1. képfelirat (**középre igazított kép**)</p>

képmegjelenítés jobbra rendezve Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at quam in est aliquam pretium. Nulla magna tortor, porta et lobortis quis, luctus a dolor. Fusce tempus, enim quis euismod mattis, odio sem rutrum magna, at molestie lectus nibh nec enim. Vivamus rhoncus vestibulum ornare. Etiam pulvinar felis ut purus tempus ac mattis mauris varius. Sed imperdiet, urna ut porttitor feugiat, mauris ipsum porta orci, in aliquet orci nisi ac nisl. Donec massa ligula, consectetur a porttitor eleifend, cursus ut lorem. Integer laoreet ultricies arcu quis mattis. Duis id risus eu mi cursus bibendum ut sed tellus. In sit amet tincidunt turpis. Duis interdum semper nisl a venenatis. Sed et turpis ligula. Suspendisse pulvinar enim id risus sollicitudin blandit. https://digiblog.hu Nunc sodales lectus vel lorem posuere laoreet. Phasellus euismod aliquam rhoncus. Nulla consectetur adipiscing erat ac vestibulum. Praesent dui ligula, pharetra dapibus rutrum porta, varius eu diam. Vestibulum placerat ultrices mauris, sed sollicitudin urna hendrerit vel. Fusce consectetur, neque at tristique mollis, tellus ante tristique velit, ut varius ligula purus vel elit.

Syntaxis:

<p markdown="1">
<div class="kepjobbra">
<img src="/wp-content/uploads/2010/08/riportok-a-szamitogep-hat-evtizede.jpg"
    class="kepkeret" title="A számítógép hat évtizede"/>
</div>
**képmegjelenítés balra rendezve** Lorem ipsum ...
</p>

Utószó

Talán feltűnt, hogy a fenti kódrészletekben stílusokat is használtunk pl.: <div class="kepjobbra">. A portáloknál a stílusokat egy helyen definiálják, ez a stíluslapfájl. Az ebben felsorolt stílusok minden oldalon használhatók, ezek révén lesz egységes a honlap minden oldala.

A stíluslap fájlba (.css kiterjesztésű) ezeket a kiegészítéseket rakjátok:

.kepbalra {
  text-align: center;
  float: left;
  padding-right: 10px;
}
.kozepre {
  text-align: center;
}
.kepjobbra {
  text-align: center;
  float: right;
  padding-left: 10px;
}
.kepkeret {
  border: 2px double gray;
}

Amennyiben sikerült „átrágnotok” magatokat ezen az oldalon, akkor már csak egy kis gyakorlás kell, és biztosan örömötöket fogjátok lelni a Markdown használatában. Egyszerűbb bejegyzéseket körülbelül 10 perces időráfordítással már biztonságosan tudtok szerkeszteni. A többi meg majd jön magától. Tehát, ha készen álltok, akkor „kapjátok elő” a szövegszerkesztőt, írjatok egy cikket, majd lássátok el a szükséges MarkDown jelekkel, aztán irány a legközelebbi blogoldal. Hajrá, már nagyon olvasnám a mondanivalótokat!