class: center, middle, inverse # Llenguatges de marques ### Markdown .footnote[Mateu Yábar] --- # Markdown - Llenguatge de presentació - Gran simplicitat --- # Usos del Markdown - Documentació informàtica (ex: repositoris GIT, com pagines de Github, GitLab o Bitbucket) - Actualment està tenint un agument de popularitat - Aquestes transparències són Markdown --- # Titols ``` # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 ``` # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 --- # Emfasis ``` Un text amb emfasis s'escriu entre *asteriscs* o _underscores_. Un text amb fort emfasis s'escriu entre dobles **asteriscs** or __underscores__. Podem anidar els emfasis amb **asteriscs i _underscores_**. Per tatxar usem: ~~Text tatxat.~~ ``` .long_text[ Un text amb emfasis s'escriu entre *asteriscs* o _underscores_. Un text amb fort emfasis s'escriu entre dobles **asteriscs** or __underscores__. Podem anidar els emfasis amb **asteriscs i _underscores_**. Per tatxar usem: ~~Text tatxat.~~] --- # Llistes ``` 1. Items 2. D'una llista ordenada 1. Subitem ``` 1. Items 2. D'una llista ordenada 1. Subitem ``` - Items - D'una llista sense numeració - Subitem ``` - Items - D'una llista sense numeració - Subitem --- # Links ``` Aquest text és un [link a les transparències](http://itb.mateuyabar.com) Aquest text també és un [link a les transparències][link_transparencies] La url també serà un link http://itb.mateuyabar.com [link_transparencies]: http://itb.mateuyabar.com ``` Aquest text és un [link a les transparències](http://itb.mateuyabar.com) Aquest text també és un [link a les transparències][link_transparencies] La url també serà un link http://itb.mateuyabar.com [link_transparencies]: http://itb.mateuyabar.com --- # Imatges ``` En una sola linia  Referència posterior: ![Logo Markdown][logo] [logo]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png ``` En una sola linia  Referència posterior: ![Logo Markdown][logo] [logo]: https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/200px-Markdown-mark.svg.png --- # Codi <pre> ```json ["groc", "verd", "vermell"] ``` </pre> ```json ["groc", "verd", "vermell"] ``` --- # Codi <pre> ```java public class MyClass{ public void doSomething(){ System.out.println("Hello World"); } } ``` </pre> ```java public class MyClass{ public void doSomething(){ System.out.println("Hello World"); } } ``` --- # Cites (Blockquotes) ``` > Això és una cita ``` > Això és una cita --- # Salts de línia ``` Linia. Salt de línia. Doble salt de línia. Triple salt de línia. ``` Linia. Salt de línia. Doble salt de línia. Triple salt de línia. --- # Extensions Hi ha diferents llibreries i extensións que donen més funcionalitats al markdown - Diagrames: [Mermaid](https://mermaid.js.org/) - Mapes: [GeoJson](https://geojson.org/) - [GitLab Flavored Markdown](https://docs.gitlab.com/ee/user/markdown.html) - [GitHub Flavored Markdown](https://github.github.com/gfm/) --- class: long_code # Exercicis Fes un Markdown amb el següent contingut i format <div style="font-size: 40%"> <h1>Snatch (porcs i diamants)</h1> <h2>Any producció</h2> <p>2000</p> <h2>Argument</h2> <p>El destí creuat de diversos personatges, entre els quals Franky anomenat "Franky quatre dits" que ha de lliurar al "Cosí Avi", un mafiós novaiorquès, un enorme diamant que acaba de robar.</p> <h2>Actors</h2> <ul><li>Jason Statham</li><li>Brad Pitt</li><li>Benicio Del Toro</li></ul> <h2>Urls</h2> <a href="https://www.imdb.com/title/tt0208092/">IMDB</a> <h2>En Java</h2> </div> ```java public static void SayName(){ System.out.println("Snatch (porcs i diamants)"); } ``` --- # Exercicis - En un repositori existent que tiguis de GIT, afegeix un fitxer readme.md amb la descripció del que hi ha i mira que es vegi correctament. --- # Biliografia i links - https://dillinger.io/ - https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet