# markdeck {bgcss=sea-gradient x=0 y=0 rz=-.1 .light-on-dark} collaborative slide editing made easy ![](fab fa-markdown) ![](fab fa-docker) ![](fab fa-html5) ![](fab fa-css3) ![](fab fa-js-square) arne@hilmann.de • 2020 [![](fab fa-github)](https://github.com/arnehilmann/markdeck) [![](fab fa-docker)](https://hub.docker.com/r/arne/markdeck-pandoc/) [![](fas fa-envelope)](email:arne@hilmann.de) # features {rx=1 bgcss=sea-gradient .light-on-dark} converts markdown to complex
HTML5 slides should run on all *nix platforms,
windows? and MacOS # features, contd. {rx=0 ry=1} cool • graphical • easy • robust • collaborative • adaptable # cool looking {bg=white;assets/img/paperclip.gif .light-on-dark rx=-1 ry=0} leverages battle-proven
HTML5 presentation frameworks: revealjs • impressjs # graphical content as markdown
incl unicode ♥ emojis 😎 font-awesome ![](fas fa-desktop) images as asciiart
charts, diagrams, graphs, math, … # easy {rx=0 ry=-1} completely text-based
use your preferred editor/IDE auto-reload ► fast feedback # robust modify and present your slides
_without_
internet uplink ![](fas fa-wifi fa-stack-1x) ![](fas fa-slash fa-stack-1x) # collaborative {rx=1 ry=0} presentation-as-code use your normal version control system # adaptable you can always fall back to
plain HTML/CSS # code, highlighted ```java public class Example { public static final void main(String[] args) { // foo System.out.println("Hello World"); } } ``` # asciiart (ditaa) {.ltr rx=0 ry=1} ```{.nohighlight style="width: 40%; height: 100%; font-size: 40%;"} +-----------------------------+ | Node A | | | | +----------+ +----------+ | | | | | | | | | Frontend | | Foo | | | | | | | | | | | | {s} | | | +-----+----+ +----------+ | | ^ | | | | | \-service-\ | | | | +-----------------|-----------+ | +-----------------|-----------+ | Node B | | | /---------/ | | | | | v | | +-----+----+ +=---------+ | | | | | | | | | Frontend | | Bar | | | | | | | | | | | | {s} | | | +----------+ +----------+ | +-----------------------------+ ``` ► ```{.render_ditaa args="--transparent --scale 1 --font 'Raleway'"} +-----------------------------+ | Node A | | | | +----------+ +----------+ | | | | | | | | | Frontend | | Foo | | | | | | | | | | | | {s} | | | +-----+----+ +----------+ | | ^ | | | | | \-service-\ | | | | +-----------------|-----------+ | +-----------------|-----------+ | Node B | | | /---------/ | | | | | v | | +-----+----+ +=---------+ | | | | | | | | | Frontend | | Bar | | | | | | | | | | | | {s} | | | +----------+ +----------+ | +-----------------------------+ ``` # asciiart (a2s) {.ltr} ```{.nohighlight style="width: 40%;"} #--------------------. |[0] | | .---# .---# #---. | | |[1]| |[1]| |[1]| | | #---' #---' '---# | | ^ ^ ^ | #---+-----+-----+----# | | | | | | a 2 sketch | '--------------------# [0]: {"fill": "#933"} [1]: {"fill": "#bbb","a2s:delref":true,"a2s:type":"storage"} ``` ► ```render_a2s #--------------------. |[0] | | .---# .---# #---. | | |[1]| |[1]| |[1]| | | #---' #---' '---# | | ^ ^ ^ | #---+-----+-----+----# | | | | | | a 2 sketch | '--------------------# [0]: {"fill": "#933","a2s:delref":true} [1]: {"fill": "#bbb","a2s:delref":true,"a2s:type":"storage"} ``` # asciiart (sketchy) {.ltr} ```{.nohighlight style="width: 45%;"} #=----------------------------# |[0] | | Node | | | | #----------# #----------# | | | | |[1] | | | | front | | foo | | | | | | | | | | ^ | | | | | | | | | | | | #--|-------# #----------# | | | ^ | | | | | | '-- service --' | | | #-----------------------------# [0]: {"fill":"#fff","fillStyle":"solid","a2s:delref":true} [1]: {"fill":"#eee","fillStyle":"solid","a2s:delref":true} ``` ► ```render_a2sketch #-----------------------------# |[0] | | Node | | | | #----------# #----------# | | | | |[1] | | | |front | | foo | | | | | | | | | | ^ | | | | | | | | | | | | #--|-------# #----------# | | | ^ | | | | | | '-- service --' | | | #-----------------------------# [0]: {"fill":"#fff","fillStyle":"solid","a2s:delref":true} [1]: {"fill":"#eee","fillStyle":"solid","a2s:delref":true} ``` # asciiart (svgbob) {.ltr rx=-1 ry=0} ```{.nohighlight style="width: 40%; height: 100%;"} P * \ \ v0 \ v3 *----\-----* / v X \ / o \ / \ v1 *------------------* v2 ``` ► ```{.render_svgbob args="--scale 10 --font-family Raleway --font-size 24"} P * \ \ v0 \ v3 *----\-----* / v X \ / o \ / \ v1 *------------------* v2 ``` # asciiart (mermaid) {.ltr} ```{.nohighlight style="width: 40%; height: 100%; font-size: 40%;"} graph LR a --> b & c--> d ``` ► ```{.render_mermaid args="-w 400" style="font-size: 100%;"} graph LR a --> b & c--> d ``` # asciiart (plantuml) {.ltr} ```{.nohighlight style="width: 40%; font-size: 60%;"} @startuml Bob->Alice : hello Alice->Bob : oh, you again... Bob->Alice : ?? @enduml ``` ► ```{.render_plantuml args="-Sbackgroundcolor=transparent -SdefaultFontSize=24 -SdefaultFontName=Raleway"} @startuml Bob->Alice : hello Alice->Bob : oh, you again... Bob->Alice : ?? @enduml ``` # asciiart (graphviz) {.ltr} ```{.nohighlight style="width: 50%; font-size: 60%;"} digraph G { bgcolor=transparent; node [style=filled,color=white]; a -> b -> c; a -> c; b -> d; } ``` ► ```{.render_dot args="-Nfontname=Raleway"} digraph G { bgcolor=transparent; node [style=filled,color=white]; a -> b -> c; a -> c; b -> d; } ``` # charts (vega-lite) {.ltr rx=0 ry=-1} ```{.json style="width: 50%; font-size: 30%;"} { "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "width": 600, "height": 300, "mark": "area", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative", "scale": {"domain": [0, 100]}} } } ``` ► ```render_vegalite { "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "width": 250, "height": 300, "mark": "area", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative", "scale": {"domain": [0, 100]}} }, "config": { "axis": { "labelFont": "Raleway", "labelFontSize": 18, "titleFont": "Raleway", "titleFontSize": 24, "titleAngle": 0 }, "axisX": { "labelAngle": 0 } } } ``` # math equations ```{.nohighlight style="width: 100%; font-size: 70%;"} $a^2 + b^2 = c^2$ ``` $a^2 + b^2 = c^2$   ```{.nohighlight style="width: 100%; font-size: 70%;"} $$e = \mathop {\lim }\limits_{n \to \infty } \left( {1 + \frac{1}{n}} \right)^n$$ ``` $$e = \mathop {\lim }\limits_{n \to \infty } \left( {1 + \frac{1}{n}} \right)^n$$ # terminal session (asciinema) {rx=0 ry=-1 rz=0 bg=#121314} # Thank You! [pandoc](http://pandoc.org) • [reveal.js](http://lab.hakim.se/reveal-js/#/) • [impress.js](https://github.com/impress/impress.js)
[plantuml](http://plantuml.com) • [ditaamini](https://github.com/pepijnve/ditaa.git) • [graphviz](http://www.graphviz.org) • [svgbob](https://ivanceras.github.io/svgbob-editor/) • [asciinema](https://github.com/asciinema/asciinema-player)
[decktape](https://github.com/astefanutti/decktape) • [vega-lite](https://vega.github.io/vega-lite/) • [math-jax](https://www.mathjax.org) • [font awesome](https://fontawesome.com/)
🙃 # {bg=White;themes/example/img/wordcloud.svg .flush-right rx=1 ry=0} [`https://github.com/arnehilmann/markdeck`{.render_qr}](https://github.com/arnehilmann/markdeck) # markdeck {.skip skipon="reveal" scale=5 x=1.8} # {.skip skipon="reveal" scale=1 .flush-right rx=0 ry=.25} impress.js-variant # markdeck {x=3 y=-2.5 z=3000 rotate-y=60 scale=2 skipon="reveal"} collaborative slide editing made easy ![](fab fa-markdown) ![](fab fa-docker) ![](fab fa-html5) ![](fab fa-css3) ![](fab fa-js-square) ![](assets/img/buddy-egyptian.svg) # {x=0 y=0 scale=2 skipon="reveal" id=overview} # markdeck {skipon="impress" bgcss=sea-gradient .light-on-dark} collaborative slide editing made easy ![](fab fa-markdown) ![](fab fa-docker) ![](fab fa-html5) ![](fab fa-css3) ![](fab fa-js-square)