---
# System prepended metadata

title: A HackMD ismertetője
tags: [' markdown', ' hu', ' tipográfia', tananyag, ' HackMD']

---

---
robots: index, follow
lang: hu
title: A HackMD ismertetője
description: A HackMD szövegszerkesztő ismertetése
tags: tananyag, HackMD, markdown, tipográfia, hu
theme: blood
verzio: 0v54
breaks: true
---
**[English version](/features)**
**[Magyar verzió](https://hackmd.io/PDBYm-yiSU-PvRh1qf1MYg?view)**

**Ne módosítsa ezt a megjegyzést.** Nagyon köszönöm :smile:
**Ha szeretne köszönetet mondani vagy játszani valamivel, kérjük, menjen a [Játszótérre](/SA8inq7VTmO8jIWC5QsMcw)**

HackMD ismertetője
===

## Bevezetés
A **Markdown** egy szövegszerkesztési módszer, amely külön nyelvezettel rendelkezik.

<i class="fa fa-file-text"></i> **A HackMD** egy valós idejű, többplatformos együttműködésre alkalmas [**Markdown**](https://docs.microsoft.com/hu-hu/contribute/how-to-write-use-markdown) szerkesztő. Ez azt jelenti, hogy jegyzeteket írhat másokkal közösen **asztali** és **táblagépeken** vagy akár a **telefonon**. 
Több hitelesítő szolgáltatóval is bejelentkezhet mint például a **Facebook**, **Twitter**, **GitHub** és másokkal a [_kezdőlapon_](/).

Kérjük, az új problémákat a [GitHub](https://github.com/hackmdio/hackmd-io-issues/issues/new)-on jelentse.
Ha azonnali segítségre van szüksége, küldjön nekünk egy [Facebook üzenetet](https://www.messenger.com/t/hackmdio).
**Nagyon szépen köszönjük!**

A munkafelületek
==
A munkafelület az üzemmódoktól függően változik
## Üzemmódok
**Asztali és táblagépek**
<i class="fa fa-edit fa-fw"></i> Szerkesztés: csak a szerkesztő látszik.
<i class="fa fa-columns fa-fw"></i> Mindkettő: mindkettőt megosztott nézetben láthatja.
<i class="fa fa-eye fa-fw"></i> Nézet: csak az eredmény látszik.

**Mobilok**
<i class="fa fa-toggle-on fa-fw"></i> Nézet: csak az eredmény látszik.
<i class="fa fa-toggle-off fa-fw"></i> Szerkesztés:  csak a szerkesztő látszik.

## A jegyzetek megosztása:
Ha egy **szerkeszt**-hető jegyzetet szeretne megosztani, akkor csak másolja be az URL-jét az üzenetbe.

Ha csak **olvasható** jegyzetet szeretne megosztani, akkor egyszerűen nyomja meg a közzététel gombot <i class="fa fa-share-square-o"></i> és küldje el az URL-t.

## A jegyzetek mentése:
Jelenleg menthet a **Dropbox**-ba  <i class="fa fa-dropbox"></i> vagy mentheti a `.md` fájlt <i class="fa fa-file-text"></i> helyileg.

## A jegyzetek betöltése:
A mentési funkcióhoz hasonlóan importálhat egy `.md` fájlt a **Dropbox**-ból <i class="fa fa-dropbox"></i>, vagy betölltheti a **vágólap** tartalmát <i class="fa fa-clipboard"></i>, és elemezhet néhány  **html** oldalt amit hasznosnak talál :smiley:

## Engedélyek:
Lehetőség van egy jegyzethez való hozzáférési engedély módosítására a nézet jobb felső részén található kis gomb segítségével. 
Hat lehetősége van:


|                              |Tulajdonos read/write|Bejelentkezett read|Bejelentkezett write|Vendég read|Vendég write|
|:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:|
|<span class="text-nowrap"><i class="fa fa-leaf fa-fw"></i> **Szabad**</span>               |✔|✔|✔|✔|✔|
|<span class="text-nowrap"><i class="fa fa-pencil fa-fw"></i> **Szerkeszthető**</span>           |✔|✔|✔|✔|✖|
|<span class="text-nowrap"><i class="fa fa-id-card fa-fw"></i> **Korlátozott**</span>           |✔|✔|✔|✖|✖|
|<span class="text-nowrap"><i class="fa fa-lock fa-fw"></i> **Zárolt**</span>               |✔|✔|✖|✔|✖|
|<span class="text-nowrap"><i class="fa fa-umbrella fa-fw"></i> **Védett**</span>        |✔|✔|✖|✖|✖|
|<span class="text-nowrap"><i class="fa fa-hand-stop-o fa-fw"></i> **Magán**</span>       |✔|✖|✖|✖|✖|


**Csak a jegyzet tulajdonosa módosíthatja a jegyzet engedélyeit**

## A jegyzetek weblapba ágyazása:
A jegyzetek a következőképpen ágyazhatók be:

```xml
<iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe>
```

## [Dia Mód](/slide-example):
Speciális szintaxis segítségével jegyzetét diákra rendezheti.
Ezután a  prezentáció készítéséhez használja a a felső jobboldali menűsoron **Dia Mód**-ot <i class="fa fa-tv"></i>.
A részletekért keresse fel a felső baloldali menűsoron a segítséget.

## [Könyv Mód](/book-example):
You can make your notes into a book.
List your links in order or nest them.
Then use the **Book Mode** <i class="fa fa-book"></i> to make a collection.
A részletekért keresd fel ezt a [linket](/book-example).

Nézet üzemmód
===
## Tartalomjegyzék:
A **Nézetterület** jobb alsó részén van egy _ToC_  gomb, there is a _ToC_ button <i class="fa fa-bars"></i>.
Ha megnyomja ezt a gombot, megjelenik egy aktuális _Tartalomjegyzék_, és kiemeli, hogy melyik részen tartózkodik.
ToCs support up to **three header levels**.

## Hivatkozás
Minden fejléc automatikusan hozzáad egy hivatkozást a jobb oldalon.
You can hover and click <i class="fa fa-chain"></i> to anchor on it.

Szerkesztő üzemmód:
==
## Gyorsbillentyűk:
Csakúgy, mint az **Automatikus-kiegészítés**,  gyors és kényelmes.
> További információ [itt](https://codemirror.net/demo/sublime.html) olvasható.

## Automatikus-kiegészítés:
Ez a szerkesztő teljes automatikus kiegészítést ad a markdown-ben.
A következő jelek és plusz egy karakter begépelése tippeket mutat:
| Jelek | Leírás |
| :------:| :----------- |
| `:` | Hangulatjelek |
|  ` ``` ` | Kódblokkok |
| `#` | Fejlécek |
| `[]` | Idézetek |
| `{}` | Külső alkalmazások |
| `!` | Képek |

## Cím:
Az **első szintű fejlécet** veszi fel a jegyzet címeként.

## Címke:
Az alábbiak szerint a címkék használatával a megadott címkék az Ön **történelmében** láthatók lesznek.
###### címkék: `jellemzők` `menő` `frissitett`

## [YAML Metaadat](/yaml-metadata)
A böngésző viselkedését beállíthatja hozzáadott megjegyzésekkel (a részletekért lásd a fenti linket):
- title: a jegyzet címének a megadása
- description: a jegyzet leírása
- image: az alapértelmezett képe megadása (link az előnézethez)
- tags: a cimkék beállítása
- robots: webes robotok beállítása
- lang: a böngészõ nyelvének a megadása
- dir: a szöveg irásírányának megadása
- breaks: a sortörések beállítása
- GA: a [Google Analytic](https://analytics.google.com/analytics/web/provision/?authuser=0#/provision) használat beállítása
- disqus: a [Disqus](https://disqus.com/) használatának beállítása
- slideOptions:  dia mód opciók beállítása

## Tartalomjegyzék:
A jegyzetbe a `[TOC]` segitségével tudod a tartalomjegyzéket beilleszteni.

[TOC]

## Hangulatjelek
Írd be az ilyen emojikat, mint ez :smile: :smiley: :cry: :wink:
> Lásd a teljes emoji listát [itt](http://www.emoji-cheat-sheet.com/).

## ToDo (tennivaló) Lista:
- [ ] Teendők
  - [x] Kell egy salátát venni
  - [ ] Fogmosás
  - [x] Igyál egy kis vizet

## Kód Blokk:

Számos programozási nyelvet támogatunk, használjuk az automatikus kiegészítés funkciót az teljes lista megtekintéséhez.
```javascript=
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
```
> Ha más sorszámtól szeretnéd a listát indítani írd be az egyenlőség jel után: ```javascript=101 ``` 
```javascript=101
var s = "JavaScript syntax highlighting";
alert(s);
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
```
> Ha folytatni akarod az előző kódblokk sorszámát: ``` javascript=+```

```javascript=+
var s = "JavaScript syntax highlighting";
alert(s);
```
> Néha hosszú szöveget kell csinálnod megszakítás nélkül. Itt az ideje, hogy használd erre is a kódblokkot: ` ```! abc... ``` `.

```!
Ha te asztalosként gyönyörű fiókos szekrényeket készítesz, akkor nem fogsz rétegelt lemezeket használni a hátoldalon.
```
## Idézetblokk szerkesztése:
> Az alábbi szintaxis segítségével adja meg __nevét, idejét és színét__ a idézetblokk alakításához.
> [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7]
> > Támogatja a beágyazást is!
> > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 10:00 PM] [color=red]

## Külvilág

### YouTube
{%youtube 1G4isv_Fylg %}

### Vimeo
{%vimeo 124148255 %}

### Gist
{%gist schacon/4277%}

### SlideShare
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}

### Speakerdeck
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}

### PDF
**Figyelem: ez a böngésző letiltja, ha nem használja a https `https` URL-t.**
{%pdf https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf %}

## MathJax

A LaTeX matematikai kifejezéseket a **MathJax** használatával lehet megjeleníteni, mint például a [math.stackexchange.com](http://math.stackexchange.com/) portálon.
A soron belüli megjelenítésnél a kezdő `$`  karakter elé és a záró `$` karakter után szóközt kell tenni.

A *Gamma függvény* megoldása $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ az Euler integrállal

A másodfokú egyenlet megoldó képlete:
$$ 
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

A *Gamma függvény*:
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

> További információ a **LaTeX** matematikai kifejezésekről [itt](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference).

## UML diagramok

### Sorrendi Diagramok

Így tudsz szekvenciákat ábrázolni:

```sequence
Alice->Bob: Szia Bob, hogy vagy?
Note right of Bob: Bob gondolkozik
Bob-->Alice: Jól vagyok, köszi!
Note left of Alice: Alice válaszol
Alice->Bob: Hol voltál?
```

### Folyamat Ábrák

Folyamat Ábrákat így lehet megadni:
```flow
st=>start: Start
e=>end: End
op=>operation: Fordítom a leírást
op2=>operation: Lefordítok egy részt
cond=>condition: Elkészültem?
igen vagy nem?

st->op->op2->cond
cond(yes)->e
cond(no)->op2
```

### Graphviz
```graphviz
digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes

                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                Iskolaigazgató->{Helyettes_1 Helyettes_2 Üzleti_menedzser}
                Helyettes_1->{Tanár_1 Tanár_2}
                Üzleti_menedzser->IT_menedzser
                {rank=same;IT_menedzser Tanár_1 Tanár_2}  // Put them on the same level
}
```

### Mermaid
```mermaid
gantt
    title A Gantt Diagram

    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    anther task      : 24d
```

### Abc
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```

> További információ: [**sequence diagrams**](http://bramp.github.io/js-sequence-diagrams/).
> További információ: [**flow charts**](http://adrai.github.io/flowchart.js/).
> További információ:  [**graphviz**](http://www.tonyballantyne.com/graphs.html)
> További információ: [**mermaid**](http://mermaid-js.github.io/mermaid/#/)
> További információ: [**abc**](http://abcnotation.com/learn)

Üzenetek
---
:::success
Siker :tada:
:::

:::info
Ez egy üzenet :mega:
:::

:::warning
Vigyázz :zap:
:::

:::danger
Veszély! :fire:
:::

## Tipográfia

### Fejlécek
```
# h1 Főcím
## h2 Alcím
### h3 Alcímsor
#### h4 Alcímsor
##### h5 Alcímsor
###### h6 Alcímsor
```

### Vízszintes vonal

___

---

***


### Tipográfiai jelek
Az írásjelek választéka.
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
teszt.. teszt... teszt..... teszt?..... teszt!....
!!!!!! ???? ,,
Gondolatjel -- az elválasztó jelnél hosszabb
"Idézőjelek, dupla"
'Idézőjelek, szimpla'
### Karakter stílusok
**Félkövér**
__Félkövér__
*Dölt*
_Dölt_
~~Áthúzott~~
Alsó~index~
Felső^index^
++Aláhúzott++
==Kiemelt==
### Idézett blokkok


> Idézett blokkok beágyazhatóak egymásba...
>> ...ha további, nagyobb jeleket használnak egymás mellett...
> > > ...vagy szóközzel egymást között.

### Listák

#### Rendezetlen

+ Létrehozhat egy listát a következő karakterek használatával a sor elején: `+`, `-`, or `*`
+ Az al-listák 2 szóköznyi behúzással készíthetők
  - Többszintű listák szintjeit a színekkel ...
      * ... különböztetik meg és ... 
        + ... szintről-szintre változik ...
          - ... a szinezése a szerkesztő ...
            - nézetben.
       
  - A listaindító karakterek szabadon váltogathatók:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit

+ Nagyon könnyű!

- Ez már egy új lista egy ...
  - ... másik lista indító jellel.

    * 4 szóköz a lista 3. szintjét jelenti egy üres bekezdés után is 

#### Rendezett

1. A sorszám hatására indul a sorszámozott lista
2. A töltelék szöveggel készített többsoros - Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet - bekezdésen látszik, hogy a bekezdéseket számolja, nem a sorokat.
3. A számozás azonban nem szünik meg új bekez-

1. dések, vagy más sorszámok hatására ...
1. ... hiába írod a sor elejére az `1.` számot 
1. a sorszámozás folytatódik ...
2. 2583
4. Lorem ipsum dolor sit amet
2. 

Számozás egy üres bekezdést követően indítható újra akár eltolással:

57. Az 57 után jön a ...
1. ..., nem a sorkezdő `1.`-es, hanem az 58.-as

* A számozás nem szünik meg új bekezd
  *   Vigyázzunk a behúzásokkal, mert négy db szóköz hatására ...
  *     ... kezdhetünk program kódot irogatni amin belül ismét indithatunk ...
  *     ... a listaelemekbe ...
        * ... és ezen belül is indithatunk ...
          * új listákat. 

### Programkód

#### ==AltGr+7== karakter között
soron belül: `for i=1`,
akár többször is `next` a szövegben `END`
![](https://i.imgur.com/qMZDoAz.png)

#### Sorkezdő tabulátorral ==ENTER+ENTER+TAB==

    // Megjegyzés
       1 programsor
       2 programsor
       3 programsor
![](https://i.imgur.com/ZTKADKW.png)

#### Több soros kód ==AltGr+7== "keritésben"

```
Mintaszöveg ...

... itt a vége.
```
![](https://i.imgur.com/z23ubOg.png)

#### Szintaxis kiemelés programnyelvek szerint:

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

### Táblázatok

| Sorszám | Leírás |
| - | - |
| 1 | A szerkesztő nézetben a második sorban használt ...  |
| 2 | ... `:` és `-` karakterek használatával ... |
| 3 | ... tudom az oszlopok igazítását beállítani|

Jobbra igazított oszlopok

| Sorszám | Leírás |
| ------:| -----------:|
| 1 | A szerkesztő nézetben a második sorban használt ...  |
| 2 | ... `:` és `-` karakter használatával ... |
| 3 | ... tudom az oszlopok igazítását beállítani|
|------:|-----------:|

Középre igazított oszlopok

| Sorszám | Leírás |
|:------:|:-----------:|
| 1 | A szerkesztő nézetben a második sorban használt ...  |
| 2 | ... `:` és `-` karakter használatával ... |
| 3 | ... tudom az oszlopok igazítását beállítani|
|:------:|:-----------:|

Akár vegyesen is lehet az oszlopokat igazítani

| Sorszám | Leírás |
|-: |:- |
| 1 | A szerkesztő nézetben a második sorban használt ...  |
| 2 | ... `:` és `-` karakter használatával ... |
| 3 | ... tudom az oszlopok igazítását beállítani|
| -: |:-|

### Linkek
```
A beírt link automatikusan átalakul kattinthatóvá: 
https://github.com/nodeca/pica
```
:::info
https://github.com/nodeca/pica
:::
```
Ha címkézni akarjuk: 
[link cimkézve](http://dev.nodeca.com)
```
:::info
[link cimkézve](http://dev.nodeca.com)
:::
```
Egérmutatóra megjelenő felugró szöveg:
[címkével és felugró szöveggel]
   (http://nodeca.github.io/pica/demo/ "a felugró szöveg!")
```
:::info
[címkével és felugró szöveggel](http://nodeca.github.io/pica/demo/ "a felugró szöveg!")
:::
### Képek


| Minion | Stormtroopocat | Dojocat |
| :---: | :---: | :---: |
| ![Minion](https://octodex.github.com/images/minion.png =100x100)     | ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "Stormtroopocat kicsinyitve" =100x100)     | ![Alt text][rajz_01] |
| Kép méretekkel | Felugró szöveggel | Hivatkozás az URL-re a dokumentum későbbi helyén |

A rajz_01 (Dojocat) képének megjelenítésének helye és a definiálásának a helye eltérhet egymástól, amint ez a szerkesztési módban látható. 

[rajz_01]: https://octodex.github.com/images/dojocat.jpg "Dojocat"

### Lábjegyzet

Lábjegyzet 1 link[^first].
Lábjegyzet 2 link[^second].
Soron belüli lábjegyzet^[Ha jól számolom akkor ez a 3. lábjegyzet szövege] készítése.

Többszörös lábjegyzet hivatkozás[^second].

[^first]: Többsoros lábjegyzetet is készíthetsz **több bekezdésből**.
[^second]: Lábjegyzet szövege.

Ez a 3. hivatkozás a `[^second]` szövegére[^second].
És negyedszerre: `[^second]` [^second].

### Definició Listák

Kifejezés 1

:   Definició 1
with lazy continuation.

Kifejezés 2 with *inline markup*

:   Definició 2

        { some code, part of Definition 2 }

    A 2. fogalom harmadik bekezdése.

_Kompakt stílus:_

Kifejezés 1
  ~ Definició 1

Kifejezés 2
  ~ Definició 2a
  ~ Definició 2b

### Rövidítések

*[XML]: eXtensible Markup Language - Kiterjeszthető Jelölő Nyelv

Támogatott az egérmutató alatti üzenetek amik pihentetésre felbukkannak. Pl a rövidítések feloldására jól lehet használni. Ezeket előre vagy utólag is lehet definiálni. 
Vidd az egeret a röviditések fölé: **HTML**, "HTML", HTML, XML.
A szövegbe ágyazott röviditések esetén  pl "xxxHTMLyyy" nem működik.

*[HTML]: Hyper Text Markup Language