A HackMD funkciók ismertetője

--- robots: index, follow lang: hu dir: ltr title: A HackMD funkciók ismertetője description: A HackMD.io szerkesztő és nézet módjának valamint a keretrendszerének ismertetése forrás: https://hackmd.io/features szerző: zgroska@yahoo.com verzió: 0v7 - 2020.09.22 állapot: a szerkesztése folyamatban tags: leírás, HackMD, markdown, tipográfia, hu theme: blood breaks: true --- **[English version](/features)** **[中文版](/TKNuhom7S62OV6bDyBglXA)** **[日本語版](/b_l4reliTdWOSn9SiCmbJQ)** **[Magyar verzió](https://hackmd.io/@zgroska/funkciók)** **[:arrow_right: Ellenőrizd a jegyzet forrását :arrow_left:](https://hackmd.io/WXuz_8cSQHm3DOIB_COMqA?both)** **Ne módosítsd 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)** # A HackMD ismertetője ## Bevezetés A **Markdown** egy szövegszerkesztési módszer, amely külön nyelvezettel rendelkezik. **A HackMD** egy valós idejű, többplatformos együttműködésre alkalmas **Markdown** szerkesztő. Ez azt jelenti, hogy jegyzeteket írhat másokkal közösen **asztali** és **táblagépeken** vagy akár a **telefonon**. A [_kezdőlapon_](/) több hitelesítő szolgáltatóval is bejelentkezhet mint például a **Facebook**, **Twitter**, **GitHub**. 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épeken** Szerkesztés: Lásd csak a szerkesztőt. Nézet: Lásd csak az eredményt. Mindkettő: mindkettőt megosztott nézetben láthatja. **Mobilokon** Nézet: Lásd csak az eredményt. Szerkesztés: Lásd csak a szerkesztőt. ### A jegyzetek megosztása: Ha meg szeretné osztani egy **szerkeszt**-hető jegyzetet, akkor csak másolja be az URL-t az üzenetbe. Ha csak **olvasható** jegyzetet szeretne megosztani, akkor egyszerűen nyomja meg a közzététel gombot és küldje el az URL-t. ### A jegyzetek mentése: Jelenleg menthet a **Dropbox**-ba vagy mentheti a `.md` fájlt helyileg. ### A jegyzetek betöltése: A mentési funkcióhoz hasonlóan importálhat egy `.md` fájlt a **Dropbox**-ból , vagy betölltheti a **vágólap** tartalmát , é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| |:-----------------------------|:--------------:|:------------:|:-------------:|:--------:|:---------:| | **Szabad** |✔|✔|✔|✔|✔| | **Szerkeszthető** |✔|✔|✔|✔|✖| | **Korlátozott** |✔|✔|✔|✖|✖| | **Zárolt** |✔|✔|✖|✔|✖| | **Védett** |✔|✔|✖|✖|✖| | **Magán** |✔|✖|✖|✖|✖| **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 . 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** 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 . Ha megnyomja ezt a gombot, megjelenik egy aktuális _Tartalomjegyzék_, és kiemeli, hogy melyik részen tartózkodik. A TOC-k legfeljebb **három fejlécszintet** támogatnak. ## Hivatkozás Minden fejléc automatikusan hozzáad egy hivatkozást a jobb oldalon. Vigye az egeret az ikonhoz és kattintson rajta. 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 után és a záró `$` karakter elé nem szabad szóközt tenni. A *Gamma függvény* megoldása $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ az Euler integrállal A sorok között középre igazitva: - 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://knsv.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öz 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 ... - ... 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 Soron belül `for i=1` Sorkezdő tabulátorral // Megjegyzés 1 code 2 code 3 code Több soros kód ==AltGr+7== "keritésben" ``` Sample text here... ``` Szintaxis kiemelés ``` 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 | Oszlop 1 | Oszlop 2 | Oszlop 3 | | -------- | -------- | -------- | | ![Minion](https://octodex.github.com/images/minion.png =200x200) | ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "Stormtroopocat kicsinyitve" =200x200) | ![Alt text][rajz_01] | | Kép méretekkel. | Felugró szöveggel | Hivatkozása az URL-re a dokumentum későbbi helyén | [rajz_01]: https://octodex.github.com/images/dojocat.jpg "Dojocat" ### Lábjegyzet Lábjegyzet1[^first]. Lábjegyzet2[^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]: A második 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