# HackMD and reveal.js <small> Maxime U Garcia ▸ <a href="https://github.com/maxulysse" style="color:white;" ><i class="fa fa-github"></i> @maxulysse</a> <a href="https://seqera.io/" style="color:white;" >Seqera Labs</a> ▸ Barcelona | Stockholm </small> --- ## Disclaimer * Only covering my own usage within nf-core * More can be done --- ## Markdown * A lightweight markup language * Keypoint is **readability** * Easily converted to HTML/PDF * Widely used in nf-core/documentations * Widely used in [nf-co.re](https://nf-co.re) website --- ## Some links * [A quick reference to the Markdown syntax](https://www.markdownguide.org/cheat-sheet/) * [A more complete Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) * [Official GitHub documentation for GitHub flavored Markdown](https://docs.github.com/en/get-started/writing-on-github) --- ## What is [HackMD](https://hackmd.io/)\? * Tool for real time collaboration on Markdown documents * Widely used during nf-core/hackathon * Widely used for nf-core/bytesize presentations --- ## What is [reveal.js](https://revealjs.com/)\? * HTML presentation framework * Widely used during nf-core/hackathon * Widely used for nf-core/bytesize presentations --- ## How to present\? * [How to create a slide deck](https://hackmd.io/s/how-to-create-slide-deck) * Follow syntax * Separate slides with * an empty line, three dashes, and another empty line * Navigate between slides with arrow keys * Or use space for next slide --- ## Small text use `<small></small>` tags <small> use `<small></small>` tags </small> --- ## Include a picture * If available online url can be used * Better if you have control of it * _i.e._ your own github repo * Upload to HackMD using the picture button  --- ## Use [fontawesome](https://fontawesome.com/) ``` <i class="fa fa-server"></i> ``` <i class="fa fa-server"></i> --- ## Include a background ```text! <!-- .slide: data-background="image.jpg"--> ``` <!-- .slide: data-background="https://maxulysse.github.io/assets/img/background/Sarek-Park-02.jpg" --> --- ## Add some opacity ```text! <!-- .slide: data-background="image.jpg" data-background-opacity="0.5" --> ``` <!-- .slide: data-background="https://maxulysse.github.io/assets/img/background/Sarek-Park-02.jpg" data-background-opacity="0.5" --> --- ## Export as PDF In slide mode, click on `print slide` at the bottom of the page --- ### Include your own css `{%hackmd BJGYP7K0Rlmj0jpYjbHExQ %}` Can also be used to include a slide deck, _i.e._ last slide of a presentation --- ``` {%hackmd BJGYP7K0Rlmj0jpYjbHExQ %} ``` --- ## Multi column ``` <div class="multi-column"> <div> </div> <div> </div> ... </div> ``` <div class="multi-column"> <div> <small> * Item 1 * Item 2 * Item 3 </small> </div> <div> <small> * Item A * Item B </small> </div> <div> <small> * Item i * Item ii * Item iii </small> </div> </div> --- ## Tips * When in doubt add more break lines * Reload/Relaunch * Lint Markdown * Printing works better using Chrome * Following proper syntax * Set up your username * @maxulysse ---