Markdown ve výuce

--- title: Markdown ve výuce tags: MUVS  slideOptions: transition: convex transitionSpeed: default theme: defaul --- # Markdown ve výuce ---- ## Markdown - minimalistický značkovací jazyk, resp. skupina jazyků - jednoduchá syntaxe umožňující vytvářet přehledné texty s formátováním - filozofie easy-to-read a easy-to-write - dobrá podpora v diskuzních forech, verzovacích službách (GitHub, GitLab) - existují online/offline editory umožňující živé náhledy textu - možnost konverze do jiných jazyků - především HTML pro tvorbu webů - možnost editace v libovolném textovém editoru - autor jazyka John Gruber s přispěním Aarona Swartze - vznik v roce 2004 - tento text je psaný v Markdownu - soubory s příponou .md ### Výhody Markdownu - psaní dobře čitelných textů bez složitého formátování - editace textů možná téměř všude, protože se jedná o textový formát podobně jako .txt ### Nevýhody Markdownu - vznikl bez podrobné specifikace, což vedlo ke vzniku mnoha verzí markdownu - Github-flavored Markdown - Gitlab-flavored Markdown - MultiMarkdown - CommonMark - Markdown Extra - a další ### CommonMark - verze Markdownu, která má za cíl sjednotit Markdown - standard Markdownu s podrobnou specifikací - CommonMark tutorial: https://commonmark.org/help/tutorial/ - mnoho nadstaveb Markdownu (jako Gitlab a Githab flavored Markdown) jsou postaveny na CommonMarku, což umožňuje vyšší kompatibilitu mezi jednotlivými verzemi Markdownu ## Konkureční jazyky - AsciiDoc - Texy - reStructuredText - MediaWiki - Org-mode - a další ## HackMD vs CodiMD - HackMD i CodiMD jsou editory pro psaní Markdownu - umožňují sdílenou editaci souboru více autory, podobně jako Google Drive dokumenty - umožňují versování souboru a synchronizaci s GitHubem - možnost exportu souboru na Dropbox nebo Google Drive - možnost uložení souboru ve formátu Markdown .md, HTML nebo ODF - možnost importu dokumentu z Dropboxu, Google Drive, Gist nebo přes Clipboard (schránku Ctrl+C, Ctrl+V) - možnost tvorby textového dokumentu, prezentace (Slide mode) a kompaktního textového dokumentu (Book mode) - HackMD je webová verze editoru - CodiMD je self-hostovaná verze editoru dostupná na GitHubu (https://github.com/hackmdio/codimd) - CodiMD nemá verzi editoru Bood mode ### Módy editoru - Edit mode: v editoru je vidět pouze zdrojový text - View mode: v editoru je vidět pouze naformátovaný text - Both mode: v editoru je vidět zdrojový text i naformátovaný text - Na mobilních zařízení není možnost otevření Both modu - Slide mode: napsaný dokument se zobrazí jako prezentace - Book mode: zobrazení dokumentu jako kniha obsahující několik samostatných kratších dokumentů - editor má tmavou a světlou verzi, kterou si uživatel může nastavit ### Možnosti editoru - pod ikonkou otazníku :question: se nachází nápověda syntaxe - lze používat ikony nad textem pro automatické formátování - vhodné pro úplné začátečníky v Markdownu - nad dokumentem se zobrazuje kdo a kdy udělal poslední změny dokumentu - pod ikonkou plus :heavy_plus_sign: lze vytvořit nový dokument - pod ikonkou tří teček je menu importu, exportu, stáhnutí a verzování v GitHubu - pod ikonkou je menu sdílení - možnost sdílení jako prezentace, veřejné sdílení, správa povolení editací a komentářů ### Možnosti syntaxe - vytvoření obsahu dokumentu - vkládání emoji - tvorba ToDo listu - vkládání kódu - vkládání citací - vkládání obrázků, videí a externích odkazů - tvorba matematických vzorců - tvorba diagramů - tvorba notového zápisu - tvorba grafů - tvorba tabulek - vkládání poznámek pod čarou - vkládání hypertextový odkazů - vše shrnuto v dokumentaci [_Features_](https://hackmd.io/features?both) ### Ukázka syntaxe __Nadpisy__ ``` # h1 Heading ## h2 Heading ### h3 Heading #### h4 Heading ##### h5 Heading ###### h6 Heading ``` __Zvýraznění textu__ | **This is bold text** | ```**This is bold text**``` | |------------------------ |---------------------------- | | __This is bold text__ | ```__This is bold text__``` | | *This is italic text* |``` *This is italic text*``` | | _This is italic text_ |``` _This is italic text_``` | | ~~Deleted text~~ |``` ~~Deleted text~~``` | | lu~lala~ |``` lu~lala~``` | | Horní index: 19^th^ |``` Horní index: 19^th^``` | | Dolní index: H~2~O |``` Dolní index: H~2~O```. | | ++Inserted text++ |``` ++Inserted text++ ``` | | ==Marked text== |``` ==Marked text== ``` | ## Použití HackMD ve výuce - cíl je studentům představit také jiné formy tvorby poznámek a prezentací mimo Microsoft Office a Power Point - výhodou Markdownu i HackMD je, že jde o otevřený systém, který je zdarma - poznámky v Markdownu jsou editovatelné na každém počítači bez ohledu na operační systém - mezi různými počítači nedochází ke změně formátování podle verzí softwaru ### Příklady aplikace - vytvoření jednotlivých týmů v HackMD se studenty z jedné třídy - přes HackMD lze vytvořit výukovou prezentaci, kterou studenti mají ihned k dispozici přes intenetový odkaz - prezentaci lze jednoduše převést do textového formátu, který mohou mít studenti k dispozici, stáhnout si ho a dělat si přímo do něj poznámky - nebo mohou dělat poznámky přímo do prezentace - z výukového materiálu lze pro studenty připravit "templates", do kterého si studenti dělají poznámky - při distančním studiu lze takto spolupracovat ve skupinách na jednom dokumentu, vypracovávat domácí úkoly - lze použít pro mezi předmětovou výuku: Markdown lze velmi dobře propojit s verzovacím systémem GitHub, který studenty seznámí s potřebou zálohování a že lze i programátorské nástroje využívat v běžném životě například pro projektové řízení, přípavu rozsáhlejších seminárních prací - pokud studenti umí použít verzovací systém GitHub lze spojit s nástrojem GitHub Classroom ### Aplikace ve výuce chemie - pro výuku chemie bych použila HackMD pro tvorbu prezentací doplňující výklad - HackMD podporuje formáty pro snadné psaní matematických vzorců, což je vhodné pro psaní chemických rovnic - pro svoji potřebu bych si prezentace archivovala na GitHubu, kde bych mohla také verzovat prezentace pro potřebu doplnění či oprav chyb - prezentace bych převedla do textového modu a dala k dispozici studentům pro psaní poznámek, současně aby měli k dispozici chemické vzorce a obrázky chemických látek - je nereálné, aby je v hodinách překreslovali - větší domácí práce bych zadávala přes možnost vytvoření "templates" - tak aby studenti mohli doplňovat do zadání, odevzdání úlohy by znamenalo pozvat k editaci mě jako vyučujícího. Já bych si udělala kopii odevzdané práce na GitHub, abych měla jistotu, že student dále práci nepřepisuje. - myslím si, že HackMD může být dobrým nástrojem pro distanční vzdělávání, lze také využít modu "live-stream", kde se dalším přispěvatelům ukazuje přesně, kde autor v dokumentu je ### Demo prezentace https://www.w3.org/2013/06/revealjs/?#/ ## Literatura 1. Gruber, John (2004). _Markdown_. DaringFireball.net. Dostupné online z: _https://daringfireball.net/projects/markdown/_ 2. Wikipedia - Ligthweight markup languages (2020). _Lightweight markup language_. Dostupné online z _https://en.wikipedia.org/wiki/Lightweight_markup_language_ 3. Wikipedia - Markdown (2020). _Markdown_. Dostupné online z: _https://en.wikipedia.org/wiki/Markdown_ 4. Pritchard, Adam (2017). _Markdown Cheatsheet_. Github.com. Dostupné online z: _https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet_ 5. Adam Pritchard (2017). _Markdown Here Cheatsheet_. Github.com. Dostupné online z: _https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet_ 6. Jelínek, Lukáš (2015). _Markdown: jednodušeji už to nejde_. Openoffice.cz. Dostupné online z: _https://www.openoffice.cz/recenze/markdown-jednoduseji-uz-to-nejde_ 7. Borek, Bernard (2012). _Markdown a jeho využití při vývoji_. DevBlog.cz. Dostupné online z: _https://devblog.cz/2012/04/markdown-a-jeho-vyuziti-pri-vyvoji/_ 8. Turkel, Dan (2020). _Nauč se X v Y minutách_. Learnxinyminutes.com. Dostupné online z: _https://learnxinyminutes.com/docs/cs-cz/markdown/_ 9. CommonMark.org (2019). Dostupné online z: _https://commonmark. 10. Stuart, Rackham (2017). _AsciiDoc Home Page_. Asciidoc.org. Dostupné online z: _http://asciidoc.org_ 11. CodiMD (2020). _CodiMD Documentation_. Hackmd.io. Dostupné online z: _https://hackmd.io/c/codimd-documentation/%2Fs%2Fcodimd-documentation_ 12. HackMD (2020). _Features_. Dostupné online z: _https://hackmd.io/features?both_ 13. Wills, Garret (2015). _Teaching a college course with Github_. Medium.com. Dostupné online z: _https://medium.com/education-posts/teaching-a-college-course-with-github-83fa978dc459_ 14. Hattab, Hakim El (2020). _The HTML Presentation Framework https://revealjs.com_. GitHub.com. Dostupné online z: _https://github.com/hakimel/reveal.js/_ --- # PREZENTACE --- ## Co je to Markdown - minimalistický značkovací jazyk - jednoduchá syntaxe - filozofie easy-to-read, easy-to-write ---- - vznikl v roce 2004 - autor jazyka John Gruber s přispěním Aarona Swartze - dokumenty s příponou .md --- ## Výhody Markdownu - psaní dobře čitelných textů bez složitého formátování - editace textů možná téměř všude --- ## Nevýhody Markdownu - vznikl bez podrobné specifikace - mnoho verzí markdownu ---- Github-flavored Markdown Gitlab-flavored Markdown MultiMarkdown CommonMark Markdown Extra a další --- ## CommonMark - cílem je sjednotit Markdown - standard Markdownu s podrobnou specifikací - CommonMark tutorial: https://commonmark.org/help/tutorial/ --- ## HackMD a CodiMD editory pro psaní Markdownu ---- __HackMD__ je webová verze editoru __CodiMD__ je self-hostovaná verze editoru dostupná na GitHubu (https://github.com/hackmdio/codimd) --- ## Demo prezentace napsané v Reveal.js, který používá vnitřně HackMD https://www.w3.org/2013/06/revealjs/?#/ Note: Demo prezentace vytvořené v Reveal.js, který se používá v HackMD pro tvorbu prezentací. --- Tato prezentace je napsaná v Markdownu. Stisknutím klávesy "S" se zapne prezentační mód včetně poznámek a náhledu následujícího slajdu --- Iveta Terezie Pelikánová iveta.terezie.pelikanova@fjfi.cvut.cz

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.