<!DOCTYPE html><html lang="it-IT"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta property="og:type" content="website"><meta name="twitter:card" content="summary"><style>.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@media screen{body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity .2s linear;-webkit-tap-highlight-color:transparent}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover{opacity:1}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:active{opacity:.6}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button:hover:not(:disabled){transition:none}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-prev{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTBMMjggNTBsNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button.bespoke-marp-presenter-info-page-next{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMzIgOTBsNDAtNDAtNDAtNDAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTQwIDcwSDIwVjUwbTIwIDBMMjAgNzBtNDAtNDBoMjB2MjBtLTIwIDBsMjAtMjAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button.exit[data-bespoke-marp-osc=fullscreen]{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6NXB4fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJhIiB4PSIxMCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI2MCIgcng9IjUuNjciLz48cGF0aCBjbGFzcz0iYSIgZD0iTTIwIDUwaDIwdjIwbS0yMCAwbDIwLTIwbTQwIDBINjBWMzBtMjAgMEw2MCA1MCIvPjwvc3ZnPg==")}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter]{background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS13aWR0aDo1cHh9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yMCA2MGgtNWE1IDUgMCAwMS01LTVWMjBhNSA1IDAgMDE1LTVoNjBhNSA1IDAgMDE1IDV2NU0zMCA4NWg2MCIvPjxyZWN0IHg9IjMwIiB5PSIzNSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiByeD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIi8+PHJlY3QgY2xhc3M9ImEiIHg9IjMwIiB5PSIzNSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiByeD0iNSIvPjxwYXRoIGNsYXNzPSJhIiBkPSJNNDAgNTBoNDBNNDAgNjBoMzAiLz48L3N2Zz4=") no-repeat 50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body,html{height:100%;margin:0}body{background:#000;overflow:hidden}svg.bespoke-marp-slide{opacity:0;pointer-events:none;z-index:-1}svg.bespoke-marp-slide.bespoke-marp-active{opacity:1;pointer-events:auto;z-index:0}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable]{display:none}svg.bespoke-marp-slide[data-bespoke-marp-load=hideable].bespoke-marp-active{display:block}[data-bespoke-marp-fragment=inactive]{visibility:hidden}body[data-bespoke-view=""] .bespoke-marp-parent,body[data-bespoke-view=next] .bespoke-marp-parent{bottom:0;left:0;position:absolute;right:0;top:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc{background:rgba(0,0,0,.65);border-radius:7px;bottom:50px;color:#fff;display:block;font-family:Helvetica,Arial,sans-serif;font-size:16px;left:50%;line-height:0;opacity:1;padding:12px;position:absolute;touch-action:manipulation;transform:translateX(-50%);transition:opacity .2s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:1;will-change:transform}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>*,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>*{margin-left:6px}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>:first-child,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>:first-child{margin-left:0}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span,body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span{opacity:.8}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>span[data-bespoke-marp-osc=page]{display:inline-block;min-width:140px;text-align:center}body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=""] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=fullscreen],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=presenter],body[data-bespoke-view=next] .bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev]{height:32px;line-height:32px;width:32px}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive{cursor:none}body[data-bespoke-view=""] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc,body[data-bespoke-view=next] .bespoke-marp-parent.bespoke-marp-inactive>.bespoke-marp-osc{opacity:0;pointer-events:none}body[data-bespoke-view=""] svg.bespoke-marp-slide,body[data-bespoke-view=next] svg.bespoke-marp-slide{height:100%;left:0;position:absolute;top:0;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent{background:#222;display:flex;height:5px;width:100%}body[data-bespoke-view=""] .bespoke-progress-parent+.bespoke-marp-parent{top:5px}body[data-bespoke-view=""] .bespoke-progress-parent .bespoke-progress-bar{flex:0 0 0;background:#0288d1;transition:flex-basis .2s cubic-bezier(0,1,1,1)}body[data-bespoke-view=next]{background:transparent}body[data-bespoke-view=presenter]{background:#161616}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container{height:100%;left:0;position:absolute;top:0;width:100%;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:minmax(140px,1fr) 2fr 3em;grid-template-areas:"current next" "current note" "info note"}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent{grid-area:current;position:relative;overflow:hidden}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide{height:calc(100% - 40px);left:20px;position:absolute;pointer-events:none;top:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-parent svg.bespoke-marp-slide.bespoke-marp-active{-webkit-filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container{background:#222;cursor:pointer;display:none;grid-area:next;overflow:hidden;position:relative}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-next-container iframe.bespoke-marp-presenter-next{background:transparent;border:0;display:block;-webkit-filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));height:calc(100% - 40px);left:20px;position:absolute;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:20px;width:calc(100% - 40px)}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container{background:#222;color:#ddd;grid-area:note}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note{margin:20px;width:calc(100% - 40px);height:calc(100% - 40px);box-sizing:border-box;overflow:auto;padding-right:3px;white-space:pre-wrap;word-wrap:break-word;scrollbar-width:thin;scrollbar-color:hsla(0,0%,86.7%,.5) transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar{width:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-track{background:transparent}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note::-webkit-scrollbar-thumb{background:hsla(0,0%,86.7%,.5);border-radius:6px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note:empty{pointer-events:none}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note.active{display:block}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:first-child{margin-top:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-note-container .bespoke-marp-note p:last-child{margin-bottom:0}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container{align-items:center;box-sizing:border-box;color:#ddd;display:flex;flex-wrap:nowrap;grid-area:info;justify-content:center;padding:0 10px}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time,body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{display:block;box-sizing:border-box;padding:0 10px;white-space:nowrap;width:100%}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container button{height:1.5em;line-height:1.5em;width:1.5em}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page{order:2;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-page .bespoke-marp-presenter-info-page-text{display:inline-block;min-width:120px;text-align:center}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-time{color:#999;order:1;text-align:left}body[data-bespoke-view=presenter] .bespoke-marp-presenter-container .bespoke-marp-presenter-info-container .bespoke-marp-presenter-info-timer{color:#999;order:3;text-align:right}}@media print{.bespoke-marp-presenter-info-container,.bespoke-marp-presenter-next-container,.bespoke-marp-presenter-note-container{display:none}}</style><style>@charset "UTF-8";@import url("https://fonts.googleapis.com/css?family=Lato:400,900|Roboto+Mono:400,700&display=swap");div#p>svg>foreignObject>section{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}div#p>svg>foreignObject>section:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}div#p>svg>foreignObject>section:not([data-marpit-pagination]):after{display:none}/* Normalization */div#p>svg>foreignObject>section h1{font-size:2em;margin:0.67em 0}div#p>svg>foreignObject>section video::-webkit-media-controls{will-change:transform}@page{size:1280px 720px;margin:0}@media print{body,html{background-color:#fff;margin:0;page-break-inside:avoid;break-inside:avoid-page}div#p>svg>foreignObject>section{page-break-before:always;break-before:page}div#p>svg>foreignObject>section,div#p>svg>foreignObject>section *{-webkit-print-color-adjust:exact!important;color-adjust:exact!important}div#p>svg[data-marpit-svg]{display:block;height:100vh;width:100vw}}@font-face{font-family:KaTeX_AMS;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_AMS-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_AMS-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_AMS-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Bold.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Bold.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Bold.ttf') format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Caligraphic-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Bold.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Bold.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Bold.ttf') format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Fraktur-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Main;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Bold.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Bold.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Bold.ttf') format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Main;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-BoldItalic.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-BoldItalic.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-BoldItalic.ttf') format("truetype");font-weight:700;font-style:italic}@font-face{font-family:KaTeX_Main;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Italic.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Italic.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Italic.ttf') format("truetype");font-weight:400;font-style:italic}@font-face{font-family:KaTeX_Main;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Main-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Math;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-BoldItalic.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-BoldItalic.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-BoldItalic.ttf') format("truetype");font-weight:700;font-style:italic}@font-face{font-family:KaTeX_Math;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-Italic.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-Italic.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Math-Italic.ttf') format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"KaTeX_SansSerif";src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Bold.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Bold.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Bold.ttf') format("truetype");font-weight:700;font-style:normal}@font-face{font-family:"KaTeX_SansSerif";src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Italic.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Italic.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Italic.ttf') format("truetype");font-weight:400;font-style:italic}@font-face{font-family:"KaTeX_SansSerif";src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_SansSerif-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Script;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Script-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Script-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Script-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size1;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size1-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size1-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size1-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size2;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size2-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size2-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size2-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size3;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size3-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size3-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size3-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size4;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size4-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size4-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Size4-Regular.ttf') format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Typewriter;src:url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Typewriter-Regular.woff2') format("woff2"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Typewriter-Regular.woff') format("woff"),url('https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/fonts/KaTeX_Typewriter-Regular.ttf') format("truetype");font-weight:400;font-style:normal}div#p>svg>foreignObject>section .katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}div#p>svg>foreignObject>section .katex *{-ms-high-contrast-adjust:none!important}div#p>svg>foreignObject>section .katex .katex-version:after{content:"0.11.1"}div#p>svg>foreignObject>section .katex .katex-mathml{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}div#p>svg>foreignObject>section .katex .katex-html>.newline{display:block}div#p>svg>foreignObject>section .katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}div#p>svg>foreignObject>section .katex .base,div#p>svg>foreignObject>section .katex .strut{display:inline-block}div#p>svg>foreignObject>section .katex .textbf{font-weight:700}div#p>svg>foreignObject>section .katex .textit{font-style:italic}div#p>svg>foreignObject>section .katex .textrm{font-family:KaTeX_Main}div#p>svg>foreignObject>section .katex .textsf{font-family:KaTeX_SansSerif}div#p>svg>foreignObject>section .katex .texttt{font-family:KaTeX_Typewriter}div#p>svg>foreignObject>section .katex .mathdefault{font-family:KaTeX_Math;font-style:italic}div#p>svg>foreignObject>section .katex .mathit{font-family:KaTeX_Main;font-style:italic}div#p>svg>foreignObject>section .katex .mathrm{font-style:normal}div#p>svg>foreignObject>section .katex .mathbf{font-family:KaTeX_Main;font-weight:700}div#p>svg>foreignObject>section .katex .boldsymbol{font-family:KaTeX_Math;font-weight:700;font-style:italic}div#p>svg>foreignObject>section .katex .amsrm,div#p>svg>foreignObject>section .katex .mathbb,div#p>svg>foreignObject>section .katex .textbb{font-family:KaTeX_AMS}div#p>svg>foreignObject>section .katex .mathcal{font-family:KaTeX_Caligraphic}div#p>svg>foreignObject>section .katex .mathfrak,div#p>svg>foreignObject>section .katex .textfrak{font-family:KaTeX_Fraktur}div#p>svg>foreignObject>section .katex .mathtt{font-family:KaTeX_Typewriter}div#p>svg>foreignObject>section .katex .mathscr,div#p>svg>foreignObject>section .katex .textscr{font-family:KaTeX_Script}div#p>svg>foreignObject>section .katex .mathsf,div#p>svg>foreignObject>section .katex .textsf{font-family:KaTeX_SansSerif}div#p>svg>foreignObject>section .katex .mathboldsf,div#p>svg>foreignObject>section .katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}div#p>svg>foreignObject>section .katex .mathitsf,div#p>svg>foreignObject>section .katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}div#p>svg>foreignObject>section .katex .mainrm{font-family:KaTeX_Main;font-style:normal}div#p>svg>foreignObject>section .katex .vlist-t{display:inline-table;table-layout:fixed}div#p>svg>foreignObject>section .katex .vlist-r{display:table-row}div#p>svg>foreignObject>section .katex .vlist{display:table-cell;vertical-align:bottom;position:relative}div#p>svg>foreignObject>section .katex .vlist>span{display:block;height:0;position:relative}div#p>svg>foreignObject>section .katex .vlist>span>span{display:inline-block}div#p>svg>foreignObject>section .katex .vlist>span>.pstrut{overflow:hidden;width:0}div#p>svg>foreignObject>section .katex .vlist-t2{margin-right:-2px}div#p>svg>foreignObject>section .katex .vlist-s{display:table-cell;vertical-align:bottom;font-size:1px;width:2px;min-width:2px}div#p>svg>foreignObject>section .katex .msupsub{text-align:left}div#p>svg>foreignObject>section .katex .mfrac>span>span{text-align:center}div#p>svg>foreignObject>section .katex .mfrac .frac-line{display:inline-block;width:100%;border-bottom-style:solid}div#p>svg>foreignObject>section .katex .hdashline,div#p>svg>foreignObject>section .katex .hline,div#p>svg>foreignObject>section .katex .mfrac .frac-line,div#p>svg>foreignObject>section .katex .overline .overline-line,div#p>svg>foreignObject>section .katex .rule,div#p>svg>foreignObject>section .katex .underline .underline-line{min-height:1px}div#p>svg>foreignObject>section .katex .mspace{display:inline-block}div#p>svg>foreignObject>section .katex .clap,div#p>svg>foreignObject>section .katex .llap,div#p>svg>foreignObject>section .katex .rlap{width:0;position:relative}div#p>svg>foreignObject>section .katex .clap>.inner,div#p>svg>foreignObject>section .katex .llap>.inner,div#p>svg>foreignObject>section .katex .rlap>.inner{position:absolute}div#p>svg>foreignObject>section .katex .clap>.fix,div#p>svg>foreignObject>section .katex .llap>.fix,div#p>svg>foreignObject>section .katex .rlap>.fix{display:inline-block}div#p>svg>foreignObject>section .katex .llap>.inner{right:0}div#p>svg>foreignObject>section .katex .clap>.inner,div#p>svg>foreignObject>section .katex .rlap>.inner{left:0}div#p>svg>foreignObject>section .katex .clap>.inner>span{margin-left:-50%;margin-right:50%}div#p>svg>foreignObject>section .katex .rule{display:inline-block;border:0 solid;position:relative}div#p>svg>foreignObject>section .katex .hline,div#p>svg>foreignObject>section .katex .overline .overline-line,div#p>svg>foreignObject>section .katex .underline .underline-line{display:inline-block;width:100%;border-bottom-style:solid}div#p>svg>foreignObject>section .katex .hdashline{display:inline-block;width:100%;border-bottom-style:dashed}div#p>svg>foreignObject>section .katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size1{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size2{font-size:1.2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size3{font-size:1.4em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size4{font-size:1.6em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size5{font-size:1.8em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size6{font-size:2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size7{font-size:2.4em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size8{font-size:2.88em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size9{font-size:3.456em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size10{font-size:4.148em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size1.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size1.size11{font-size:4.976em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size1{font-size:.83333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size2{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size3{font-size:1.16666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size4{font-size:1.33333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size5{font-size:1.5em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size6{font-size:1.66666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size7{font-size:2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size8{font-size:2.4em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size9{font-size:2.88em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size10{font-size:3.45666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size2.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size2.size11{font-size:4.14666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size1{font-size:.71428571em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size2{font-size:.85714286em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size3{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size4{font-size:1.14285714em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size5{font-size:1.28571429em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size6{font-size:1.42857143em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size7{font-size:1.71428571em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size8{font-size:2.05714286em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size9{font-size:2.46857143em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size10{font-size:2.96285714em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size3.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size3.size11{font-size:3.55428571em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size1{font-size:.625em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size2{font-size:.75em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size3{font-size:.875em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size4{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size5{font-size:1.125em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size6{font-size:1.25em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size7{font-size:1.5em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size8{font-size:1.8em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size9{font-size:2.16em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size10{font-size:2.5925em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size4.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size4.size11{font-size:3.11em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size1{font-size:.55555556em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size2{font-size:.66666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size3{font-size:.77777778em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size4{font-size:.88888889em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size5{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size6{font-size:1.11111111em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size7{font-size:1.33333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size8{font-size:1.6em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size9{font-size:1.92em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size10{font-size:2.30444444em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size5.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size5.size11{font-size:2.76444444em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size1{font-size:.5em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size2{font-size:.6em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size3{font-size:.7em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size4{font-size:.8em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size5{font-size:.9em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size6{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size7{font-size:1.2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size8{font-size:1.44em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size9{font-size:1.728em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size10{font-size:2.074em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size6.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size6.size11{font-size:2.488em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size1{font-size:.41666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size2{font-size:.5em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size3{font-size:.58333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size4{font-size:.66666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size5{font-size:.75em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size6{font-size:.83333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size7{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size8{font-size:1.2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size9{font-size:1.44em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size10{font-size:1.72833333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size7.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size7.size11{font-size:2.07333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size1{font-size:.34722222em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size2{font-size:.41666667em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size3{font-size:.48611111em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size4{font-size:.55555556em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size5{font-size:.625em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size6{font-size:.69444444em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size7{font-size:.83333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size8{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size9{font-size:1.2em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size10{font-size:1.44027778em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size8.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size8.size11{font-size:1.72777778em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size1{font-size:.28935185em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size2{font-size:.34722222em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size3{font-size:.40509259em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size4{font-size:.46296296em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size5{font-size:.52083333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size6{font-size:.5787037em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size7{font-size:.69444444em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size8{font-size:.83333333em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size9{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size10{font-size:1.20023148em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size9.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size9.size11{font-size:1.43981481em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size1{font-size:.24108004em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size2{font-size:.28929605em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size3{font-size:.33751205em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size4{font-size:.38572806em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size5{font-size:.43394407em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size6{font-size:.48216008em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size7{font-size:.57859209em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size8{font-size:.69431051em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size9{font-size:.83317261em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size10{font-size:1em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size10.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size10.size11{font-size:1.19961427em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size1,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size1{font-size:.20096463em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size2,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size2{font-size:.24115756em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size3,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size3{font-size:.28135048em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size4,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size4{font-size:.32154341em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size5,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size5{font-size:.36173633em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size6,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size6{font-size:.40192926em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size7,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size7{font-size:.48231511em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size8,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size8{font-size:.57877814em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size9,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size9{font-size:.69453376em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size10,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size10{font-size:.83360129em}div#p>svg>foreignObject>section .katex .fontsize-ensurer.reset-size11.size11,div#p>svg>foreignObject>section .katex .sizing.reset-size11.size11{font-size:1em}div#p>svg>foreignObject>section .katex .delimsizing.size1{font-family:KaTeX_Size1}div#p>svg>foreignObject>section .katex .delimsizing.size2{font-family:KaTeX_Size2}div#p>svg>foreignObject>section .katex .delimsizing.size3{font-family:KaTeX_Size3}div#p>svg>foreignObject>section .katex .delimsizing.size4{font-family:KaTeX_Size4}div#p>svg>foreignObject>section .katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}div#p>svg>foreignObject>section .katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}div#p>svg>foreignObject>section .katex .nulldelimiter{display:inline-block;width:.12em}div#p>svg>foreignObject>section .katex .delimcenter,div#p>svg>foreignObject>section .katex .op-symbol{position:relative}div#p>svg>foreignObject>section .katex .op-symbol.small-op{font-family:KaTeX_Size1}div#p>svg>foreignObject>section .katex .op-symbol.large-op{font-family:KaTeX_Size2}div#p>svg>foreignObject>section .katex .accent>.vlist-t,div#p>svg>foreignObject>section .katex .op-limits>.vlist-t{text-align:center}div#p>svg>foreignObject>section .katex .accent .accent-body{position:relative}div#p>svg>foreignObject>section .katex .accent .accent-body:not(.accent-full){width:0}div#p>svg>foreignObject>section .katex .overlay{display:block}div#p>svg>foreignObject>section .katex .mtable .vertical-separator{display:inline-block;min-width:1px}div#p>svg>foreignObject>section .katex .mtable .arraycolsep{display:inline-block}div#p>svg>foreignObject>section .katex .mtable .col-align-c>.vlist-t{text-align:center}div#p>svg>foreignObject>section .katex .mtable .col-align-l>.vlist-t{text-align:left}div#p>svg>foreignObject>section .katex .mtable .col-align-r>.vlist-t{text-align:right}div#p>svg>foreignObject>section .katex .svg-align{text-align:left}div#p>svg>foreignObject>section .katex svg{display:block;position:absolute;width:100%;height:inherit;fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}div#p>svg>foreignObject>section .katex svg path{stroke:none}div#p>svg>foreignObject>section .katex img{border-style:none;min-width:0;min-height:0;max-width:none;max-height:none}div#p>svg>foreignObject>section .katex .stretchy{width:100%;display:block;position:relative;overflow:hidden}div#p>svg>foreignObject>section .katex .stretchy:after,div#p>svg>foreignObject>section .katex .stretchy:before{content:""}div#p>svg>foreignObject>section .katex .hide-tail{width:100%;position:relative;overflow:hidden}div#p>svg>foreignObject>section .katex .halfarrow-left{left:0}div#p>svg>foreignObject>section .katex .halfarrow-left,div#p>svg>foreignObject>section .katex .halfarrow-right{position:absolute;width:50.2%;overflow:hidden}div#p>svg>foreignObject>section .katex .halfarrow-right{right:0}div#p>svg>foreignObject>section .katex .brace-left{position:absolute;left:0;width:25.1%;overflow:hidden}div#p>svg>foreignObject>section .katex .brace-center{position:absolute;left:25%;width:50%;overflow:hidden}div#p>svg>foreignObject>section .katex .brace-right{position:absolute;right:0;width:25.1%;overflow:hidden}div#p>svg>foreignObject>section .katex .x-arrow-pad{padding:0 .5em}div#p>svg>foreignObject>section .katex .mover,div#p>svg>foreignObject>section .katex .munder,div#p>svg>foreignObject>section .katex .x-arrow{text-align:center}div#p>svg>foreignObject>section .katex .boxpad{padding:0 .3em}div#p>svg>foreignObject>section .katex .fbox,div#p>svg>foreignObject>section .katex .fcolorbox{box-sizing:border-box;border:.04em solid}div#p>svg>foreignObject>section .katex .cancel-pad{padding:0 .2em}div#p>svg>foreignObject>section .katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}div#p>svg>foreignObject>section .katex .sout{border-bottom-style:solid;border-bottom-width:.08em}div#p>svg>foreignObject>section .katex-display{display:block;margin:1em 0;text-align:center}div#p>svg>foreignObject>section .katex-display>.katex{display:block;text-align:center;white-space:nowrap}div#p>svg>foreignObject>section .katex-display>.katex>.katex-html{display:block;position:relative}div#p>svg>foreignObject>section .katex-display>.katex>.katex-html>.tag{position:absolute;right:0}div#p>svg>foreignObject>section .katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}div#p>svg>foreignObject>section .katex-display.fleqn>.katex{text-align:left}div#p>svg>foreignObject>section .katex-display{margin:0}div#p>svg>foreignObject>section svg[data-marp-fitting-math]{--preserve-aspect-ratio:xMidYMid meet}div#p>svg>foreignObject>section svg[data-marp-fitting-math] [data-marp-fitting-svg-content]{margin:0 auto}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{display:block;height:auto;width:100%}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{position:static}}div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{content:""}@supports (-ms-ime-align:auto){div#p>svg>foreignObject>section svg[data-marp-fitting=svg].__reflow__{position:relative}}div#p>svg>foreignObject>section [data-marp-fitting-svg-content]{display:table;white-space:nowrap}div#p>svg>foreignObject>section [data-marp-fitting-svg-content-wrap]{white-space:pre}div#p>svg>foreignObject>section img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}
/*!
* Marp / Marpit Gaia theme.
*
* @theme gaia
* @author Yuki Hattori
*
* @auto-scaling true
* @size 4:3 960px 720px
*/div#p>svg>foreignObject>section .hljs{display:block;overflow-x:auto;padding:.5em;background:#000;color:#f8f8f8}div#p>svg>foreignObject>section .hljs-comment,div#p>svg>foreignObject>section .hljs-quote{color:#aeaeae;font-style:italic}div#p>svg>foreignObject>section .hljs-keyword,div#p>svg>foreignObject>section .hljs-selector-tag,div#p>svg>foreignObject>section .hljs-type{color:#e28964}div#p>svg>foreignObject>section .hljs-string{color:#65b042}div#p>svg>foreignObject>section .hljs-subst{color:#daefa3}div#p>svg>foreignObject>section .hljs-link,div#p>svg>foreignObject>section .hljs-regexp{color:#e9c062}div#p>svg>foreignObject>section .hljs-name,div#p>svg>foreignObject>section .hljs-section,div#p>svg>foreignObject>section .hljs-tag,div#p>svg>foreignObject>section .hljs-title{color:#89bdff}div#p>svg>foreignObject>section .hljs-class .hljs-title,div#p>svg>foreignObject>section .hljs-doctag{text-decoration:underline}div#p>svg>foreignObject>section .hljs-bullet,div#p>svg>foreignObject>section .hljs-number,div#p>svg>foreignObject>section .hljs-symbol{color:#3387cc}div#p>svg>foreignObject>section .hljs-params,div#p>svg>foreignObject>section .hljs-template-variable,div#p>svg>foreignObject>section .hljs-variable{color:#3e87e3}div#p>svg>foreignObject>section .hljs-attribute{color:#cda869}div#p>svg>foreignObject>section .hljs-meta{color:#8996a8}div#p>svg>foreignObject>section .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}div#p>svg>foreignObject>section .hljs-addition{background-color:#253b22;color:#f8f8f8}div#p>svg>foreignObject>section .hljs-deletion{background-color:#420e09;color:#f8f8f8}div#p>svg>foreignObject>section .hljs-selector-class{color:#9b703f}div#p>svg>foreignObject>section .hljs-selector-id{color:#8b98ab}div#p>svg>foreignObject>section .hljs-emphasis{font-style:italic}div#p>svg>foreignObject>section .hljs-strong{font-weight:700}div#p>svg>foreignObject>section svg[data-marp-fitting=svg]{max-height:580px}div#p>svg>foreignObject>section h1,div#p>svg>foreignObject>section h2,div#p>svg>foreignObject>section h3,div#p>svg>foreignObject>section h4,div#p>svg>foreignObject>section h5,div#p>svg>foreignObject>section h6{margin:.5em 0 0}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{font-weight:inherit}div#p>svg>foreignObject>section h1{font-size:1.8em}div#p>svg>foreignObject>section h2{font-size:1.5em}div#p>svg>foreignObject>section h3{font-size:1.3em}div#p>svg>foreignObject>section h4{font-size:1.1em}div#p>svg>foreignObject>section h5{font-size:1em}div#p>svg>foreignObject>section h6{font-size:.9em}div#p>svg>foreignObject>section blockquote,div#p>svg>foreignObject>section p{margin:1em 0 0}div#p>svg>foreignObject>section ol>li,div#p>svg>foreignObject>section ul>li{margin:.3em 0 0}div#p>svg>foreignObject>section ol>li>p,div#p>svg>foreignObject>section ul>li>p{margin:.6em 0 0}div#p>svg>foreignObject>section code{display:inline-block;font-family:Roboto Mono,monospace;font-size:.8em;letter-spacing:0;margin:-.1em .15em;padding:.1em .2em;vertical-align:baseline}div#p>svg>foreignObject>section pre{display:block;margin:1em 0 0;min-height:1em;overflow:visible}div#p>svg>foreignObject>section pre code{box-sizing:border-box;margin:0;min-width:100%;padding:.5em;font-size:.7em}div#p>svg>foreignObject>section pre code svg[data-marp-fitting=svg]{max-height:calc(580px - 1em)}div#p>svg>foreignObject>section blockquote{margin:1em 0 0;padding:0 1em;position:relative}div#p>svg>foreignObject>section blockquote:after,div#p>svg>foreignObject>section blockquote:before{content:"“";display:block;font-family:Times New Roman,serif;font-weight:700;position:absolute}div#p>svg>foreignObject>section blockquote:before{top:0;left:0}div#p>svg>foreignObject>section blockquote:after{right:0;bottom:0;transform:rotate(180deg)}div#p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#p>svg>foreignObject>section mark{background:transparent}div#p>svg>foreignObject>section table{border-spacing:0;border-collapse:collapse;margin:1em 0 0}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{padding:.2em .4em;border-width:1px;border-style:solid}div#p>svg>foreignObject>section{background-image:linear-gradient(135deg,hsla(0,0%,53.3%,0),hsla(0,0%,53.3%,.02) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05));font-size:35px;font-family:Lato,Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;height:720px;line-height:1.35;letter-spacing:1.25px;padding:70px;width:1280px;word-wrap:break-word;color:#455a64;background-color:#fff8e1}div#p>svg>foreignObject>section>:first-child,div#p>svg>foreignObject>section>header:first-child+*{margin-top:0}div#p>svg>foreignObject>section a,div#p>svg>foreignObject>section mark{color:#0288d1}div#p>svg>foreignObject>section code{background:#6a7a7d;color:#fff8e1}div#p>svg>foreignObject>section h1 strong,div#p>svg>foreignObject>section h2 strong,div#p>svg>foreignObject>section h3 strong,div#p>svg>foreignObject>section h4 strong,div#p>svg>foreignObject>section h5 strong,div#p>svg>foreignObject>section h6 strong{color:#0288d1}div#p>svg>foreignObject>section pre>code{background:#455a64}div#p>svg>foreignObject>section blockquote:after,div#p>svg>foreignObject>section blockquote:before,div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header,div#p>svg>foreignObject>section section:after{color:#6a7a7d}div#p>svg>foreignObject>section table td,div#p>svg>foreignObject>section table th{border-color:#455a64}div#p>svg>foreignObject>section table thead th{background:#455a64;color:#fff8e1}div#p>svg>foreignObject>section table tbody>tr:nth-child(odd) td,div#p>svg>foreignObject>section table tbody>tr:nth-child(odd) th{background:rgba(69,90,100,.1)}div#p>svg>foreignObject>section.invert{color:#fff8e1;background-color:#455a64}div#p>svg>foreignObject>section.invert a,div#p>svg>foreignObject>section.invert mark{color:#81d4fa}div#p>svg>foreignObject>section.invert code{background:#dad8c8;color:#455a64}div#p>svg>foreignObject>section.invert h1 strong,div#p>svg>foreignObject>section.invert h2 strong,div#p>svg>foreignObject>section.invert h3 strong,div#p>svg>foreignObject>section.invert h4 strong,div#p>svg>foreignObject>section.invert h5 strong,div#p>svg>foreignObject>section.invert h6 strong{color:#81d4fa}div#p>svg>foreignObject>section.invert pre>code{background:#fff8e1}div#p>svg>foreignObject>section.invert blockquote:after,div#p>svg>foreignObject>section.invert blockquote:before,div#p>svg>foreignObject>section.invert footer,div#p>svg>foreignObject>section.invert header,div#p>svg>foreignObject>section.invert section:after{color:#dad8c8}div#p>svg>foreignObject>section.invert table td,div#p>svg>foreignObject>section.invert table th{border-color:#fff8e1}div#p>svg>foreignObject>section.invert table thead th{background:#fff8e1;color:#455a64}div#p>svg>foreignObject>section.invert table tbody>tr:nth-child(odd) td,div#p>svg>foreignObject>section.invert table tbody>tr:nth-child(odd) th{background:rgba(255,248,225,.1)}div#p>svg>foreignObject>section.gaia{color:#fff8e1;background-color:#0288d1}div#p>svg>foreignObject>section.gaia a,div#p>svg>foreignObject>section.gaia mark{color:#81d4fa}div#p>svg>foreignObject>section.gaia code{background:#cce2de;color:#0288d1}div#p>svg>foreignObject>section.gaia h1 strong,div#p>svg>foreignObject>section.gaia h2 strong,div#p>svg>foreignObject>section.gaia h3 strong,div#p>svg>foreignObject>section.gaia h4 strong,div#p>svg>foreignObject>section.gaia h5 strong,div#p>svg>foreignObject>section.gaia h6 strong{color:#81d4fa}div#p>svg>foreignObject>section.gaia pre>code{background:#fff8e1}div#p>svg>foreignObject>section.gaia blockquote:after,div#p>svg>foreignObject>section.gaia blockquote:before,div#p>svg>foreignObject>section.gaia footer,div#p>svg>foreignObject>section.gaia header,div#p>svg>foreignObject>section.gaia section:after{color:#cce2de}div#p>svg>foreignObject>section.gaia table td,div#p>svg>foreignObject>section.gaia table th{border-color:#fff8e1}div#p>svg>foreignObject>section.gaia table thead th{background:#fff8e1;color:#0288d1}div#p>svg>foreignObject>section.gaia table tbody>tr:nth-child(odd) td,div#p>svg>foreignObject>section.gaia table tbody>tr:nth-child(odd) th{background:rgba(255,248,225,.1)}div#p>svg>foreignObject>section.lead{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}div#p>svg>foreignObject>section.lead h1,div#p>svg>foreignObject>section.lead h2,div#p>svg>foreignObject>section.lead h3,div#p>svg>foreignObject>section.lead h4,div#p>svg>foreignObject>section.lead h5,div#p>svg>foreignObject>section.lead h6{text-align:center}div#p>svg>foreignObject>section.lead h1 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h2 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h3 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h4 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h5 svg[data-marp-fitting=svg],div#p>svg>foreignObject>section.lead h6 svg[data-marp-fitting=svg]{--preserve-aspect-ratio:xMidYMid meet}div#p>svg>foreignObject>section.lead p{text-align:center}div#p>svg>foreignObject>section.lead blockquote>h1,div#p>svg>foreignObject>section.lead blockquote>h2,div#p>svg>foreignObject>section.lead blockquote>h3,div#p>svg>foreignObject>section.lead blockquote>h4,div#p>svg>foreignObject>section.lead blockquote>h5,div#p>svg>foreignObject>section.lead blockquote>h6,div#p>svg>foreignObject>section.lead blockquote>p{text-align:left}div#p>svg>foreignObject>section.lead blockquote svg[data-marp-fitting=svg]:not([data-marp-fitting-math]){--preserve-aspect-ratio:xMinYMin meet}div#p>svg>foreignObject>section.lead ol>li>p,div#p>svg>foreignObject>section.lead ul>li>p{text-align:left}div#p>svg>foreignObject>section.lead table{margin-left:auto;margin-right:auto}div#p>svg>foreignObject>section:after,div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{box-sizing:border-box;font-size:66%;height:70px;line-height:50px;overflow:hidden;padding:10px 25px;position:absolute}div#p>svg>foreignObject>section header{top:0}div#p>svg>foreignObject>section footer,div#p>svg>foreignObject>section header{left:0;right:0}div#p>svg>foreignObject>section footer{bottom:0}div#p>svg>foreignObject>section:after{right:0;bottom:0;font-size:80%}div#p>svg>foreignObject>section img[alt~=center]{display:block;margin-left:auto;margin-right:auto;margin-bottom:10;margin-top:-55px}div#p>svg>foreignObject>section[data-marpit-scope-bJvPk7tf] a{color:green}div#p>svg>foreignObject>section img[alt~=center]{display:block;margin-left:auto;margin-right:auto;margin-bottom:10;margin-top:-55px}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]{display:block!important;padding:0!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#p>svg>foreignObject>section[data-marpit-advanced-background=content],div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id="p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>My working space at time of pandemic </span></foreignObject></svg></h1>
<p>From <img src="https://avatars1.githubusercontent.com/u/20685754?v=4" alt="h:40" style="height:40px;" /> Marp Presenter to <img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode.png" alt="h:40" style="height:40px;" /> Visual Studio Code (<img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/>)<br />
<em>My cruise <img class="emoji" draggable="false" alt="⛵" src="https://twemoji.maxcdn.com/2/svg/26f5.svg" data-marp-twemoji=""/>️ to increase my productivity</em>.</p>
<br />
<h5>Carmine Spagnuolo, PhD</h5>
<br />
<p><img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/topo.png" alt="h:150" style="height:150px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="2" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/mysea.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-theme="gaia" data-marpit-pagination="2" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/chart.png" alt="w:650 center" style="width:650px;" /><br />
</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="2" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="3" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:33%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://avatars1.githubusercontent.com/u/20685754?v=4");background-size:50%;"></figure></div></section></foreignObject><foreignObject width="67%" height="720"><section id="3" data-paginate="true" data-theme="gaia" data-marpit-pagination="3" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:33%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>First of all</h1>
<h4><em>How to build this presentation?</em></h4>
<p>I was looking for a tool to quickly <img class="emoji" draggable="false" alt="⏩" src="https://twemoji.maxcdn.com/2/svg/23e9.svg" data-marp-twemoji=""/> write my presentation.</p>
<h5>Marp: Markdown presentation ecosystem</h5>
<p><img class="emoji" draggable="false" alt="🔗" src="https://twemoji.maxcdn.com/2/svg/1f517.svg" data-marp-twemoji=""/> <a href="https://github.com/marp-team/marp">https://github.com/marp-team/marp</a></p>
<h1><img class="emoji" draggable="false" alt="👀" src="https://twemoji.maxcdn.com/2/svg/1f440.svg" data-marp-twemoji=""/></h1>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">bg right:33% 50%</span>](<span class="hljs-link">https://avatars1.githubusercontent.com/u/20685754?v=4</span>)
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="3" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-theme="gaia" data-marpit-pagination="4" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>History of Marp</h1>
<ul>
<li>I remember Marp as a Markdown presenter for R Studio code.</li>
<li><strong>Marp</strong> is available on</li>
<li><img class="emoji" draggable="false" alt="📺" src="https://twemoji.maxcdn.com/2/svg/1f4fa.svg" data-marp-twemoji=""/> <a href="https://github.com/marp-team/marp-cli">Marp CLI</a>: Convert Markdown into HTML, PDF, PPTX, and images</li>
<li><img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> <a href="https://github.com/marp-team/marp-vscode">Marp for VS Code</a>: Live-preview your deck while editting
<ul>
<li><img class="emoji" draggable="false" alt="🌐" src="https://twemoji.maxcdn.com/2/svg/1f310.svg" data-marp-twemoji=""/> <a href="https://github.com/marp-team/marp-web">Web client</a></li>
<li>🗄 <a href="https://github.com/marp-team/marp-react">React render</a></li>
<li>🗄 <a href="https://github.com/marp-team/marp-vue">Vue render</a></li>
<li>and more...</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-theme="gaia" data-marpit-pagination="5" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Features</h1>
<ul>
<li>
<p><img class="emoji" draggable="false" alt="📝" src="https://twemoji.maxcdn.com/2/svg/1f4dd.svg" data-marp-twemoji=""/> <strong>Write slide deck with plain Markdown</strong> (CommonMark)</p>
</li>
<li>
<p><img class="emoji" draggable="false" alt="🏭" src="https://twemoji.maxcdn.com/2/svg/1f3ed.svg" data-marp-twemoji=""/> Built on <a href="https://github.com/marp-team/marpit">Marpit framework</a>: A brand-new skinny framework for creating slide deck</p>
</li>
<li>
<p><img class="emoji" draggable="false" alt="⚙️" src="https://twemoji.maxcdn.com/2/svg/2699.svg" data-marp-twemoji=""/> <a href="https://github.com/marp-team/marp-core">Marp Core</a>: Easy to start using the core engine and built-in themes via npm</p>
</li>
<li>
<p>Following content <img class="emoji" draggable="false" alt="©️" src="https://twemoji.maxcdn.com/2/svg/a9.svg" data-marp-twemoji=""/> <a href="https://gist.github.com/yhatt/a7d33a306a87ff634df7bb96aab058b5">Gist marp.md</a> with some changing.</p>
</li>
<li>
<p>What are Gists? We will see <img class="emoji" draggable="false" alt="🙈" src="https://twemoji.maxcdn.com/2/svg/1f648.svg" data-marp-twemoji=""/></p>
<ul>
<li>Spoiler <img class="emoji" draggable="false" alt="⚠️" src="https://twemoji.maxcdn.com/2/svg/26a0.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> Gists are a great way to share your work.</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-theme="gaia" data-marpit-pagination="6" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>How to write slides?</h1>
<p>Split pages by horizontal ruler (e.g. <code>---</code>). It's very simple.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-section"># Slide 1</span>
foobar
---
<span class="hljs-section"># Slide 2</span>
foobar
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-theme="gaia" data-marpit-pagination="7" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Directives</h1>
<p>Marp has extended syntax called <strong>"Directives"</strong> to support creating beautiful slides.</p>
<p>Insert at front-matter to the top of Markdown:</p>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-meta">---</span>
<span class="hljs-attr">theme:</span> <span class="hljs-string">default</span>
<span class="hljs-meta">---</span>
</span></span></foreignObject></svg></code></pre>
<p>or HTML comment anywhere:</p>
<pre><code class="language-html"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-comment"><!-- theme: default --></span>
</span></span></foreignObject></svg></code></pre>
<p><a href="https://marpit.marp.app/directives">https://marpit.marp.app/directives</a></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-theme="gaia" data-marpit-pagination="8" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/directives?id=global-directives">Global directives</a></h2>
<ul>
<li><code>theme</code>: Choose a theme</li>
<li><code>size</code>: Choose the slide size from <code>16:9</code> and <code>4:3</code> <em>(except Marpit framework)</em></li>
<li><a href="https://marpit.marp.app/directives?id=heading-divider"><code>headingDivider</code></a>: instruct to divide slide pages at before of specified heading levels</li>
</ul>
<p><img class="emoji" draggable="false" alt="⬇️" src="https://twemoji.maxcdn.com/2/svg/2b07.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="🙄" src="https://twemoji.maxcdn.com/2/svg/1f644.svg" data-marp-twemoji=""/> is YAML syntax.</p>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-meta">---</span>
<span class="hljs-attr">theme:</span> <span class="hljs-string">gaia</span>
<span class="hljs-attr">size:</span> <span class="hljs-number">4</span><span class="hljs-string">:3</span>
<span class="hljs-meta">---</span>
</span></span></foreignObject></svg></code></pre>
<blockquote>
<p>Marp can use <a href="https://github.com/marp-team/marp-core/tree/master/themes#readme">built-in themes in Marp Core</a>: <code>default</code>, <code>gaia</code>, and <code>uncover</code>.</p>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-theme="gaia" data-marpit-pagination="9" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/directives?id=local-directives">Local directives</a></h2>
<p>These are the setting value per slide.</p>
<ul>
<li><code>paginate</code>: show pagination by set <code>true</code>.</li>
<li><code>header</code>: specify the contents for header.</li>
<li><code>footer</code>: specify the contents for footer.</li>
<li><code>class</code>: set HTML class for current slide.</li>
<li><code>color</code>: set text color.</li>
<li><code>backgroundColor</code>: Set background color.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="10" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://marpit.marp.app/assets/directives.png");background-size:95%;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="10" data-paginate="true" data-theme="gaia" data-marpit-pagination="10" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h3>Spot directives</h3>
<p>Local directives apply to ** the current page and all the following pages**.</p>
<p>They can apply to a page by using underscore prefix such as <code>_class</code>.</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="10" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-class="invert" data-theme="gaia" class="invert" data-marpit-pagination="11" data-marpit-pagination-total="97" style="--paginate:true;--class:invert;--theme:gaia;">
<h3>Example</h3>
<p>This page is using the invert color scheme <a href="https://github.com/marp-team/marp-core/tree/master/themes#readme">defined in Marp built-in theme</a>.</p>
<pre><code class="language-html"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-comment"><!-- _class: invert --></span>
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-theme="gaia" data-marpit-pagination="12" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><a href="https://marpit.marp.app/image-syntax">Image syntax</a></h1>
<p>You can resize image size and apply filters through the keywords: <code>width</code> (<code>w</code>), <code>height</code> (<code>h</code>), and filter CSS keywords.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">width:100px height:100px</span>](<span class="hljs-link">image.png</span>)
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">blur sepia:50%</span>](<span class="hljs-link">filters.png</span>)
</span></span></foreignObject></svg></code></pre>
<p>Please refer <a href="https://marpit.marp.app/image-syntax?id=resizing-image">resizing image syntax</a> and <a href="https://marpit.marp.app/image-syntax?id=image-filters">a list of CSS filters</a>.</p>
<p><img src="https://avatars1.githubusercontent.com/u/20685754?v=4" alt="w:100px h:100px" style="width:100px;height:100px;" /> <img src="https://avatars1.githubusercontent.com/u/20685754?v=4" alt="w:100 h:100 blur sepia:50%" style="width:100px;height:100px;filter:blur(10px) sepia(50%);" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="13" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://yhatt-marp-cli-example.netlify.com/assets/gradient.jpg");filter:opacity(.5);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-theme="gaia" data-marpit-pagination="13" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<h1><a href="https://marpit.marp.app/image-syntax?id=slide-backgrounds">Background image</a></h1>
<p>You can set a background image for a slide by using <code>bg</code> keyword.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">bg opacity</span>](<span class="hljs-link">https://yhatt-marp-cli-example.netlify.com/assets/gradient.jpg</span>)
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="13" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="14" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://fakeimg.pl/800x600/fff/ccc/?text=A");filter:blur(3px);"></figure><figure style="background-image:url("https://fakeimg.pl/800x600/eee/ccc/?text=B");filter:blur(3px);"></figure><figure style="background-image:url("https://fakeimg.pl/800x600/ddd/ccc/?text=C");filter:blur(3px);"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-theme="gaia" data-marpit-pagination="14" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<h2>Multiple backgrounds (<a href="https://marpit.marp.app/image-syntax?id=advanced-backgrounds">Marpit's advanced backgrounds</a>)</h2>
<p>Marp can use multiple background images.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">bg blur:3px</span>](<span class="hljs-link">https://fakeimg.pl/800x600/fff/ccc/?text=A</span>)
![<span class="hljs-string">bg blur:3px</span>](<span class="hljs-link">https://fakeimg.pl/800x600/eee/ccc/?text=B</span>)
![<span class="hljs-string">bg blur:3px</span>](<span class="hljs-link">https://fakeimg.pl/800x600/ddd/ccc/?text=C</span>)
</span></span></foreignObject></svg></code></pre>
<p>It can also change alignment direction by including <code>vertical</code> keyword.</p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="14" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-footer="*Photo by [Mohamed Nohassi](https://unsplash.com/@coopery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*" data-theme="gaia" data-marpit-pagination="15" data-marpit-pagination-total="97" style="--paginate:true;--footer:*Photo by [Mohamed Nohassi](https://unsplash.com/@coopery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://images.unsplash.com/photo-1568488789544-e37edf90eb67?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=720&ixlib=rb-1.2.1&q=80&w=640");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="15" data-paginate="true" data-footer="*Photo by [Mohamed Nohassi](https://unsplash.com/@coopery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*" data-theme="gaia" data-marpit-pagination="15" data-marpit-pagination-total="97" style="--paginate:true;--footer:*Photo by [Mohamed Nohassi](https://unsplash.com/@coopery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2><a href="https://marpit.marp.app/image-syntax?id=split-backgrounds">Split background</a></h2>
<p>Marp can use <a href="https://docs.deckset.com/English.lproj/Media/01-background-images.html#split-slides">Deckset</a> style split background(s).</p>
<p>Make a space for background by <code>bg</code> + <code>left</code> / <code>right</code> keywords.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">bg right</span>](<span class="hljs-link">image.jpg</span>)
</span></span></foreignObject></svg></code></pre>
<footer><em>Photo by <a href="https://unsplash.com/@coopery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mohamed Nohassi</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></em></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="15" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-paginate="true" data-theme="gaia" data-marpit-pagination="16" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/fragmented-list">Fragmented list</a></h2>
<p>Marp will parse a list with asterisk marker as the fragmented list for appearing contents one by one. (<em><strong>Only for exported HTML</strong> by <a href="https://github.com/marp-team/marp-cli">Marp CLI</a> / <a href="https://github.com/marp-team/marp-vscode">Marp for VS Code</a></em>)</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-section"># Bullet list</span>
<span class="hljs-bullet">
- </span>One
<span class="hljs-bullet">- </span>Two
<span class="hljs-bullet">- </span>Three
---
<span class="hljs-section"># Fragmented list</span>
<span class="hljs-bullet">
* </span>One
<span class="hljs-bullet">* </span>Two
<span class="hljs-bullet">* </span>Three
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-theme="gaia" data-marpit-pagination="17" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2>Math typesetting (only for <a href="https://github.com/marp-team/marp-core">Marp Core</a>)</h2>
<p><a href="https://katex.org/">KaTeX</a> math typesetting such as <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>a</mi><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mi>b</mi><mi>c</mi><mo>+</mo><mi>c</mi></mrow><annotation encoding="application/x-tex">ax^2+bc+c</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.897438em;vertical-align:-0.08333em;"></span><span class="mord mathdefault">a</span><span class="mord"><span class="mord mathdefault">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141079999999999em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.77777em;vertical-align:-0.08333em;"></span><span class="mord mathdefault">b</span><span class="mord mathdefault">c</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.43056em;vertical-align:0em;"></span><span class="mord mathdefault">c</span></span></span></span> can use with <a href="https://pandoc.org/MANUAL.html#math">Pandoc's math syntax</a>.</p>
<p><svg data-marp-fitting="svg" data-marp-fitting-math><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mi>I</mi><mrow><mi>x</mi><mi>x</mi></mrow></msub><mo>=</mo><mo>∫</mo><msub><mo>∫</mo><mi>R</mi></msub><msup><mi>y</mi><mn>2</mn></msup><mi>f</mi><mo stretchy="false">(</mo><mi>x</mi><mo separator="true">,</mo><mi>y</mi><mo stretchy="false">)</mo><mo>⋅</mo><mrow></mrow><mi>d</mi><mi>y</mi><mi>d</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.83333em;vertical-align:-0.15em;"></span><span class="mord"><span class="mord mathdefault" style="margin-right:0.07847em;">I</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.151392em;"><span style="top:-2.5500000000000003em;margin-left:-0.07847em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathdefault mtight">x</span><span class="mord mathdefault mtight">x</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:2.27195em;vertical-align:-0.9119499999999999em;"></span><span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011249999999999316em;">∫</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mop"><span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011249999999999316em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:-0.433619em;"><span style="top:-1.7880500000000001em;margin-left:-0.44445em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathdefault mtight" style="margin-right:0.00773em;">R</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.9119499999999999em;"><span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord"><span class="mord mathdefault" style="margin-right:0.03588em;">y</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord mathdefault" style="margin-right:0.10764em;">f</span><span class="mopen">(</span><span class="mord mathdefault">x</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathdefault" style="margin-right:0.03588em;">y</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">⋅</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.8888799999999999em;vertical-align:-0.19444em;"></span><span class="mord"></span><span class="mord mathdefault">d</span><span class="mord mathdefault" style="margin-right:0.03588em;">y</span><span class="mord mathdefault">d</span><span class="mord mathdefault">x</span></span></span></span></span></span></span></foreignObject></svg></p><pre><code class="language-tex"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-formula">$ax^2+bc+c$</span>
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-tex"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-formula">$$I_{xx}=<span class="hljs-tag">\<span class="hljs-name">int</span></span><span class="hljs-tag">\<span class="hljs-name">int</span></span>_Ry^2f(x,y)<span class="hljs-tag">\<span class="hljs-name">cdot</span><span class="hljs-string">{}</span></span>dydx$$</span>
</span></span></foreignObject></svg></code></pre>
<p><img class="emoji" draggable="false" alt="🙄" src="https://twemoji.maxcdn.com/2/svg/1f644.svg" data-marp-twemoji=""/> Yes it will work also in <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-theme="gaia" data-marpit-pagination="18" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2>Auto-scaling (only for <a href="https://github.com/marp-team/marp-core">Marp Core</a>)</h2>
<p><em>Several built-in themes</em> are supported auto-scaling for code blocks and math typesettings.</p>
<pre><code class="language-text"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>Too long code block will be scaled-down automatically. ------------>
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-text"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>Too long code block will be scaled-down automatically. ------------------------>
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-text"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>Too long code block will be scaled-down automatically. ------------------------------------------------>
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-theme="gaia" data-marpit-pagination="19" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h5><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content> Auto-fitting header (only for <a href="https://github.com/marp-team/marp-core">Marp Core</a>)</span></foreignObject></svg></h5>
<h5><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content> is available by annotating <code><!--fit--></code> in headings.</span></foreignObject></svg></h5>
<br />
<pre><code class="language-html"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>## <span class="hljs-comment"><!--fit--></span> Auto-fitting header (only for Marp Core)
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-theme="gaia" data-marpit-pagination="20" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/theme-css">Theme CSS</a></h2>
<p>Marp uses <code><section></code> as the container of each slide. And others are same as styling for plain Markdown. The customized theme can use in <a href="https://github.com/marp-team/marp-cli">Marp CLI</a> and <a href="https://github.com/marp-team/marp-vscode">Marp for VS Code</a>.</p>
<pre><code class="language-css"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-comment">/* @theme your-theme */</span>
<span class="hljs-keyword">@import</span> <span class="hljs-string">'default'</span>;
<span class="hljs-selector-tag">section</span> {<span class="hljs-comment">/* Specify slide size */</span>
<span class="hljs-attribute">width</span>: <span class="hljs-number">960px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">720px</span>;
}
<span class="hljs-selector-tag">h1</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#c33</span>;
}
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-theme="gaia" data-marpit-pagination="21" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/theme-css?id=tweak-style-through-markdown">Tweak style in Markdown</a></h2>
<p><code><style></code> tag in Markdown will work in the context of theme CSS.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>---
<span class="hljs-section">theme: default
---</span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">style</span>></span></span>
section {
background: yellow;
}
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">style</span>></span></span>
Re-painted yellow background, ha-ha.
</span></span></foreignObject></svg></code></pre>
<blockquote>
<p>You can also add custom styling by class like <code>section.custom-class { ... }</code>.</p>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-marpit-scope-bJvPk7tf="" data-paginate="true" data-theme="gaia" data-marpit-pagination="22" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><a href="https://marpit.marp.app/theme-css?id=scoped-style">Scoped style</a></h2>
<p>If you want one-shot styling for current page, you can use <code><style scoped></code>.</p>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="xml"><span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>></span></span>
a {
color: green;
}
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">style</span>></span></span>
![<span class="hljs-string">Green link!</span>](<span class="hljs-link">https://marp.app/</span>)
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-paginate="true" data-theme="gaia" data-marpit-pagination="23" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2>TRICKS <img class="emoji" draggable="false" alt="🎳" src="https://twemoji.maxcdn.com/2/svg/1f3b3.svg" data-marp-twemoji=""/></h2>
<h6><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>If you want the title fitting your current page your current page layout, you can use <code><!--fit--></code>. </span></foreignObject></svg></h6>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-section"># Enjoy writing slides! :v: <!--fit--></span>
<span class="hljs-section"># Now it's time to setup code <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> <!--fit--></span>
</span></span></foreignObject></svg></code></pre>
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>or including images in your file, you can use Base64 coding with image ref <img class="emoji" draggable="false" alt="🔗" src="https://twemoji.maxcdn.com/2/svg/1f517.svg" data-marp-twemoji=""/> <a href="https://medium.com/markdown-monster-blog/getting-images-into-markdown-documents-and-weblog-posts-with-markdown-monster-9ec6f353d8ec">Medium Story</a>.</span></foreignObject></svg></h1>
<pre><code class="language-markdown"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>Here's an image:
![][image<span class="hljs-emphasis">_ref_</span>a32ff4ads]
More text here...
...
[<span class="hljs-symbol">image_ref_a32ff4ads</span>]: <span class="hljs-link">data:image/png;base64,iVBORw0KGgoAAAANSUhEke02C1MyA29UWKgPA...RS12D==</span>
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="24" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/webslide4.gif");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="24" data-paginate="true" data-theme="gaia" data-marpit-pagination="24" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="24" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-paginate="true" data-theme="gaia" data-marpit-pagination="25" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Marple.js</h1>
<ul>
<li>Marp <img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/2/svg/2795.svg" data-marp-twemoji=""/> Multiplexer = Marple</li>
<li><img class="emoji" draggable="false" alt="🛑" src="https://twemoji.maxcdn.com/2/svg/1f6d1.svg" data-marp-twemoji=""/> I didn't find a way to easily synchonize slides among a set of client.</li>
<li>My fun <img class="emoji" draggable="false" alt="😍" src="https://twemoji.maxcdn.com/2/svg/1f60d.svg" data-marp-twemoji=""/> solution:
<ul>
<li><img src="https://expressjs.com/images/express-facebook-share.png" alt="h:60" style="height:60px;" /> <em>a micro-framework per Node.js</em></li>
<li><img src="https://miro.medium.com/max/811/1*tOitxCwTNcS3ESstLylmtg.png" alt="h:60" style="height:60px;" /> <em>enables real-time, bidirectional and event-based communication.</em></li>
<li><img src="https://images.g2crowd.com/uploads/product/image/social_landscape/social_landscape_9981953457da53251a09f15604cd4f29/grunt.png" alt="h:60" style="height:60px;" /> JavaScript Task Runner. In one word: automation.</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="26" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/teleport.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="26" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="content">
<h3>It's time to move in another alternative dimension!</h3>
<h3><a href="http://isiswork00.di.unisa.it:3000/client">http://isiswork00.di.unisa.it:3000/client </a></h3>
<h1><img class="emoji" draggable="false" alt="🆙" src="https://twemoji.maxcdn.com/2/svg/1f199.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="👀" src="https://twemoji.maxcdn.com/2/svg/1f440.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="🎭" src="https://twemoji.maxcdn.com/2/svg/1f3ad.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:white;" data-marpit-advanced-background="pseudo" data-marpit-pagination="26" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-theme="gaia" data-marpit-pagination="27" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Enjoy writing your slides! <img class="emoji" draggable="false" alt="✌️" src="https://twemoji.maxcdn.com/2/svg/270c.svg" data-marp-twemoji=""/> </span></foreignObject></svg></h1>
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Now it's time to code <img class="emoji" draggable="false" alt="💻" src="https://twemoji.maxcdn.com/2/svg/1f4bb.svg" data-marp-twemoji=""/> </span></foreignObject></svg></h1>
<p><img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/goku.gif" alt="w:400 center" style="width:400px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="28" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/space.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-theme="gaia" data-marpit-pagination="28" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="28" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-theme="gaia" data-marpit-pagination="29" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Suppose we have the following MPI C code </span></foreignObject></svg></h1>
<pre><code class="language-c"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><stdio.h></span></span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><mpi.h></span></span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><string.h></span></span>
<span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> NERD[<span class="hljs-number">5</span>] = {<span class="hljs-number">0xF0</span>, <span class="hljs-number">0x9F</span>, <span class="hljs-number">0xA4</span>, <span class="hljs-number">0x93</span>, <span class="hljs-string">'\0'</span>};
<span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> WORLD[<span class="hljs-number">5</span>] = {<span class="hljs-number">0xF0</span>, <span class="hljs-number">0x9F</span>, <span class="hljs-number">0x8C</span>, <span class="hljs-number">0x8D</span>, <span class="hljs-string">'\0'</span>};
<span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> SLEEP[<span class="hljs-number">5</span>] = { <span class="hljs-number">0xF0</span>, <span class="hljs-number">0x9F</span>, <span class="hljs-number">0x98</span>, <span class="hljs-number">0xB4</span>, <span class="hljs-string">'\0'</span>};
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> <img class="emoji" draggable="false" alt="🤓" src="https://twemoji.maxcdn.com/2/svg/1f913.svg" data-marp-twemoji=""/> {MPI_Init(NULL, NULL); int world_rank; MPI_Comm_rank(MPI_COMM_WORLD, &world_rank); printf(<span class="hljs-meta-string">"I am the %s with rank %d "</span>,NERD, world_rank);}</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> <img class="emoji" draggable="false" alt="🌍" src="https://twemoji.maxcdn.com/2/svg/1f30d.svg" data-marp-twemoji=""/> ({int s; MPI_Comm_size(MPI_COMM_WORLD, &s); printf(<span class="hljs-meta-string">"of MPI %s of size %d "</span>, WORLD, s);});</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> <img class="emoji" draggable="false" alt="😴" src="https://twemoji.maxcdn.com/2/svg/1f634.svg" data-marp-twemoji=""/> {printf(<span class="hljs-meta-string">"Goodbye %s\n"</span>,SLEEP);MPI_Finalize();return 0;}</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> P(x) printf(x)</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> I P(<span class="hljs-meta-string">"\a"</span>); <span class="hljs-comment">// \a means alert (beep or flash)</span></span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> am P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> the P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> with P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> rank P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> size P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> <img class="emoji" draggable="false" alt="🤔" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" data-marp-twemoji=""/> {P(<span class="hljs-meta-string">"\a"</span>);};</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> of P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> MPI P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-meta">#<span class="hljs-meta-keyword">define</span> Goodbye P(<span class="hljs-meta-string">"\a"</span>);</span>
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span>
</span>{
I am the <img class="emoji" draggable="false" alt="🤓" src="https://twemoji.maxcdn.com/2/svg/1f913.svg" data-marp-twemoji=""/> with rank <img class="emoji" draggable="false" alt="🤔" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" data-marp-twemoji=""/> of MPI <img class="emoji" draggable="false" alt="🌍" src="https://twemoji.maxcdn.com/2/svg/1f30d.svg" data-marp-twemoji=""/> of <span class="hljs-built_in">size</span> <img class="emoji" draggable="false" alt="🤔" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" data-marp-twemoji=""/> Goodbye <img class="emoji" draggable="false" alt="😴" src="https://twemoji.maxcdn.com/2/svg/1f634.svg" data-marp-twemoji=""/>;
}
</span></span></foreignObject></svg></code></pre>
<p>What does the following code do? .... sure it's works!</p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-color="black" data-theme="gaia" data-marpit-pagination="30" data-marpit-pagination-total="97" style="--paginate:true;--color:black;--theme:gaia;color:black;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://theenvoyweb.com/wp-content/uploads/2020/04/Unbreakable-Kimmy-Schmidt.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-color="black" data-theme="gaia" data-marpit-pagination="30" data-marpit-pagination-total="97" style="--paginate:true;--color:black;--theme:gaia;color:black;" data-marpit-advanced-background="content">
<h3>We know that ...</h3>
<h3>setting our (many)</h3>
<h3>local development</h3>
<h3>environments</h3>
<h3>is super-boring</h3>
<h1><img class="emoji" draggable="false" alt="😢" src="https://twemoji.maxcdn.com/2/svg/1f622.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:black;" data-marpit-advanced-background="pseudo" data-marpit-pagination="30" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-paginate="true" data-theme="gaia" data-marpit-pagination="31" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><img class="emoji" draggable="false" alt="💡" src="https://twemoji.maxcdn.com/2/svg/1f4a1.svg" data-marp-twemoji=""/> slide 5</h2>
<ul>
<li>What are Gists? We will see <img class="emoji" draggable="false" alt="🙈" src="https://twemoji.maxcdn.com/2/svg/1f648.svg" data-marp-twemoji=""/>
<ul>
<li>Spoiler <img class="emoji" draggable="false" alt="⚠️" src="https://twemoji.maxcdn.com/2/svg/26a0.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> Gists are a great way to share your work.</li>
</ul>
</li>
</ul>
<blockquote>
<p>With gists, you can share single files, parts of files, and full applications with other people. Directories can't be shared. You can access your gists at <code>http(s)://[hostname]/gist</code>, or <code>http(s)://gist.[hostname]</code> if subdomains are enabled.<br />
<img class="emoji" draggable="false" alt="✅" src="https://twemoji.maxcdn.com/2/svg/2705.svg" data-marp-twemoji=""/> <em>GitHub Help</em></p>
</blockquote>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-theme="gaia" data-marpit-pagination="32" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>What You Can Do With <img src="https://miro.medium.com/max/1400/1*GTSRmfPGEQVmoIDy28HgqA.png" alt="h:50" style="height:50px;" /> ?</h1>
<ol>
<li>Write Text Anonymously</li>
<li>Track Changes like a Wiki (support versioning on files)</li>
<li>Publish Gists in Rich Text</li>
<li>Gist as a Writing Platform (WordPress, Medium, and many others support Gist)</li>
<li>Host Single Page Websites on Gist (using <a href="http://bl.ocks.org">bl.ocks.org</a>)
<ul>
<li>or <a href="http://htmlpreview.github.io/">http://htmlpreview.github.io/</a> for GitHub.</li>
</ul>
</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-theme="gaia" data-marpit-pagination="33" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<ol start="6">
<li>Maintain a Task List</li>
</ol>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-bullet">- </span>[x] Pick the flowers
<span class="hljs-bullet">- </span>[ ] Call John 9303032332
<span class="hljs-bullet">- </span>[x] Cancel cable subscription
<span class="hljs-bullet">- </span>[ ] Book the flight tickets
</span></span></foreignObject></svg></code></pre>
<ul>
<li>Gist as a Web Clipper (<a href="https://chrome.google.com/webstore/detail/gistbox-clipper/cejmhmbmafamjegaebkjhnckhepgmido">Chrome plugin</a>)</li>
</ul>
<ol start="7">
<li>Embed Gists in Web Pages</li>
</ol>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://gist.github.com/spagnuolocarmine/60a5f8c065f9577c25a6717681bd84d1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-theme="gaia" data-marpit-pagination="34" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<ol start="8">
<li>Measure the Traffic with Google Analytics and <a href="https://github.com/igrigorik/ga-beacon">GABecon</a></li>
</ol>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>![<span class="hljs-string">Analytics</span>](<span class="hljs-link">https://ga-beacon.appspot.com/UA-XXXXX-X/gist-id?pixel</span>)
</span></span></foreignObject></svg></code></pre>
<ol start="9">
<li><img class="emoji" draggable="false" alt="🤚" src="https://twemoji.maxcdn.com/2/svg/1f91a.svg" data-marp-twemoji=""/> share this <a href="https://gist.github.com/spagnuolocarmine/7733c9d7a9a3b658d83a446b9e740455">presentation source</a></li>
</ol>
<ul>
<li>Manage Gists from the Desktop
<ul>
<li>We will use <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></li>
<li>However, there many gists client:
<ul>
<li><a href="https://gist.github.com/">GitHub Gist</a></li>
<li><a href="https://www.gistoapp.com/">Gisto</a></li>
<li><a href="https://www.cacher.io/">Cacher</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="35" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://thumbs.gfycat.com/ConsciousFluffyBangeltiger-size_restricted.gif");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="35" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="content">
<h1>Now it's time</h1>
<h1>to setup <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></h1>
<h1>in <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="👣" src="https://twemoji.maxcdn.com/2/svg/1f463.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:white;" data-marpit-advanced-background="pseudo" data-marpit-pagination="35" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-theme="gaia" data-marpit-pagination="36" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> Use Gists to store files</h2>
<ul>
<li>We start creating a new Gist file for this presentation.</li>
<li>Install and Configure: <a href="https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist">Gist Extension</a> <img class="emoji" draggable="false" alt="🆙" src="https://twemoji.maxcdn.com/2/svg/1f199.svg" data-marp-twemoji=""/></li>
</ul>
<p><img src="https://github.com/kenhowardpdx/vscode-gist/raw/master/images/vscode-gist-profiles.gif" alt="w:1100" style="width:1100px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="37" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode_gist_1.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="37" data-paginate="true" data-theme="gaia" data-marpit-pagination="37" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><code>>Create New Gist</code></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="37" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="38" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode_gist_2.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="38" data-paginate="true" data-theme="gaia" data-marpit-pagination="38" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><code>>Enter the file name</code></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="38" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="39" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode_gist_3.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="39" data-paginate="true" data-theme="gaia" data-marpit-pagination="39" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><code>>Enter the description</code></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="39" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="40" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode_gist_4.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="40" data-paginate="true" data-theme="gaia" data-marpit-pagination="40" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><code>>Setting access Public or Private</code></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="40" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="41" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://user-images.githubusercontent.com/116461/69910156-96274b80-13fe-11ea-9be4-d801f4e9c377.gif");background-size:auto 400px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="41" data-paginate="true" data-theme="gaia" data-marpit-pagination="41" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2><img class="emoji" draggable="false" alt="1️⃣" src="https://twemoji.maxcdn.com/2/svg/31-20e3.svg" data-marp-twemoji=""/> Use Gists to store files (2)</h2>
<ul>
<li>Gists wiht UI.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs">GistPad 0.0.66</a> <img class="emoji" draggable="false" alt="🆙" src="https://twemoji.maxcdn.com/2/svg/1f199.svg" data-marp-twemoji=""/></li>
</ul>
<p><br />
<img src="https://user-images.githubusercontent.com/116461/69827991-d56f5580-11ce-11ea-9081-17f27b470fd1.png" alt="w:400" style="width:400px;" /></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="41" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="42" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:40%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vsmarket.gif");background-size:500px auto;"></figure></div></section></foreignObject><foreignObject width="60%" height="720"><section id="42" data-paginate="true" data-theme="gaia" data-marpit-pagination="42" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:40%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h3>Ready to go-ahead <img class="emoji" draggable="false" alt="🆒" src="https://twemoji.maxcdn.com/2/svg/1f192.svg" data-marp-twemoji=""/></h3>
<ul>
<li><img class="emoji" draggable="false" alt="2️⃣" src="https://twemoji.maxcdn.com/2/svg/32-20e3.svg" data-marp-twemoji=""/> Using Marp presenter <img src="https://avatars1.githubusercontent.com/u/20685754?v=4" alt="h:50" style="height:50px;" />.</li>
<li><img class="emoji" draggable="false" alt="😱" src="https://twemoji.maxcdn.com/2/svg/1f631.svg" data-marp-twemoji=""/> We also need Markdown <img class="emoji" draggable="false" alt="3️⃣" src="https://twemoji.maxcdn.com/2/svg/33-20e3.svg" data-marp-twemoji=""/>.</li>
<li><img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> helps us:
<ul>
<li><a href="https://marketplace.visualstudio.com/vscode">Marketplace</a></li>
<li>Also integrated in the <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> control bar (on the left) <img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/marketplace.png" alt="h:50" style="height:50px;" /></li>
</ul>
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="42" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="43" data-paginate="true" data-theme="gaia" data-marpit-pagination="43" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>To be continued ... after a short comments about <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> code </span></foreignObject></svg></h1>
<p><img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode.png" alt="h:100" style="height:100px;" /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/1024px-Electron_Software_Framework_Logo.svg.png" alt="h:100" style="height:100px;" /> <img src="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/Octocat.png" alt="h:100" style="height:100px;" /> <img src="https://i.insider.com/50366bee6bb3f73061000011?width=700&format=jpeg&auto=webp" alt="h:100" style="height:100px;" /></p>
<p>It is Microsoft product built with Electron <img class="emoji" draggable="false" alt="🤔" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" data-marp-twemoji=""/></p>
<ul>
<li><img class="emoji" draggable="false" alt="👍" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" data-marp-twemoji=""/> the same company of a famous operating system Windows.
<ul>
<li><img class="emoji" draggable="false" alt="😠" src="https://twemoji.maxcdn.com/2/svg/1f620.svg" data-marp-twemoji=""/> does not provide <strong>B</strong>ourne <strong>A</strong>gain <strong>Sh</strong>ell, but a Power <strong>something</strong>.</li>
<li>Today <img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> Windows Subsystem for Linux (WSL) is a compatibility layer for running Linux binary executables.</li>
<li>Maybe, you should know it also for the famous blue mantra screen <img class="emoji" draggable="false" alt="💙" src="https://twemoji.maxcdn.com/2/svg/1f499.svg" data-marp-twemoji=""/>.</li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-paginate="true" data-theme="gaia" data-marpit-pagination="44" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>To be continued ... after a short comments about <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> code </span></foreignObject></svg></h1>
<ul>
<li>Electron
<ul>
<li>
<blockquote>
<p>Build cross-platform desktop apps with JavaScript, HTML, and CSS</p>
</blockquote>
</li>
<li>Made by GitHub with more than 1000 application on the official store.</li>
</ul>
</li>
<li>Microsoft bought GitHub Inc. on June 4, 2018, for $7.5 billion in stock.</li>
<li>It just erased all that I said!</li>
<li>I <img class="emoji" draggable="false" alt="❤️" src="https://twemoji.maxcdn.com/2/svg/2764.svg" data-marp-twemoji=""/> the Redmond' Micro-Soft Company</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="45" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/vscode2.gif");background-size:auto 99%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="45" data-paginate="true" data-theme="gaia" data-marpit-pagination="45" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="45" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="46" data-paginate="true" data-theme="gaia" data-marpit-pagination="46" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Super easy customization e.g. MPI Task </span></foreignObject></svg></h1>
<ul>
<li>Add <code>task.json</code> to <code>.vscode</code> folder.</li>
</ul>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
<span class="hljs-string">"version"</span>: <span class="hljs-string">"2.0.0"</span>,
<span class="hljs-string">"tasks"</span>: [
{
<span class="hljs-string">"type"</span>: <span class="hljs-string">"shell"</span>,
<span class="hljs-string">"label"</span>: <span class="hljs-string">"MPI compile active file (mpicc)"</span>,
<span class="hljs-string">"command"</span>: <span class="hljs-string">"docker run -it --mount src=\"</span><span class="hljs-variable">$</span>(<span class="hljs-type">pwd</span>)\<span class="hljs-string">",
target=/home,type=bind
spagnuolocarmine/docker-mpi:latest mpicc -g /home/<span class="hljs-variable">$</span>{fileBasename} -o /home/<span class="hljs-variable">$</span>{fileBasenameNoExtension}"</span>,
<span class="hljs-string">"presentation"</span>: {
<span class="hljs-string">"reveal"</span>: <span class="hljs-string">"always"</span>
},
<span class="hljs-string">"problemMatcher"</span>: [
<span class="hljs-string">"<span class="hljs-variable">$eslint</span>-compact"</span>
]
},
<span class="hljs-type">...</span>
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="47" data-paginate="true" data-theme="gaia" data-marpit-pagination="47" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Super easy customization e.g. MPI Task (2) </span></foreignObject></svg></h1>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>
{
<span class="hljs-string">"type"</span>: <span class="hljs-string">"shell"</span>,
<span class="hljs-string">"label"</span>: <span class="hljs-string">"MPI run active file (mpicc && mpirun)"</span>,
<span class="hljs-string">"command"</span>: <span class="hljs-string">"docker run -it --mount src=\"</span>$(<span class="hljs-keyword">pwd</span>)\",
target=/home,<span class="hljs-keyword">type</span>=bind
spagnuolocarmine/docker-mpi:latest mpirun --allow-<span class="hljs-keyword">run</span>-<span class="hljs-keyword">as</span>-root -np 4 /home/<span class="hljs-variable">${fileBasenameNoExtension}</span>",
<span class="hljs-string">"dependsOn"</span>: [
<span class="hljs-string">"MPI compile active file (mpicc)"</span>
],
<span class="hljs-string">"presentation"</span>: {
<span class="hljs-string">"reveal"</span>: <span class="hljs-string">"always"</span>
},
<span class="hljs-string">"problemMatcher"</span>: [
<span class="hljs-string">"$eslint-compact"</span>
]
}
]
}
</span></span></foreignObject></svg></code></pre>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="48" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/markdown.png");background-size:auto 99%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="48" data-paginate="true" data-theme="gaia" data-marpit-pagination="48" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><br />
<br /><br />
<br /><br />
<br /><br />
<br /></p>
<h1><code>>markdown</code></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="48" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="49" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/marp.png");background-size:auto 99%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="49" data-paginate="true" data-theme="gaia" data-marpit-pagination="49" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<p><br />
<br /><br />
<br /><br />
<br /><br />
<br /></p>
<h1><code>>marp</code></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="49" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="50" data-paginate="true" data-theme="gaia" data-marpit-pagination="50" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h2><img class="emoji" draggable="false" alt="4️⃣" src="https://twemoji.maxcdn.com/2/svg/34-20e3.svg" data-marp-twemoji=""/> Wait! <img class="emoji" draggable="false" alt="😅" src="https://twemoji.maxcdn.com/2/svg/1f605.svg" data-marp-twemoji=""/></h2>
<h3><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content>Before starting to install extensions we need some tool to save our <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> configuration. </span></foreignObject></svg></h3>
<ul>
<li>
<p><img src="https://miro.medium.com/max/1400/1*GTSRmfPGEQVmoIDy28HgqA.png" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/2/svg/2795.svg" data-marp-twemoji=""/> <img src="https://shan.gallerycdn.vsassets.io/extensions/shan/code-settings-sync/3.4.3/1569243788505/Microsoft.VisualStudio.Services.Icons.Default" alt="h:80" style="height:80px;" /> Setting Synch</p>
</li>
<li>
<p>Or use <a href="https://code.visualstudio.com/docs/editor/settings-sync">Setting Sync for VS Code Insiders</a></p>
<ul>
<li>Get the latest release each day!</li>
<li>At time of this presentation the following release hash for OSX: <code>fb4223ebdd2e09a7ebf7a1db6b31718252ff2f5cc27f87e206fc8075362bdf1d</code></li>
</ul>
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="51" data-paginate="true" data-theme="gaia" data-marpit-pagination="51" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Setting Synch</h1>
<p>Use your GitHub account token and Gist.</p>
<ol>
<li>Settings File - Keybinding File</li>
<li>Launch File - Snippets Folder - Workspaces Folder</li>
<li>VSCode Extensions & Extensions Configurations</li>
</ol>
<ul>
<li>Configuration: <em>will be opened automatically on code start</em>.</li>
<li><strong>Upload key</strong>: Shift + Alt (Option) + U</li>
<li><strong>Download key</strong>: Shift + Alt (Option) + U</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-color="black" data-theme="gaia" data-marpit-pagination="52" data-marpit-pagination-total="97" style="--paginate:true;--color:black;--theme:gaia;color:black;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://images-na.ssl-images-amazon.com/images/I/918foJWncnL._RI_.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="52" data-paginate="true" data-color="black" data-theme="gaia" data-marpit-pagination="52" data-marpit-pagination-total="97" style="--paginate:true;--color:black;--theme:gaia;color:black;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:black;" data-marpit-advanced-background="pseudo" data-marpit-pagination="52" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="53" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://draculatheme.com/static/icons/pack-1/041-skeleton.svg");background-size:auto 200px;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="53" data-paginate="true" data-theme="gaia" data-marpit-pagination="53" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content">
<h1>Important (fun) setting <img class="emoji" draggable="false" alt="🌈" src="https://twemoji.maxcdn.com/2/svg/1f308.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="5️⃣" src="https://twemoji.maxcdn.com/2/svg/35-20e3.svg" data-marp-twemoji=""/></h1>
<h3>Customize your <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> colors <img class="emoji" draggable="false" alt="😍" src="https://twemoji.maxcdn.com/2/svg/1f60d.svg" data-marp-twemoji=""/></h3>
<ul>
<li>
<p><a href="https://vscodethemes.com/">vscodethemes.com</a></p>
</li>
<li>
<p>I use <img class="emoji" draggable="false" alt="🦇" src="https://twemoji.maxcdn.com/2/svg/1f987.svg" data-marp-twemoji=""/> <a href="https://draculatheme.com/visual-studio-code/">Dracula</a></p>
</li>
<li>
<p><a href="https://github.com/dracula/dracula-theme/stargazers"><img src="https://img.shields.io/github/stars/dracula/dracula-theme" alt="w:100" style="width:100px;" /></a> <a href="https://github.com/dracula/dracula-theme/network"><img src="https://img.shields.io/github/forks/dracula/dracula-theme" alt="w:100" style="width:100px;" /></a><br />
</p>
</li>
<li>
<p>Available also for Atom, Alfred, Emacs, Highlight.js, Hyper, iTerm, JetBrains, Pygments, Slack, Sublime Text, TextMate, Terminal.app, Vim, Xcode, Zsh</p>
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="53" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="54" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/dracula/visual-studio-code/master/screenshot.png");background-size:auto 99%;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="54" data-paginate="true" data-theme="gaia" data-marpit-pagination="54" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="54" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="55" data-paginate="true" data-theme="gaia" data-marpit-pagination="55" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Important (fun) setting <img class="emoji" draggable="false" alt="🌈" src="https://twemoji.maxcdn.com/2/svg/1f308.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="5️⃣" src="https://twemoji.maxcdn.com/2/svg/35-20e3.svg" data-marp-twemoji=""/></h1>
<h3>Customize your <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> icons <img class="emoji" draggable="false" alt="📝" src="https://twemoji.maxcdn.com/2/svg/1f4dd.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="📁" src="https://twemoji.maxcdn.com/2/svg/1f4c1.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="📂" src="https://twemoji.maxcdn.com/2/svg/1f4c2.svg" data-marp-twemoji=""/> 🗂 🗒 <img class="emoji" draggable="false" alt="📋" src="https://twemoji.maxcdn.com/2/svg/1f4cb.svg" data-marp-twemoji=""/></h3>
<p>-<strong>vscode-icons</strong> <img src="https://vscode-icons-team.gallerycdn.vsassets.io/extensions/vscode-icons-team/vscode-icons/10.1.1/1586677542724/Microsoft.VisualStudio.Services.Icons.Default" alt="h:50" style="height:50px;" /></p>
<p><img src="https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif" alt="w:800" style="width:800px;" /></p>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="56" data-paginate="true" data-theme="gaia" data-marpit-pagination="56" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Off-topic</h1>
<h3><svg data-marp-fitting="svg"><foreignObject><span data-marp-fitting-svg-content><img class="emoji" draggable="false" alt="👑" src="https://twemoji.maxcdn.com/2/svg/1f451.svg" data-marp-twemoji=""/> How to make your Markdown (GitHub) README more attractive? </span></foreignObject></svg></h3>
<ol>
<li>Add Table of content <img class="emoji" draggable="false" alt="👉" src="https://twemoji.maxcdn.com/2/svg/1f449.svg" data-marp-twemoji=""/></li>
</ol>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mdickin.markdown-shortcuts">Markdown Shortcuts</a></li>
<li><code>>Markdown All in One: Create Table of Contents</code></li>
</ul>
<ol start="2">
<li>Add custom Badge <img class="emoji" draggable="false" alt="🔥" src="https://twemoji.maxcdn.com/2/svg/1f525.svg" data-marp-twemoji=""/> <a href="https://shields.io/"><img src="https://versioneye.files.wordpress.com/2014/05/screen-shot-2014-05-14-at-22-37-29.png" alt="h:50" style="height:50px;" /></a> <a href="https://badgen.net/">Badgen <img src="https://badgen.net/static/badgen-logo.svg" alt="h:40" style="height:40px;" /></a></li>
</ol>
<ul>
<li><a href="https://www.overleaf.com/latex/templates/twenty-seconds-curriculum-vitae/kfgsngtymkfj"><img src="https://img.shields.io/badge/Available-Overleaf-green?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABfVBMVEUAAABIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDxIrDwAAAAcciVhAAAAfXRSTlMAAA8mNj9EQz0yIQhVz+71+/79+fPrZU3k96yDmo36wQEos1pWyR+9tSrjwjkSoF9Fezo3jPZQSm6Til0RmR4Qiysk8YFcDe30kdO8aCPygkwpCtkU3QXwnxu2WXw4R3MM7FRICxZTUQPaBAfnqBXVE2MYZNvEtIQX+MU7S/Pc0IMAAAABYktHRACIBR1IAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AEPESoxB1PPhwAAAX1JREFUOMutUldbwkAQ3At2UQJiiQ1FxYaoaGyo2Dt27Nh7FxuK89+9iH4muTz5uS/J3czuzO4t0f8GY0SSLS09IzMrOyeXmIAT2fPyHbITcBW4C4vECsUl+A4FKDVXYKzsBy6vqISnSsivTqHemto6XsLHBAP1GtwgNTZp32qLHvh1s78l8FWm1aKFNqCdgooGOzpIFOiEGiR7V3dPb1+o3yJ/AG5psIBnD4QtZzgEDI+MfsmrYyR2yPXHJ6DmT05plGlxxDOYJe+cLSxFQvOcsWC2UAwsLkU0Z4yWV/iUVk2EKEBrKeecsQ5sGNvYVLCl09vmIsYCfhk7Okc5biBmIOy6sKc77h8AhwbCkQsB3fGYE+wGQkyGQyfh4xJBA+FEBU5/bZ9xk+dGlx7g4vLncHUN3Jhe65bnrFxqO81Y7h1f2XvzqLVtjD7EieKPT/y3j5n3lZ6hixer9379xReICfvCaySeFdnplN/eE+I6pRgUTy5+JBNkjf89PgFCeG27lghtGAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wMS0xNVQxNzo0Mjo0OSswMzowMHG2UKkAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDEtMTVUMTc6NDI6NDkrMDM6MDAA6+gVAAAAAElFTkSuQmCC" alt="h:30" style="height:30px;" /></a> <a href="https://www.latex-project.org/"><img src="https://img.shields.io/badge/Made%20with-LaTeX-1f425f.svg" alt="h:30" style="height:30px;" /></a> <a href="https://lbesson.mit-license.org/"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="h:30" style="height:30px;" /></a> <a href="https://github.com/spagnuolocarmine/TwentySecondsCurriculumVitae-LaTex"><img src="https://badges.frapsoft.com/os/v3/open-source.svg?v=103" alt="h:30" style="height:30px;" /></a> <a href="https://github.com/spagnuolocarmine/TwentySecondsCurriculumVitae-LaTex/graphs/commit-activity"><img src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" alt="h:30" style="height:30px;" /></a> <a href="https://github.com/spagnuolocarmine/TwentySecondsCurriculumVitae-LaTex/issues/"><img src="https://img.shields.io/github/issues/Naereen/StrapDown.js.svg" alt="h:30" style="height:30px;" /></a> <a href="https://github.com/spagnuolocarmine/TwentySecondsCurriculumVitae-LaTex/issues?q=is%3Aissue+is%3Aclosed"><img src="https://img.shields.io/github/issues-closed/Naereen/StrapDown.js.svg" alt="h:30" style="height:30px;" /></a></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.pinimg.com/474x/e0/7a/dc/e07adce387b56b0a20f032b7a9ca1584.jpg");background-size:550px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="57" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="content">
<h1>Let's code</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="invert" style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="58" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif");background-size:800px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="58" data-paginate="true" data-theme="gaia" data-marpit-pagination="58" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag">auto-rename-tag v0.1.2</a></li>
<li>Launch a local development server with live reload feature for static & dynamic pages. <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">LiveServer v5.6.1 </a></li>
<li>Visualize css colors. <a href="https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize"> vscode-colorize v0.8.16</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="58" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="59" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/WarWithinMe/better-align/raw/master/images/1.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="59" data-paginate="true" data-theme="gaia" data-marpit-pagination="59" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=wwm.better-align">better-align v1.1.6</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="59" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="60" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/aaron-bond/better-comments/raw/master/images/better-comments.PNG");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="60" data-paginate="true" data-theme="gaia" data-marpit-pagination="60" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>The Better Comments extension will help you create more human-friendly comments in your code.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments">better-comments v2.0.5</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="60" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="61" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night-eighties.png");background-size:800px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="61" data-paginate="true" data-theme="gaia" data-marpit-pagination="61" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Sometimes you forget to review the TODOs you've added while coding before you publish the code to production.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight"> vscode-todo-highlight v1.0.4</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="61" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="62" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/example.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="62" data-paginate="true" data-theme="gaia" data-marpit-pagination="62" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>This extension allows matching brackets to be identified with colours.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2"> bracket-pair-colorizer-2 v0.0.29</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="62" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="63" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/bungcip/better-toml/raw/master/images/feature_syntax_validation.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="63" data-paginate="true" data-theme="gaia" data-marpit-pagination="63" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Support TOML file.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml"> better-toml v0.3.2</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="63" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="64" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="64" data-paginate="true" data-theme="gaia" data-marpit-pagination="64" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>A basic spell checker that works well with camelCase code.</li>
<li>Not all language accept camelCase e.g. Julia.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker">code-spell-checker v1.8.0</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="64" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="65" data-paginate="true" data-theme="gaia" data-marpit-pagination="65" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1>Let's code <img class="emoji" draggable="false" alt="6️⃣" src="https://twemoji.maxcdn.com/2/svg/36-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>ErrorLens enhances Visual Studio Code's inbuilt diagnostic highlighting.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=PhilHindle.errorlens"> errorlens v3.1.1</a><br />
<img src="https://github.com/phindle/error-lens/raw/master/images/Screenshot-1.png" alt="w:1200" style="width:1200px;" /></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://pbs.twimg.com/media/EVkIodtWkAEQjYz?format=jpg&name=small");background-size:530px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="66" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="content">
<h1><img src="https://badgen.net/badge/icon/github?icon=github&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="7️⃣" src="https://twemoji.maxcdn.com/2/svg/37-20e3.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="invert" style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="67" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/JanBN/vscode-git-last-commit-message/master/assets/screen_3.PNG");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="67" data-paginate="true" data-theme="gaia" data-marpit-pagination="67" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/github?icon=github&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="7️⃣" src="https://twemoji.maxcdn.com/2/svg/37-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Load your last commit message into git commit box, or let you choose from last n messages.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=JanBn.git-last-commit-message">git-last-commit-message v1.8.0</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="67" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="68" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/code-lens.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="68" data-paginate="true" data-theme="gaia" data-marpit-pagination="68" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/github?icon=github&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="7️⃣" src="https://twemoji.maxcdn.com/2/svg/37-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>GitLens supercharges the Git capabilities built into <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">gitlens v10.2.1</a><br />
</li>
</ul>
<p><img src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/status-bar.png" alt="w:600" style="width:600px;" /></p>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="68" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://pics.me.me/thumb_me-watching-my-senior-engineer-typing-commands-into-the-unix-66196593.png");background-size:430px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="69" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="content">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="invert" style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="70" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://microsoft.github.io/vscode-remote-release/images/ssh-readme.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="70" data-paginate="true" data-theme="gaia" data-marpit-pagination="70" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>This extension lets you use any remote machine with a SSH server as your development environment.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh">remote-ssh v0.51.0</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="70" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="71" data-paginate="true" data-theme="gaia" data-marpit-pagination="71" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>This extension lets you use any remote machine with a SSH server as your development environment.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh-edit">remote-ssh-edit v0.51.0</a></li>
<li>This extension complements the Remote - SSH extension with syntax colorization, keyword intellisense, and simple snippets when editing SSH configuration files.</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="72" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/microsoft/vscode-docker/raw/master/resources/readme/docker-view-context-menu.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="72" data-paginate="true" data-theme="gaia" data-marpit-pagination="72" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>The Docker extension makes it easy to build, manage and deploy containerized applications from Visual Studio Code.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker">vscode-docker v1.1.0</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="72" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="73" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/Microsoft/vscode-azurefunctions/raw/master/resources/readme/debug2.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="73" data-paginate="true" data-theme="gaia" data-marpit-pagination="73" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Azure Functions extension to quickly create, debug, manage, and deploy serverless apps directly.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions">vscode-azurefunctions v1.22.0</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account">vscode-azure-account v0.1.9</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice">vscode-azureappservice v0.16.01</a><br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="73" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="74" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/aws/aws-toolkit-vscode/raw/master/resources/marketplace/overview.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="74" data-paginate="true" data-theme="gaia" data-marpit-pagination="74" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="8️⃣" src="https://twemoji.maxcdn.com/2/svg/38-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>An extension that allows you to interact with certain services of Amazon Web Services (AWS).</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode">aws-toolkit-vscode v1.8.0</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="74" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/22281688_473349833049430_352101174089833726_n.png?_nc_cat=100&_nc_sid=730e14&_nc_oc=AQky52UC3hROE-MgaJRykYtAYTeAq8AAfQj7xSEr3PmQqgTKbVI02xKBShS45UntRyo&_nc_ht=scontent-mxp1-1.xx&oh=7f747b7ae0f7a6702f3ec19b736d9b86&oe=5ECE2E71");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="75" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="content">
<h1><img src="https://img.shields.io/badge/Made%20with-LaTeX-1f425f.svg" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="9️⃣" src="https://twemoji.maxcdn.com/2/svg/39-20e3.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="invert" style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="76" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/James-Yu/LaTeX-Workshop/raw/master/demo_media/synctex.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="76" data-paginate="true" data-theme="gaia" data-marpit-pagination="76" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://img.shields.io/badge/Made%20with-LaTeX-1f425f.svg" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="9️⃣" src="https://twemoji.maxcdn.com/2/svg/39-20e3.svg" data-marp-twemoji=""/></h1>
<ul>
<li>An extension aiming at providing core features for LaTeX typesetting.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode">LaTeX-Workshop v8.9.0</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="76" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/rm.png");background-size:700px auto;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="77" data-class="invert" data-theme="gaia" class="invert" style="--class:invert;--theme:gaia;" data-marpit-advanced-background="content">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section class="invert" style="" data-marpit-advanced-background="pseudo"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="78" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/discordpresence.png");background-size:300px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="78" data-paginate="true" data-theme="gaia" data-marpit-pagination="78" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Discord presence for <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode">discord-vscode v3.14.0</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="78" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="79" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/mattbierner/vscode-emojisense/master/media/example.gif");background-size:650px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="79" data-paginate="true" data-theme="gaia" data-marpit-pagination="79" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Add suggestions and autocomplete for emoji to <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=bierner.emojisense">emojisense v0.6.1</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="79" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="80" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/sort.png");background-size:auto 700px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="80" data-paginate="true" data-theme="gaia" data-marpit-pagination="80" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Sort lines of text in <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines">sort-lines v1.9.0</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="80" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="81" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/Njanderson/resmon/raw/master/images/example.png");background-size:auto 50px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="81" data-paginate="true" data-theme="gaia" data-marpit-pagination="81" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Display CPU frequency, usage, memory consumption, and battery percentage remaining within the <img class="emoji" draggable="false" alt="🆚" src="https://twemoji.maxcdn.com/2/svg/1f19a.svg" data-marp-twemoji=""/> status bar.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor">resmon v1.0.7</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="81" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="82" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/funkyremi/vscode-google-translate/raw/master/demo.gif");background-size:auto 400px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="82" data-paginate="true" data-theme="gaia" data-marpit-pagination="82" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Quickly translate text right in your code <img class="emoji" draggable="false" alt="🚀" src="https://twemoji.maxcdn.com/2/svg/1f680.svg" data-marp-twemoji=""/>.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor">vscode-google-translate v1.4.7</a></li>
<li>Also <a href="https://marketplace.visualstudio.com/items?itemName=znck.grammarly">Grammarly</a> is available (unofficial).<br />
</li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="82" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="83" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/path.gif");background-size:auto 400px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="83" data-paginate="true" data-theme="gaia" data-marpit-pagination="83" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Autocompletes filenames.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">PathIntellisense v1.4.2</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="83" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="84" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/VSCodeVim/Vim/master/images/icon.png");background-size:auto 300px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="84" data-paginate="true" data-theme="gaia" data-marpit-pagination="84" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Vim emulator.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscodevim.vim">VSCodeVim/Vim v1.13.2</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="84" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="85" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/octref/polacode/master/demo/1.png");background-size:auto 500px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="85" data-paginate="true" data-theme="gaia" data-marpit-pagination="85" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Quickly save screenshots of your code.</li>
<li>Copy screenshots to your clipboard.</li>
<li>Draw over your screenshot.</li>
<li>Upload your image online.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=AdamMomen.screenify">screenify-vscode 0.0.4</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="85" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="86" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/octref/polacode/raw/master/demo/usage.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="86" data-paginate="true" data-theme="gaia" data-marpit-pagination="86" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Polacode — Polaroid for your code <img class="emoji" draggable="false" alt="📸" src="https://twemoji.maxcdn.com/2/svg/1f4f8.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode">polacode 0.3.4</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="86" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="87" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://github.com/hediet/vscode-drawio/raw/master/docs/demo.gif");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="87" data-paginate="true" data-theme="gaia" data-marpit-pagination="87" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>This extension integrates <a href="http://Draw.io">Draw.io</a> <img class="emoji" draggable="false" alt="📝" src="https://twemoji.maxcdn.com/2/svg/1f4dd.svg" data-marp-twemoji=""/></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio">vscode-drawio 0.3.0</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="87" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="88" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/Gruntfuggly/calendar/master/resources/screenshot.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="88" data-paginate="true" data-theme="gaia" data-marpit-pagination="88" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Show your upcoming events from your Google calendar in a tree view inside. It also allows simple events to be created, modified, and deleted.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.calendar">calendar 0.0.13</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="88" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="89" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://thumbs.gfycat.com/FarawayTerrificChameleon-max-14mb.gif");background-size:auto 400px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="89" data-paginate="true" data-theme="gaia" data-marpit-pagination="89" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Supercharging your Data Science workflow by previewing Jupyter Notebook</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=jithurjacob.nbpreviewer">vscode-nbpreviewer 1.1.2</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="89" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="90" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/tenor.gif");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="90" data-paginate="true" data-theme="gaia" data-marpit-pagination="90" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="90" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="91" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://aka.ms/vsls/quickstart/viewlet-host");background-size:auto 700px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="91" data-paginate="true" data-theme="gaia" data-marpit-pagination="91" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Allow you to collaboratively edit and debug with others in real time. <em>Preview</em> <img class="emoji" draggable="false" alt="⚠️" src="https://twemoji.maxcdn.com/2/svg/26a0.svg" data-marp-twemoji=""/></li>
<li><img class="emoji" draggable="false" alt="💓" src="https://twemoji.maxcdn.com/2/svg/1f493.svg" data-marp-twemoji=""/> <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare">vsliveshare v1.0.2048</a></li>
<li><img class="emoji" draggable="false" alt="💔" src="https://twemoji.maxcdn.com/2/svg/1f494.svg" data-marp-twemoji=""/> <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-audio">vsliveshare-audio v0.1.85</a></li>
<li><img class="emoji" draggable="false" alt="💓" src="https://twemoji.maxcdn.com/2/svg/1f493.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/2/svg/2795.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="💔" src="https://twemoji.maxcdn.com/2/svg/1f494.svg" data-marp-twemoji=""/> <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack">vsliveshare-pack v0.3.4</a></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="91" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="92" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/coll.png");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="92" data-paginate="true" data-theme="gaia" data-marpit-pagination="92" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;" data-marpit-advanced-background="content"></section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="92" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="93" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://sm.ign.com/ign_it/screenshot/default/takethis-1_uwed.jpg");"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="93" data-paginate="true" data-color="white" data-theme="gaia" data-marpit-pagination="93" data-marpit-pagination-total="97" style="--paginate:true;--color:white;--theme:gaia;color:white;" data-marpit-advanced-background="content"><br />
<br /><br />
<br /><br /><br />
<h1>Also...</h1>
<h1>code alone!</h1>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="color:white;" data-marpit-advanced-background="pseudo" data-marpit-pagination="93" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="94" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/img/spaces.png");background-size:auto 750px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="94" data-paginate="true" data-theme="gaia" data-marpit-pagination="94" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1><img src="https://badgen.net/badge/icon/awesome?icon=awesome&label" alt="h:50" style="height:50px;" /> <img class="emoji" draggable="false" alt="🔟" src="https://twemoji.maxcdn.com/2/svg/1f51f.svg" data-marp-twemoji=""/></h1>
<ul>
<li>Allow you to join one or more "spaces", and begin discovering, communicating and collaborating with other developers in real-time.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.spaces">vsls-contrib/spaces v0.1.48</a></li>
<li>Join space: <strong>isislab</strong></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="94" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="95" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://gist.githubusercontent.com/kevin-smets/9722391f8b3e4fa436b1c1dcf05ecd88/raw/bff605d541d087e34c19d4fb07c721fa6765a70a/powerlevel9k.png");background-size:auto 390px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="95" data-paginate="true" data-theme="gaia" data-marpit-pagination="95" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Last Long Story Short</h1>
<ul>
<li>Furnish your <img src="https://badgen.net/badge/icon/terminal?icon=terminal&label" alt="h:40" style="height:40px;" /> as your <img class="emoji" draggable="false" alt="🏠" src="https://twemoji.maxcdn.com/2/svg/1f3e0.svg" data-marp-twemoji=""/></li>
<li><img class="emoji" draggable="false" alt="🍎" src="https://twemoji.maxcdn.com/2/svg/1f34e.svg" data-marp-twemoji=""/> OS: iTerm2 + Oh My Zsh + Solarized color scheme + Source Code Pro Powerline + Font Awesome + Powerlevel10k</li>
<li><img src="https://pbs.twimg.com/profile_images/378800000511748515/e76f01df50223b718d216725c0cf6a89_400x400.jpeg" alt="h:50" style="height:50px;" /> popular <img class="emoji" draggable="false" alt="🐚" src="https://twemoji.maxcdn.com/2/svg/1f41a.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/2/svg/2795.svg" data-marp-twemoji=""/><img class="emoji" draggable="false" alt="➕" src="https://twemoji.maxcdn.com/2/svg/2795.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="95" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="96" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://camo.githubusercontent.com/e580c0b1a9f5de76a7a564ffd9f703052405dff8/68747470733a2f2f69616e79682e636f6d2f616d6574687973742f696d616765732f77696e646f77732e706e67");background-size:auto 450px;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="96" data-paginate="true" data-theme="gaia" data-marpit-pagination="96" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h1>Last Long Story Short</h1>
<ul>
<li>Do not soil the windows with mouseprints!</li>
<li><img class="emoji" draggable="false" alt="🍎" src="https://twemoji.maxcdn.com/2/svg/1f34e.svg" data-marp-twemoji=""/> OS: <a href="https://github.com/ianyh/Amethyst">Amethyst Tiling window manager</a></li>
<li><img class="emoji" draggable="false" alt="🐧" src="https://twemoji.maxcdn.com/2/svg/1f427.svg" data-marp-twemoji=""/> OS: <a href="https://i3wm.org/">i3 improved tiling wm</a> <img class="emoji" draggable="false" alt="➡️" src="https://twemoji.maxcdn.com/2/svg/27a1.svg" data-marp-twemoji=""/> <img class="emoji" draggable="false" alt="💓" src="https://twemoji.maxcdn.com/2/svg/1f493.svg" data-marp-twemoji=""/></li>
</ul>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="96" data-marpit-pagination-total="97"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-theme="gaia" data-marpit-pagination="97" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:34%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("https://i.pinimg.com/474x/f0/c7/2d/f0c72d2873fdbcd02b4576f410d82027.jpg");background-size:auto 500px;"></figure></div></section></foreignObject><foreignObject width="66%" height="720"><section id="97" data-paginate="true" data-theme="gaia" data-marpit-pagination="97" data-marpit-pagination-total="97" style="--paginate:true;--theme:gaia;--marpit-advanced-background-split:34%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<p><code>>Marp: Export Slide Deck... </code></p>
<p><code>>myworkingspace.html</code></p>
<pre><code class="language-bash"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-variable">$git</span> commit -m
<span class="hljs-string">"Here! My presentation is finished. Questions?"</span>
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-bash"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-variable">$git</span> push origin master
</span></span></foreignObject></svg></code></pre>
<pre><code class="language-bash"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-built_in">echo</span> <span class="hljs-string">'Thank your attention!'</span>
Thank your attention!
</span></span></foreignObject></svg></code></pre>
<p><a href="http://htmlpreview.github.io/?https%3A%2F%2Fraw.githubusercontent.com%2Fspagnuolocarmine%2Fspagnuolocarmine.github.io%2Fmaster%2Fassets%2Ffiles%2Fmyworkingspace%2Fmyworkingspace.html"><img src="https://img.shields.io/badge/HTML-Live%20Preview-red" alt="h:30" style="height:30px;" /></a> <a href="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/myworkingspace.html"><img src="https://img.shields.io/badge/HTML-RAW-gray" alt="h:30" style="height:30px;" /></a> <a href="https://raw.githubusercontent.com/spagnuolocarmine/spagnuolocarmine.github.io/master/assets/files/myworkingspace/myworkingspace.html"><img src="https://img.shields.io/badge/Markdown-Gists-blue" alt="h:30" style="height:30px;" /></a> <a href="mailto:cspagnuolo@unisa.it"><img src="https://img.shields.io/badge/%F0%9F%93%A7-cspagnuolo%40unisa.it-green" alt="h:30" style="height:30px;" /></a></p>
</section>
<script>!function(){"use strict";function t(t){Array.from(document.getElementsByTagName("svg"),e=>{if(e.hasAttribute("data-marpit-svg")){const{clientHeight:r,clientWidth:a}=e;e.style.transform||(e.style.transform="translateZ(0)");const o=t||e.currentScale||1,i=e.viewBox.baseVal.width/o,n=e.viewBox.baseVal.height/o,s=Math.min(r/n,a/i);Array.from(e.querySelectorAll(":scope > foreignObject"),t=>{const e=t.x.baseVal.value,o=t.y.baseVal.value;Array.from(t.querySelectorAll(":scope > section"),t=>{t.style.transformOrigin||(t.style.transformOrigin="0 0");const l=(a-s*i)/2-e,c=(r-s*n)/2-o;t.style.transform=`translate3d(${l}px,${c}px,0) scale(${s}) translate(${e}px,${o}px)`})})}})}const e=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};function r(a=!0){for(const e of"Apple Computer, Inc."===navigator.vendor?[t]:[])e();Array.from(document.querySelectorAll('svg[data-marp-fitting="svg"]'),t=>{const r=t.firstChild,a=r.firstChild,{scrollWidth:o,scrollHeight:i}=a;let n,s=1;if(t.hasAttribute("data-marp-fitting-code")&&(n=t.parentElement.parentElement),t.hasAttribute("data-marp-fitting-math")&&(n=t.parentElement),n){const t=getComputedStyle(n),e=Math.ceil(n.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight));e&&(s=e)}const l=Math.max(o,s),c=Math.max(i,1),p=`0 0 ${l} ${c}`;e(r,"width",""+l),e(r,"height",""+c),e(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),e(t,"viewBox",p)&&t.classList.toggle("__reflow__")}),a&&window.requestAnimationFrame(()=>r(a))}!function(){if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");window.marpCoreBrowserScript?console.warn("Marp Core's browser script has already executed."):(Object.defineProperty(window,"marpCoreBrowserScript",{value:!0}),r())}()}();
</script></foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="97" data-marpit-pagination-total="97"></section></foreignObject></svg></div><script>!function(){"use strict";var e=function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),a={},o=function(e,t){return(t=t||{}).index=s.indexOf(e),t.slide=e,t},i=function(e,t){a[e]=(a[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){return e&&!1!==n(t)}),!0)},c=function(e,t){s[e]&&(n&&l("deactivate",o(n,t)),n=s[e],l("activate",o(n,t)))},d=function(e,t){var r=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},u={off:i,on:function(e,t){return(a[e]||(a[e]=[])).push(t),i.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return s.indexOf(n);l("slide",o(s[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:s,destroy:function(e){l("destroy",o(n,e)),a={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u};function t(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function n(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}const r=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"];function s(e){e.parent.addEventListener("keydown",e=>{if(!e.target)return;const t=e.target;(r.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()})}function a(e){window.addEventListener("load",()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}})}function o(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")])});const r=r=>void 0!==e.fragments[t][n+r],s=(r,s)=>{t=r,n=s,e.fragments.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const a=t<r||t===r&&n<=s;e.setAttribute("data-bespoke-marp-fragment",a?"active":"inactive"),t===r&&n===s?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fragmentIndex=s;const a={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:s};e.fire("fragment",a)};e.on("next",()=>{if(r(1))return s(t,n+1),!1;const a=t+1;e.fragments[a]&&s(a,0)}),e.on("prev",()=>{if(r(-1))return s(t,n-1),!1;const a=t-1;e.fragments[a]&&s(a,e.fragments[a].length-1)}),e.on("slide",({index:t,fragment:n})=>{let r=0;if(void 0!==n){const s=e.fragments[t];if(s){const{length:e}=s;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}s(t,r)}),s(0,0)}var i,l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){
/*!
* screenfull
* v5.0.2 - 2020-02-13
* (c) Sindre Sorhus; MIT License
*/
!function(){var t="undefined"!=typeof window&&void 0!==window.document?window.document:{},n=e.exports,r=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,s=n.length,a={};r<s;r++)if((e=n[r])&&e[1]in t){for(r=0;r<e.length;r++)a[n[0][r]]=e[r];return a}return!1}(),s={change:r.fullscreenchange,error:r.fullscreenerror},a={request:function(e){return new Promise(function(n,s){var a=function(){this.off("change",a),n()}.bind(this);this.on("change",a);var o=(e=e||t.documentElement)[r.requestFullscreen]();o instanceof Promise&&o.then(a).catch(s)}.bind(this))},exit:function(){return new Promise(function(e,n){if(this.isFullscreen){var s=function(){this.off("change",s),e()}.bind(this);this.on("change",s);var a=t[r.exitFullscreen]();a instanceof Promise&&a.then(s).catch(n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=s[e];r&&t.addEventListener(r,n,!1)},off:function(e,n){var r=s[e];r&&t.removeEventListener(r,n,!1)},raw:r};r?(Object.defineProperties(a,{isFullscreen:{get:function(){return Boolean(t[r.fullscreenElement])}},element:{enumerable:!0,get:function(){return t[r.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(t[r.fullscreenEnabled])}}}),n?e.exports=a:window.screenfull=a):n?e.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}()}));l.isEnabled;function c(e){e.fullscreen=()=>{l.isEnabled&&l.toggle(document.body)},document.addEventListener("keydown",t=>{70!==t.which&&122!==t.which||t.altKey||t.ctrlKey||t.metaKey||!l.isEnabled||(e.fullscreen(),t.preventDefault())})}function d(e={}){const t=Object.assign({interval:200},e);return e=>{document.addEventListener("keydown",t=>{(32===t.which&&t.shiftKey||33===t.which||37===t.which||38===t.which)&&e.prev(),(32===t.which&&!t.shiftKey||34===t.which||39===t.which||40===t.which)&&e.next(),35===t.which&&e.slide(e.slides.length-1,{fragment:-1}),36===t.which&&e.slide(0)});let n,r,s=0;e.parent.addEventListener("wheel",a=>{let o=!1;const l=(e,t)=>{e&&(o=o||function(e,t){return function(e,t){const n=t===i.X?"Width":"Height";return e["client"+n]<e["scroll"+n]}(e,t)&&function(e,t){const{overflow:n}=e,r=e["overflow"+t];return"auto"===n||"scroll"===n||"auto"===r||"scroll"===r}(getComputedStyle(e),t)}(e,t)),(null==e?void 0:e.parentElement)&&l(e.parentElement,t)};if(0!==a.deltaX&&l(a.target,i.X),0!==a.deltaY&&l(a.target,i.Y),o)return;a.preventDefault(),r&&clearTimeout(r),r=setTimeout(()=>{n=0},t.interval);const c=Date.now()-s<t.interval,d=Math.sqrt(Math.pow(a.deltaX,2)+Math.pow(a.deltaY,2)),u=d<=n;if(n=d,c||u)return;let f;(a.deltaX>0||a.deltaY>0)&&(f="next"),(a.deltaX<0||a.deltaY<0)&&(f="prev"),f&&(e[f](),s=Date.now())})}}!function(e){e.X="X",e.Y="Y"}(i||(i={}));const u=(...e)=>history.replaceState(...e);var f;!function(e){e.Normal="",e.Presenter="presenter",e.Next="next"}(f||(f={}));const p=(e,{protocol:t,host:n,pathname:r,hash:s}=location)=>{const a=e.toString();return`${t}//${n}${r}${a?"?":""}${a}${s}`},m=()=>{switch(document.body.getAttribute("data-bespoke-view")){case f.Normal:return f.Normal;case f.Presenter:return f.Presenter;case f.Next:return f.Next;default:throw new Error("View mode is not assigned.")}},h=e=>new URLSearchParams(location.search).get(e),g=(e,t={})=>{const n=Object.assign({location:location,setter:u},t),r=new URLSearchParams(n.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?r.set(t,n):r.delete(t)}try{n.setter(null,document.title,p(r,n.location))}catch(e){console.error(e)}},b={available:(()=>{try{return localStorage.setItem("bespoke-marp","bespoke-marp"),localStorage.removeItem("bespoke-marp"),!0}catch(e){return console.warn("Warning: Using localStorage is restricted in the current host so some features may not work."),!1}})(),get:e=>{try{return localStorage.getItem(e)}catch(e){return null}},set:(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},remove:e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}}};function v(e=".bespoke-marp-osc"){const t=document.querySelector(e);if(!t)return()=>{};const n=(e,n)=>{t.querySelectorAll(`[data-bespoke-marp-osc=${JSON.stringify(e)}]`).forEach(n)};return l.isEnabled||n("fullscreen",e=>e.style.display="none"),b.available||n("presenter",e=>{e.disabled=!0,e.title="Presenter view is disabled due to restricted localStorage."}),e=>{t.addEventListener("click",t=>{if(t.target instanceof HTMLElement){const{bespokeMarpOsc:n}=t.target.dataset;switch(n&&t.target.blur(),n){case"next":e.next();break;case"prev":e.prev();break;case"fullscreen":"function"==typeof e.fullscreen&&l.isEnabled&&e.fullscreen();break;case"presenter":e.openPresenterView()}}}),e.parent.appendChild(t),e.on("activate",({index:t})=>{n("page",n=>n.textContent=`Page ${t+1} of ${e.slides.length}`)}),e.on("fragment",({index:t,fragments:r,fragmentIndex:s})=>{n("prev",e=>e.disabled=0===t&&0===s),n("next",n=>n.disabled=t===e.slides.length-1&&s===r.length-1)}),l.isEnabled&&l.onchange(()=>n("fullscreen",e=>e.classList.toggle("exit",l.isEnabled&&l.isFullscreen)))}}function w(){const e=Math.max(Math.floor(.85*window.innerWidth),640),t=Math.max(Math.floor(.85*window.innerHeight),360);return window.open(this.presenterUrl,"bespoke-marp-presenter-"+this.syncKey,`width=${e},height=${t},menubar=no,toolbar=no`)}function y(){const e=new URLSearchParams(location.search);return e.set("view","presenter"),e.set("sync",this.syncKey),p(e)}var x=["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"];let E=e=>String(e).replace(/[&<>"']/g,e=>`&${k[e]};`),k={"&":"amp","<":"lt",">":"gt",'"':"quot","'":"apos"},S="dangerouslySetInnerHTML",L={className:"class",htmlFor:"for"},I={};function P(e,t){let n=[],r="";t=t||{};for(let e=arguments.length;e-- >2;)n.push(arguments[e]);if("function"==typeof e)return t.children=n.reverse(),e(t);if(e){if(r+="<"+e,t)for(let e in t)!1!==t[e]&&null!=t[e]&&e!==S&&(r+=` ${L[e]?L[e]:E(e)}="${E(t[e])}"`);r+=">"}if(-1===x.indexOf(e)){if(t[S])r+=t[S].__html;else for(;n.length;){let e=n.pop();if(e)if(e.pop)for(let t=e.length;t--;)n.push(e[t]);else r+=!0===I[e]?e:E(e)}r+=e?`</${e}>`:""}return I[r]=!0,r}const M=({children:e})=>P(null,null,...e),N="bespoke-marp-presenter-container",F="bespoke-marp-presenter-next",O="bespoke-marp-presenter-next-container",T="bespoke-marp-presenter-note-container",q="bespoke-marp-presenter-info-container",C="bespoke-marp-presenter-info-page",$="bespoke-marp-presenter-info-page-text",j="bespoke-marp-presenter-info-page-prev",A="bespoke-marp-presenter-info-page-next",K="bespoke-marp-presenter-info-time",R="bespoke-marp-presenter-info-timer";function U(e){const{title:t}=document;document.title="[Presenter view]"+(t?" - "+t:"");const n={},r=e=>(n[e]=n[e]||document.querySelector("."+e),n[e]);document.body.appendChild((e=>{const t=document.createElement("div");return t.className=N,t.appendChild(e),t.insertAdjacentHTML("beforeend",P(M,null,P("div",{class:O},P("iframe",{class:F,src:"?view=next"})),P("div",{class:T}),P("div",{class:q},P("div",{class:C},P("button",{class:j,tabindex:"-1",title:"Previous"},"Previous"),P("span",{class:$}),P("button",{class:A,tabindex:"-1",title:"Next"},"Next")),P("time",{class:K,title:"Current time"}),P("div",{class:R})))),t})(e.parent)),(e=>{r(O).addEventListener("click",()=>e.next());const t=r(F),n=(s=t,(e,t)=>s.contentWindow.postMessage(`navigate:${e},${t}`,"null"===window.origin?"*":window.origin));var s;t.addEventListener("load",()=>{r(O).classList.add("active"),n(e.slide(),e.fragmentIndex),e.on("fragment",({index:e,fragmentIndex:t})=>n(e,t))});const a=document.querySelectorAll(".bespoke-marp-note");a.forEach(e=>{e.addEventListener("keydown",e=>e.stopPropagation()),r(T).appendChild(e)}),e.on("activate",()=>a.forEach(t=>t.classList.toggle("active",t.dataset.index==e.slide()))),e.on("activate",({index:t})=>{r($).textContent=`${t+1} / ${e.slides.length}`});const o=r(j),i=r(A);o.addEventListener("click",()=>{o.blur(),e.prev()}),i.addEventListener("click",()=>{i.blur(),e.next()}),e.on("fragment",({index:t,fragments:n,fragmentIndex:r})=>{o.disabled=0===t&&0===r,i.disabled=t===e.slides.length-1&&r===n.length-1});const l=()=>r(K).textContent=(new Date).toLocaleTimeString();l(),setInterval(l,250)})(e)}function V(e){const t=m();return t===f.Next&&e.appendChild(document.createElement("span")),e=>{t===f.Normal&&function(e){if(!(e=>e.syncKey&&"string"==typeof e.syncKey)(e))throw new Error("The current instance of Bespoke.js is invalid for Marp bespoke presenter plugin.");Object.defineProperties(e,{openPresenterView:{enumerable:!0,value:w},presenterUrl:{enumerable:!0,get:y}}),b.available&&document.addEventListener("keydown",t=>{80!==t.which||t.altKey||t.ctrlKey||t.metaKey||(t.preventDefault(),e.openPresenterView())})}(e),t===f.Presenter&&U(e),t===f.Next&&function(e){const t=t=>{if(t.origin!==window.origin)return;const[n,r]=t.data.split(":");if("navigate"===n){const[t,n]=r.split(",");e.slide(Number.parseInt(t,10),{fragment:Number.parseInt(n,10)}),e.next()}};window.addEventListener("message",t),e.on("destroy",()=>window.removeEventListener("message",t))}(e)}}function X(e){e.on("activate",t=>{document.querySelectorAll(".bespoke-progress-bar").forEach(n=>{n.style.flexBasis=100*t.index/(e.slides.length-1)+"%"})})}const D=e=>{const t=Number.parseInt(e,10);return Number.isNaN(t)?null:t};function Y(e={}){const t=Object.assign({history:!0},e);return e=>{let n=!0;const r=e=>{const t=n;try{return n=!0,e()}finally{n=t}},s=(t={fragment:!0})=>{((t,n)=>{const{fragments:r,slides:s}=e,a=Math.max(0,Math.min(t,s.length-1)),o=Math.max(0,Math.min(n||0,r[a].length-1));a===e.slide()&&o===e.fragmentIndex||e.slide(a,{fragment:o})})((D(location.hash.slice(1))||1)-1,t.fragment?D(h("f")||""):null)};e.on("fragment",({index:e,fragmentIndex:r})=>{n||g({f:0===r||r.toString()},{location:Object.assign(Object.assign({},location),{hash:"#"+(e+1)}),setter:(...e)=>t.history?history.pushState(...e):history.replaceState(...e)})}),setTimeout(()=>{s(),window.addEventListener("hashchange",()=>r(()=>{s({fragment:!1}),g({f:void 0})})),window.addEventListener("popstate",()=>{n||r(()=>s())}),n=!1},0)}}function B(e={}){const t=e.key||((e=21)=>{let t="",n=crypto.getRandomValues(new Uint8Array(e));for(;e--;){let r=63&n[e];t+=r<36?r.toString(36):r<62?(r-26).toString(36).toUpperCase():r<63?"_":"-"}return t})(),n="bespoke-marp-sync-"+t,r=()=>{const e=b.get(n);return e?JSON.parse(e):Object.create(null)},s=e=>{const t=r(),s=Object.assign(Object.assign({},t),e(t));return b.set(n,JSON.stringify(s)),s};return s(e=>({reference:(e.reference||0)+1})),e=>{Object.defineProperty(e,"syncKey",{value:t,enumerable:!0});let a=!0;setTimeout(()=>{e.on("fragment",e=>{a&&s(()=>({index:e.index,fragmentIndex:e.fragmentIndex}))})},0),window.addEventListener("storage",t=>{if(t.key===n&&t.oldValue&&t.newValue){const n=JSON.parse(t.oldValue),r=JSON.parse(t.newValue);if(n.index!==r.index||n.fragmentIndex!==r.fragmentIndex)try{a=!1,e.slide(r.index,{fragment:r.fragmentIndex})}finally{a=!0}}}),e.on("destroy",()=>{const{reference:e}=r();void 0===e||e<=1?b.remove(n):s(()=>({reference:e-1}))})}}function z(e={}){const t=Object.assign({slope:Math.tan(-35*Math.PI/180),swipeThreshold:30},e);return e=>{let n;const r=e.parent,s=e=>{const t=r.getBoundingClientRect();return{x:e.pageX-(t.left+t.right)/2,y:e.pageY-(t.top+t.bottom)/2}};r.addEventListener("touchstart",e=>{n=1===e.touches.length?s(e.touches[0]):void 0},{passive:!0}),r.addEventListener("touchmove",e=>{if(n)if(1===e.touches.length){e.preventDefault();const t=s(e.touches[0]),r=t.x-n.x,a=t.y-n.y;n.delta=Math.sqrt(Math.pow(Math.abs(r),2)+Math.pow(Math.abs(a),2)),n.radian=Math.atan2(r,a)}else n=void 0}),r.addEventListener("touchend",r=>{if(n){if(n.delta&&n.delta>=t.swipeThreshold){let s=n.radian-t.slope;s=(s+Math.PI)%(2*Math.PI)-Math.PI,e[s<0?"next":"prev"](),r.stopPropagation()}n=void 0}},{passive:!0})}}const H=[f.Normal,f.Presenter,f.Next];!function(r=document.getElementById("p")){document.body.setAttribute("data-bespoke-view",(()=>{switch(h("view")){case"next":return f.Next;case"presenter":return f.Presenter;default:return f.Normal}})());const i=(e=>{const t=h(e);return g({[e]:void 0}),t})("sync")||void 0,l=!1,u=!0,p=e(r,((...e)=>{const t=H.findIndex(e=>m()===e);if(t<0)throw new Error("Invalid view");return e.map(([e,n])=>e[t]&&n).filter(e=>e)})([[u,u,l],B({key:i})],[[u,u,u],V(r)],[[u,u,l],s],[[u,u,u],t],[[u,l,l],n()],[[u,u,u],a],[[u,u,u],Y({history:!1})],[[u,u,l],d()],[[u,u,l],c],[[u,l,l],X],[[u,u,l],z()],[[u,l,l],v()],[[u,u,u],o]));window.addEventListener("beforeunload",()=>g({sync:p.syncKey})),window.addEventListener("unload",()=>p.destroy())}()}();
</script></body></html>