PageSourceSearch

https://marp.app/

html marp.app collected 2026-10-02 06:06:22 UTC 105,540 bytes, 2 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Marp: Markdown Presentation Ecosystem</title><meta name="description" content="Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document."/><meta property="og:description" content="Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document."/><link rel="canonical" href="https://marp.app/"/><meta property="og:url" content="https://marp.app/"/><meta property="og:title" content="Marp: Markdown Presentation Ecosystem"/><meta property="og:type" content="website"/><meta property="og:image" content="https://marp.app/assets/og-image.png"/><meta property="twitter:card" content="summary_large_image"/><link rel="preload" href="/assets/hero-background.svg" as="image"/><meta name="next-head-count" content="12"/><link rel="icon" href="/favicon.png" type="image/png"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link rel="preload" href="/_next/static/css/b245a2f8a710d316.css" as="style"/><link rel="stylesheet" href="/_next/static/css/b245a2f8a710d316.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
1<script src="/_next/static/chunks/webpack-ca8e1a6acbfcca34.js" defer=""></script>
1<script src="/_next/static/chunks/framework-4b7b48f62ff0b3db.js" defer=""></script>
1<script src="/_next/static/chunks/main-e7aa5b637d97ecc0.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-16aab84d4efec672.js" defer=""></script>
1<script src="/_next/static/chunks/fba589a3-9b7499fb4034ad4e.js" defer=""></script>
1<script src="/_next/static/chunks/381-55c55ba8759bb492.js" defer=""></script>
1<script src="/_next/static/chunks/368-fb70fe59bea1861d.js" defer=""></script>
1<script src="/_next/static/chunks/765-022d53dea3b17eda.js" defer=""></script>
1<script src="/_next/static/chunks/pages/index-06d96ece844fa41f.js" defer=""></script>
1<script src="/_next/static/Gzdeapa5HSZum8IdYxv0F/_buildManifest.js" defer=""></script>
1<script src="/_next/static/Gzdeapa5HSZum8IdYxv0F/_ssgManifest.js" defer=""></script>
1<style id="__jsx-1492624892">:root{--header-height:calc(var(--root-font-size,1rem) * 4);}@media (min-width:768px){:root{--header-height:calc(var(--root-font-size,1rem) * 5);}}.header.jsx-1492624892{position:fixed;top:0px;left:0px;z-index:50;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:var(--header-height);width:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);}.header-item.jsx-1492624892{color:currentColor;-webkit-text-decoration-line:none;text-decoration-line:none;outline:2px solid transparent;outline-offset:2px;}.header-item.jsx-1492624892>svg{-webkit-transition-property:-webkit-transform;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transition-duration:200ms;transition-duration:200ms;}.header-item.jsx-1492624892:hover.jsx-1492624892:active>svg{--tw-scale-x:1.25;--tw-scale-y:1.25;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-sha
1dow);-webkit-transition-duration:0s;transition-duration:0s;}@media not all and (hover:none){.header-item.jsx-1492624892:hover.jsx-1492624892:active>svg{--tw-scale-x:1.1;--tw-scale-y:1.1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}}.nav-item.jsx-1492624892{margin-left:calc(var(--root-font-size,1rem) * 0.5);margin-right:calc(var(--root-font-size,1rem) * 0.5);font-family:Quicksand,Avenir,Century Gothic,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:calc(var(--root-font-size,1rem) * 1.125);line-height:calc(var(--root-font-size,1rem) * 1.75);font-weight:500;text-transform:uppercase;line-height:1;outline:2px solid transparent;outline-offset:2px;}.nav-item.jsx-1492624892::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:'';}.header-item.focus-visible.jsx-1492624892,.nav-item.focus-visible.jsx-1492624892::before{--tw-bg-opacity:1;background-color:rgb(237 242 247 / var(--tw-bg-opacity));}.header-item.jsx-1492624892:focus-visible,.nav-item.jsx-1492624892:focus-visible.jsx-1492624892::before{--tw-bg-opacity:1;background-color:rgb(237 242 247 / var(--tw-bg-opacity));}.header-item.jsx-1492624892:not(.nav-item){-webkit-tap-highlight-color:transparent;}@media (min-width:768px){.nav-item.jsx-1492624892{margin-left:calc(var(--root-font-size,1rem) * 0.75);margin-right:calc(var(--root-font-size,1rem) * 0.75);-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;}}.nav-item.jsx-1492624892>span.jsx-1492624892{position:relative;z-index:10;}.nav-item.jsx-1492624892>span.jsx-1492624892::after{position:absolute;left:0px;right:0px;margin-top:calc(var(--root-font-size,1rem) * 0.25);display:block;height:calc(var(--root-font-size,1rem) * 0.25);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transition-duration:300ms;transition-duration:300ms;content:'';top:100%;}.nav-item.jsx-1492624892:hover>span.jsx-1492624892::after,.nav-item.jsx-1492624892:focus-within>span.jsx-1492624892::after{box-shadow:inset 0 calc(var(--root-font-size,1rem) * -0.25) #cbd5e0;}.nav-item.active.jsx-1492624892>span.jsx-1492624892::after{-webkit-transition-duration:0s;transition-duration:0s;box-shadow:inset 0 calc(var(--root-font-size,1rem) * -0.25) #0288d1;}.nav-item.jsx-1492624892:hover.jsx-1492624892:active>span.jsx-1492624892::after{-webkit-transition-duration:0s;transition-duration:0s;box-shadow:inset 0 calc(var(--root-font-size,1rem) * -0.25) #02669d;}</style><style id="__jsx-3188879822">.button.jsx-3188879822{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));text-align:center;font-weight:700;-webkit-text-decoration-line:none;text-decoration-line:none;--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);padding:0.625em 1.25em;-webkit-transition:color,background-color,opacity;transition:color,background-color,opacity;}@media (min-width:768px){.button.jsx-3188879822{-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;}}.button.jsx-3188879822:hover{--tw-bg-opacity:1;background-color:rgb(248 248 248 / var(--tw-bg-opacity));-webkit-transition-duration:150ms;transition-duration:150ms;}.button.jsx-3188879822:hover.jsx-3188879822:active{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
1dow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255 / var(--tw-ring-opacity));--tw-ring-offset-width:2px;-webkit-transition-duration:0s;transition-duration:0s;}.button.jsx-3188879822:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255 / var(--tw-ring-opacity));--tw-ring-offset-width:2px;}.button.primary.jsx-3188879822{--tw-bg-opacity:1;background-color:rgb(2 136 209 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));background-image:linear-gradient( 30deg, transparent, rgba(255,255,255,0.3) );}.button.primary.jsx-3188879822:hover{--tw-bg-opacity:1;background-color:rgb(2 119 183 / var(--tw-bg-opacity));}.button.primary.jsx-3188879822:hover.jsx-3188879822:active{--tw-bg-opacity:1;background-color:rgb(2 102 157 / var(--tw-bg-opacity));}.button.btnOutline.jsx-3188879822{--tw-text-opacity:1;color:rgb(45 55 72 / var(--tw-text-opacity));}.button.btnOutline.jsx-3188879822::after{pointer-events:none;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:block;border-width:2px;border-color:currentColor;border-radius:inherit;content:'';-webkit-transition:inherit;transition:inherit;}.button.btnOutline.primary.jsx-3188879822{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(2 119 183 / var(--tw-text-opacity));background-image:none;}.button.btnOutline.primary.jsx-3188879822:hover{--tw-bg-opacity:1;background-color:rgb(2 119 183 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));}.button.btnOutline.primary.jsx-3188879822:hover.jsx-3188879822::after{opacity:0;}</style><style id="__jsx-1286020378">section.jsx-1286020378{background:#fcfcfc url('/assets/hero-background.svg') no-repeat right center;background-size:cover;}</style><style id="__jsx-3816599786">.code-block-container.jsx-3816599786{position:relative;}.prism-code.jsx-3816599786{overflow-x:auto;overflow-y:hidden;white-space:pre;overflow-wrap:break-word;border-radius:calc(var(--root-font-size,1rem) * 0.375);border-width:1px;font-size:calc(var(--root-font-size,1rem) * 0.875);line-height:calc(var(--root-font-size,1rem) * 1.25);font-family:inherit;background-image:var(--noise-image);}.prism-code.jsx-3816599786 code.jsx-3816599786{display:inline-block;min-width:100%;padding:calc(var(--root-font-size,1rem) * 1);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}.prism-code.line-number.jsx-3816599786{white-space:pre-wrap;}.prism-code.line-number.jsx-3816599786 ol.jsx-3816599786{counter-reset:line 0;}.prism-code.line-number.jsx-3816599786 li.jsx-3816599786{position:relative;padding-left:calc(var(--root-font-size,1rem) * 3);counter-increment:line;}.prism-code.line-number.jsx-3816599786 li.jsx-3816599786::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;width:calc(var(--root-font-size,1rem) * 3);padding-right:calc(var(--root-font-size,1rem) * 0.75);text-align:right;font-size:calc(var(--root-font-size,1rem) * 0.75);line-height:calc(var(--root-font-size,1rem) * 1.25);--tw-text-opacity:1;color:rgb(160 174 192 / var(--tw-text-opacity));content:counter(line);}.copy-btn-container.jsx-3816599786{position:absolute;top:0px;right:0px;margin:calc(var(--root-font-size,1rem) * 0.75);}.copy-btn-container.jsx-3816599786 button{width:calc(var(--root-font-size,1rem) * 6);padding-top:calc(var(--root-font-size,1rem) * 0.25);padding-bottom:calc(var(--root-font-size,1rem) * 0.25);font-size:calc(var(--root-font-size,1rem) * 0.75);line-height:calc(var(--root-font-size,1rem) * 1);opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transition-duration:300ms;transition-duration:300ms;}.code-block-container.jsx-3816599786:hover .copy-btn-container.jsx-3816599786 button,.copy-btn-container.jsx-3816599786 button:focus{opacity:1;}</style><style id="__jsx-1291840810">.show-example-section.jsx-1291840810{margin-left:auto;margin-right:auto;margin-top:calc(var(--root-font-size,1rem) * 2);width:83.333333%;text-align:center;}.show-example-section.jsx-1291840810 .show-example-btn{font-size:calc(var(--root-font-size,1rem) * 0.875);line-height:calc(var(--root-font-size,1rem) * 1.25);}.show-example-section.jsx-1291840810 .show-example-btn-chevron{margin-left:calc(var(--root-font-size,1rem) * 0.25);
1height:calc(var(--root-font-size,1rem) * 1);width:calc(var(--root-font-size,1rem) * 1);-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-transition-property:-webkit-transform;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transition-duration:300ms;transition-duration:300ms;}@media (min-width:768px){.show-example-section.jsx-1291840810 .show-example-btn-chevron{margin-top:calc(var(--root-font-size,1rem) * -0.25);margin-bottom:calc(var(--root-font-size,1rem) * -0.25);height:calc(var(--root-font-size,1rem) * 1.5);width:calc(var(--root-font-size,1rem) * 1.5);}}.show-example-section.jsx-1291840810 .show-example-btn-chevron:not(.show){position:relative;top:-1px;}.show-example-section.jsx-1291840810 .show-example-btn-chevron.show{--tw-rotate:-180deg;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}@media (min-width:768px){.show-example-section.jsx-1291840810 .show-example-btn-chevron:not(.show){top:-2px;}}</style><style id="__jsx-978252925">.card.jsx-978252925{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-978252925{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-978252925 svg,.card-icon.jsx-978252925 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-978252925 svg,.card-icon.jsx-978252925 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-978252925{grid-row:1 / span 2;}.card.jsx-978252925:first-child{margin-top:0px;}.card.jsx-978252925:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-2100154526">.card.jsx-2100154526{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-2100154526{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-2100154526 svg,.card-icon.jsx-2100154526 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-2100154526 svg,.card-icon.jsx-2100154526 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-2100154526{grid-row:2 / span 2;}.card.jsx-2100154526:first-child{margin-top:0px;}.card.jsx-2100154526:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-2464222399">.card.jsx-2464222399{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-2464222399{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-2464222399 svg,.card-icon.jsx-2464222399 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-2464222399 svg,.card-icon.jsx-2464222399 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-2464222399{grid-row:3 / span 2;}.card.jsx-2464222399:first-child{margin-top:0px;}.card.jsx-2464222399:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-3889481432">.card.jsx-3889481432{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-3889481432{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-3889481432 svg,.card-icon.jsx-3889481432 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-3889481432 svg,.card-icon.jsx-3889481432 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-3889481432{grid-row:4 / span 2;}.card.jsx-3889481432:first-child{margin-top:0px;}.card.jsx-3889481432:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-4253549305">.card.jsx-4253549305{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-4253549305{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-4253549305 svg,.card-icon.jsx-4253549305 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-4253549305 svg,.card-icon.jsx-4253549305 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-4253549305{grid-row:5 / span 2;}.card.jsx-4253549305:first-child{margin-top:0px;}.card.jsx-4253549305:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-1080483610">.card.jsx-1080483610{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-1080483610{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-1080483610 svg,.card-icon.jsx-1080483610 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-1080483610 svg,.card-icon.jsx-1080483610 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-1080483610{grid-row:6 / span 2;}.card.jsx-1080483610:first-child{margin-top:0px;}.card.jsx-1080483610:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-1444551483">.card.jsx-1444551483{position:relative;z-index:10;margin-left:calc(var(--root-font-size,1rem) * 1);margin-right:calc(var(--root-font-size,1rem) * 1);margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);margin-bottom:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 1.5);--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-column:1;}.card-icon.jsx-1444551483{margin-top:calc(var(--root-font-size,1rem) * 0.5);margin-bottom:calc(var(--root-font-size,1rem) * 0.5);text-align:center;--tw-text-opacity:1;color:rgb(74 85 104 / var(--tw-text-opacity));}.card-icon.jsx-1444551483 svg,.card-icon.jsx-1444551483 img{display:inline;height:calc(var(--root-font-size,1rem) * 3);width:calc(var(--root-font-size,1rem) * 3);}@media (min-width:1024px){.card-icon.jsx-1444551483 svg,.card-icon.jsx-1444551483 img{height:calc(var(--root-font-size,1rem) * 4);width:calc(var(--root-font-size,1rem) * 4);}}@media (min-width:768px){.card.jsx-1444551483{grid-row:7 / span 2;}.card.jsx-1444551483:first-child{margin-top:0px;}.card.jsx-1444551483:nth-of-type(even){grid-column:2;}}</style><style id="__jsx-889103205">.features.jsx-889103205{position:relative;padding-top:calc(var(--root-font-size,1rem) * 1.25);padding-bottom:calc(var(--root-font-size,1rem) * 1.25);}.features.jsx-889103205::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:block;background-image:var(--noise-image), linear-gradient( -8deg, rgba(120,197,233,0), rgba(120,197,233,0) 50%, rgba(120,197,233,0.5) );-webkit-clip-path:polygon(0 15vw,100% 0,100% 100%,0 100%);-webkit-clip-path:polygon(0 15vw,100% 0,100% 100%,0 100%);clip-path:polygon(0 15vw,100% 0,100% 100%,0 100%);content:'';}.features-grid.jsx-889103205{margin-left:auto;margin-right:auto;display:grid;padding-left:calc(var(--root-font-size,1rem) * 1);padding-right:calc(var(--root-font-size,1rem) * 1);grid-template-columns:1fr;grid-template-rows:repeat(8,auto);}@media (min-width:768px){.features-grid.jsx-889103205{grid-template-columns:1fr 1fr;}}</style><style id="__jsx-1708753951">.card.jsx-1708753951{position:relative;margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);display:grid;overflow:hidden;border-radius:calc(var(--root-font-size,1rem) * 0.5);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));padding:calc(var(--root-font-size,1rem) * 0.5);--tw-text-opacity:1;color:rgb(45 55 72 / var(--tw-text-opacity));--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);grid-template-columns:1fr;}.card.jsx-1708753951::before{position:absolute;right:0px;height:calc(var(--root-font-size,1rem) * 10);width:calc(var(--root-font-size,1rem) * 10);-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0.25;content:'';top:calc(var(--root-font-size,1rem) * -2);-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg);}.card.vscode.jsx-1708753951::before{background-image:url('data:image/svg+xml; charset=utf-8,%3Csvg role%3D%22img%22 viewBox%3D%220 0 24 24%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2232%22 height%3D%2232%22 fill%3D%22%2367b8e3%22%3E%3Ctitle%3EVisual Studio Code icon%3C%2Ftitle%3E%3Cpath d%3D%22M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z%22%2F%3E%3C%2Fsvg%3E');}.card.cli.jsx-1708753951::before{background-image:url('data:image/svg+xml; charset=utf-8,%3Csvg version%3D%221.1%22 width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 16 16%22 class%3D%22octicon octicon-terminal%22 aria-hidden%3D%22true%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 fill%3D%22%2367b8e3%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z%22%2F%3E%3C%2Fsvg%3E');}.card.core.jsx-1708753951::before{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 60 40%22%3E%3Cpath fill%3D%22%23009bda%22 d%3D%22M40 0L0 40h20l20-20V0z%22%2F%3E%3Cpath fill%3D%22%2378c5e9%22 d%3D%22M40 20v20h20V0L40 20z%22%2F%3E%3Cpath fill%3D%22%23007aad%22 d%3D%22M20 40h20V20L20 40z%22%2F%3E%3C%2Fsvg%3E");}.card.marpit.jsx-1708753951::before{background-image:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 60 40%22%3E%3Cpath d%3D%22M38.4 22.4V.8L0 39.2h60V.8zM2.9 38L37.2 3.7v19.9L22.8 38zm21.6 0l12.7-12.7V38zm34.3 0H38.4V24.1L58.8 3.7z%22 fill%3D%22%230288d1%22%2F%3E%3C%2Fsvg%3E");}.card.jsx-1708753951>*.jsx-1708753951{position:relative;grid-column-start:1;grid-column-end:1;}.card.jsx-1708753951>figure.jsx-1708753951{margin-left:auto;margin-right:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:calc(var(--root-font-size,1rem) * 1);}.card.jsx-1708753951>figure.jsx-1708753951>img.jsx-1708753951{max-width:100%;width:calc(var(--root-font-size,1rem) * 28);}.card-link.jsx-1708753951{position:relative;z-index:10;display:block;border-radius:calc(var(--root-font-size,1rem) * 0.25);padding:calc(var(--root-font-size,1rem) * 1.25);-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transition-duration:150ms;transition-duration:150ms;}.card-link.jsx-1708753951:hover,.card-link.jsx-1708753951:focus{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);
1--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);background-color:rgba(255,255,255,0.5);}.card-link.jsx-1708753951:hover.jsx-1708753951:active,.card-link.jsx-1708753951:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255 / var(--tw-ring-opacity));--tw-ring-offset-width:2px;-webkit-transition-duration:0s;transition-duration:0s;}@media (min-width:1024px){.card.screenshot.jsx-1708753951{grid-template-columns:3fr 2fr;}.card.jsx-1708753951>figure.jsx-1708753951{grid-column-start:2;grid-column-end:2;height:100%;width:100%;-o-object-fit:contain;object-fit:contain;padding-left:calc(var(--root-font-size,1rem) * 1.5);padding-right:calc(var(--root-font-size,1rem) * 1.5);padding-top:0px;padding-bottom:0px;grid-row:1 / span 9999;}.card.jsx-1708753951::before{height:calc(var(--root-font-size,1rem) * 16);width:calc(var(--root-font-size,1rem) * 16);top:calc(var(--root-font-size,1rem) * -4);}}@media (min-width:1280px){.card.jsx-1708753951{margin-left:auto;margin-right:auto;width:83.333333%;}}</style><style id="__jsx-2645168911">.get-started.jsx-2645168911{position:relative;--tw-bg-opacity:1;background-color:rgb(2 136 209 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));background-image:var(--noise-image), linear-gradient( -2deg, #0277b7, #0288d1 500px );}.get-started.jsx-2645168911::before,.get-started.jsx-2645168911::after{position:absolute;left:0px;right:0px;display:block;background-image:var(--noise-image), linear-gradient(to bottom,rgba(255,255,255,0.4),transparent 95%);bottom:calc(100% - 5px);content:'';-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);z-index:-1;}.get-started.jsx-2645168911::before{--tw-bg-opacity:1;background-color:rgb(103 184 227 / var(--tw-bg-opacity));-webkit-clip-path:polygon(0 0,100% 90%,100% 100%,0 100%);-webkit-clip-path:polygon(0 0,100% 90%,100% 100%,0 100%);clip-path:polygon(0 0,100% 90%,100% 100%,0 100%);height:calc(120px + 5vw);}.get-started.jsx-2645168911::after{--tw-bg-opacity:1;background-color:rgb(2 136 209 / var(--tw-bg-opacity));-webkit-clip-path:polygon(0 0,100% 95%,100% 100%,0 100%);-webkit-clip-path:polygon(0 0,100% 95%,100% 100%,0 100%);clip-path:polygon(0 0,100% 95%,100% 100%,0 100%);height:calc(60px + 5vw);}</style><style id="__jsx-2976856660">main.jsx-2976856660{min-height:calc(100vh - calc(var(--root-font-size,1rem) * 8.5));}@media (min-width:768px){main.jsx-2976856660{min-height:calc(100vh - calc(var(--root-font-size,1rem) * 9.5));}}</style><style id="__jsx-1351492622">.scroll-to-top.jsx-1351492622{pointer-events:none;position:fixed;right:0px;bottom:0px;z-index:50;-webkit-filter:drop-shadow(0 0px 7px rgba(0,0,0,0.3)) drop-shadow(0 0px 4px rgba(0,0,0,0.15));filter:drop-shadow(0 0px 7px rgba(0,0,0,0.3)) drop-shadow(0 0px 4px rgba(0,0,0,0.15));}button.jsx-1351492622{pointer-events:auto;height:calc(var(--root-font-size,1rem) * 5);width:calc(var(--root-font-size,1rem) * 5);-webkit-appearance:none;-moz-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;--tw-bg-opacity:1;background-color:rgb(103 184 227 / var(--tw-bg-opacity));vertical-align:top;--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity));-webkit-clip-path:polygon(100% 0,100% 100%,0 100%);-webkit-clip-path:polygon(100% 0,100% 100%,0 100%);clip-path:polygon(100% 0,100% 100%,0 100%);}button.jsx-1351492622:hover{--tw-bg-opacity:1;background-color:rgb(2 136 209 / var(--tw-bg-opacity));}button.jsx-1351492622:focus{outline:2px solid transparent;outline-offset:2px;}button.jsx-1351492622:focus,button.jsx-1351492622:hover.jsx-1351492622:active{--tw-bg-opacity:1;background-color:rgb(2 102 157 / var(--tw-bg-opacity));}button.jsx-1351492622 .scroll-to-top-icon{height:auto;left:52%;position:absolute;top:52%;width:35%;}</style><style id="__jsx-3096867650">footer.jsx-3096867650{--tw-bg-opacity:1;background-color:rgb(45 55 72 / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(160 174 192 / var(--tw-text-opacity));min-height:calc(var(--root-font-size,1rem) * 4.5);background-image:var(--noise-image);}</style><style data-href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Quicksand:wght@500;700&display=swap">@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
1src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZs.woff) format('woff')}@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o18I.woff) format('woff')}@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv18I.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
1src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hJFQNYuDyP7bh.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hJVQNYuDyP7bh.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
1unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hJFQNYuDyP7bh.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hJVQNYuDyP7bh.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/quicksand/v37/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><header class="jsx-1492624892 header"><a role="link" tabindex="0" class="jsx-1492624892 custom-anchor header-item" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" class="block h-16 w-16 p-2 md:h-20 md:w-20 md:p-3"><path fill="#009bda" d="M40 0 0 40h20l20-20V0z"></path><path fill="#78c5e9" d="M40 20v20h20V0L40 20z"></path><path fill="#007aad" d="M20 40h20V20L20 40z"></path></svg><span class="jsx-1492624892 sr-only">Marp</span></a><nav class="jsx-1492624892 ml-2"><ul class="jsx-1492624892 flex h-16 items-stretch md:h-20"><li class="jsx-1492624892 relative flex items-center justify-center"><a role="link" tabindex="0" class="jsx-1492624892 custom-anchor header-item nav-item" href="/blog"><span class="jsx-1492624892">Blog</span></a></li><li class="jsx-1492624892 relative flex items-center justify-center"><a href="https://github.com/marp-team/marp" target="_blank" rel="noopener noreferrer" class="jsx-1492624892 custom-anchor header-item nav-item"><span class="jsx-1492624892">GitHub</span></a></li></ul></nav></header><main class="jsx-2976856660 relative mt-16 md:mt-20"><section class="jsx-1286020378 border-b py-16 px-4 md:py-24 md:tracking-wider"><h1 class="jsx-1286020378 font-rounded text-center font-bold sm:text-xl md:text-2xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522.5 160" class="mx-auto mb-5 h-auto w-4/5 max-w-xl p-3"><defs><style>.marp_svg__d{fill:none;stroke:#000;stroke-linecap:square;stroke-miterlimit:10;stroke-width:5px}</style></defs><path fill="#67b8e3" d="m250 0-90 90v70h90V0z"></path><path fill="#0288d1" d="M160 0 0 160h90l70-70V0z"></path><path fill="#02669d" d="M90 160h70V90l-70 70z"></path><path class="marp_svg__d" d="M300 110V50l30 30 30-30v60"></path><circle class="marp_svg__d" cx="400" cy="90" r="20"></circle><path class="marp_svg__d" d="M440 90a20.1 20.1 0 0 1 20-20m-40 0v40"></path><circle class="marp_svg__d" cx="500" cy="90" r="20"></circle><path class="marp_svg__d" d="M480 70v60m-40-60v40"></path></svg><span class="jsx-1286020378 sr-only">Marp:</span>Markdown Presentation Ecosystem</h1><p class="jsx-1286020378 mt-10 text-center"><a href="#get-started" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary text-xl md:text-2xl">Get started!</a></p><p class="jsx-1286020378 mt-5 text-center"><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marp" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary btnOutline text-sm md:text-base">Find Marp tools on GitHub!</a></p></section><section class="jsx-1291840810 container mx-auto py-16"><h2 class="jsx-1291840810 text-gradient mx-auto w-5/6 text-center text-3xl font-bold md:text-4xl">Create beautiful slide decks using an intuitive Markdown experience</h2><p class="jsx-1291840810 mx-auto mt-8 w-5/6 md:text-lg lg:w-2/3">Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.</p><figure class="jsx-1291840810 m-8 mb-0 text-center"><div class="border shadow-lg inline-block w-full max-w-sm"><span></span></div><div class="border shadow-lg mt-5 inline-block w-full max-w-sm lg:ml-5 lg:mt-0"><span></span></div><figcaption class="jsx-1291840810 mt-5 text-sm text-gray-700">The slides above are from generated directly from<!-- --> <a href="https://github.com/marp-team/marp-core" class="jsx-1291840810">Marp Core</a></figcaption></figure><p class="jsx-1291840810 show-example-section"><button aria-expanded="false" class="jsx-3188879822 button show-example-btn">Show<!-- --> Markdown example...<svg aria-hidden="true" focusable="false" role="img" class="show-example-btn-chevron" viewB
1ox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg></button></p><div aria-hidden="true" style="max-height:0" class="jsx-1291840810 overflow-hidden transition-all duration-300"><div class="jsx-3816599786 code-block-container mx-auto mt-5 w-5/6 xl:w-2/3"><pre style="color:#403f53;background-color:#f5f5f5" class="jsx-3816599786 line-number prism-code language-markdown"><code class="jsx-3816599786 code-block"><ol class="jsx-3816599786 code-block"><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">---</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786">theme</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786"> gaia</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786">_class</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786"> lead</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786">paginate</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786"> </span><span class="jsx-3816599786" style="color:rgb(188, 84, 84);font-weight:bold">true</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786">backgroundColor</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786"> </span><span class="jsx-3816599786" style="color:rgb(152, 159, 177);font-style:italic">#fff</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786">backgroundImage</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786"> url(&#x27;https</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">:</span><span class="jsx-3816599786">//marp.app/assets/hero</span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">-</span><span class="jsx-3816599786">background.svg&#x27;)</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">---</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="color:rgb(12, 150, 155)">!</span><span class="jsx-3816599786" style="color:rgb(72, 118, 214)">[</span><span class="jsx-3816599786" style="color:rgb(72, 118, 214)">bg left:40% 80%</span><span class="jsx-3816599786" style="color:rgb(72, 118, 214)">](</span><span class="jsx-3816599786" style="color:rgb(72, 118, 214)">https://marp.app/assets/marp.svg</span><span class="jsx-3816599786" style="color:rgb(72, 118, 214)">)</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="font-weight:bold;color:rgb(153, 76, 195)">#</span><span class="jsx-3816599786" style="font-weight:bold"> **Marp**</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">Markdown Presentation Ecosystem</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">https://marp.app/</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">---</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="font-weight:bold;color:rgb(153, 76, 195)">#</span><span class="jsx-3816599786" style="font-weight:bold"> How to write slides</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">Split pages by horizontal ruler (</span><span class="jsx-3816599786" style="color:rgb(12, 150, 155)">`---`</span><span class="jsx-3816599786">). It&#x27;s very simple! :satisfied:</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">```</span><span class="jsx-3816599786">markdown</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786"># Slide 1</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">foobar</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">---</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"># Slide 2</span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><br class="jsx-3816599786"/></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786">foobar</span><span class="jsx-3816599786"></span></li><li class="jsx-3816599786 token-line code-block" style="color:#403f53"><span class="jsx-3816599786"></span><span class="jsx-3816599786" style="color:rgb(153, 76, 195)">```</span></li></ol></code></pre></div></div></section><div class="jsx-889103205 features"><div class="jsx-889103205 features-grid container"><section class="jsx-978252925 card"><div class="jsx-978252925"><div class="jsx-978252925 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-markdown" viewB
1ox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path></svg></div><h2 class="jsx-978252925 text-gradient my-4 text-center text-2xl font-semibold">Based on CommonMark</h2><p class="jsx-978252925 text-sm lg:text-base">If you know how to write a document with Markdown, you already know how to write a Marp slide deck. Marp&#x27;s format is based on<!-- --> <a href="https://commonmark.org/" target="_blank" rel="noopener noreferrer">CommonMark</a>, a consistent Markdown specification. The only important difference is<!-- --> <a href="https://marpit.marp.app/markdown" rel="noopener noreferrer" target="_blank">a ruler <code>---</code> for splitting pages.</a></p></div></section><section class="jsx-2100154526 card"><div class="jsx-2100154526"><div class="jsx-2100154526 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-code-square" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm9.22 3.72a.75.75 0 000 1.06L10.69 8 9.22 9.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM6.78 6.53a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 101.06-1.06L5.31 8l1.47-1.47z"></path></svg></div><h2 class="jsx-2100154526 text-gradient my-4 text-center text-2xl font-semibold">Directives and extended syntax</h2><p class="jsx-2100154526 text-sm lg:text-base">Sometimes simple text content isn&#x27;t enough to emphasize your voice, so Marp supports a variety of<!-- --> <a href="https://marpit.marp.app/directives" rel="noopener noreferrer" target="_blank">directives</a> <!-- -->and extended syntax (<a href="https://marpit.marp.app/image-syntax" rel="noopener noreferrer" target="_blank">image syntax</a>,<!-- --> <a href="https://github.com/marp-team/marp-core#math-typesetting" rel="noopener noreferrer" target="_blank">math typesetting</a>,<!-- --> <a href="https://github.com/marp-team/marp-core#auto-scaling-features" rel="noopener noreferrer" target="_blank">auto-scaling</a>, etc...) to create beautiful slides.</p></div></section><section class="jsx-2464222399 card"><div class="jsx-2464222399"><div class="jsx-2464222399 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-paintbrush" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M11.134 1.535C9.722 2.562 8.16 4.057 6.889 5.312 5.8 6.387 5.041 7.401 4.575 8.294a3.745 3.745 0 00-3.227 1.054c-.43.431-.69 1.066-.86 1.657a11.982 11.982 0 00-.358 1.914A21.263 21.263 0 000 15.203v.054l.75-.007-.007.75h.054a14.404 14.404 0 00.654-.012 21.243 21.243 0 001.63-.118c.62-.07 1.3-.18 1.914-.357.592-.17 1.226-.43 1.657-.861a3.745 3.745 0 001.055-3.217c.908-.461 1.942-1.216 3.04-2.3 1.279-1.262 2.764-2.825 3.775-4.249.501-.706.923-1.428 1.125-2.096.2-.659.235-1.469-.368-2.07-.606-.607-1.42-.55-2.069-.34-.66.213-1.376.646-2.076 1.155zm-3.95 8.48a3.76 3.76 0 00-1.19-1.192 9.758 9.758 0 011.161-1.607l1.658 1.658a9.853 9.853 0 01-1.63 1.142zM.742 16l.007-.75-.75.008A.75.75 0 00.743 16zM12.016 2.749c-1.224.89-2.605 2.189-3.822 3.384l1.718 1.718c1.21-1.205 2.51-2.597 3.387-3.833.47-.662.78-1.227.912-1.662.134-.444.032-.551.009-.575h-.001V1.78c-.014-.014-.112-.113-.548.027-.432.14-.995.462-1.655.942zM1.62 13.089a19.56 19.56 0 00-.104 1.395 19.55 19.55 0 001.396-.104 10.528 10.528 0 001.668-.309c.526-.151.856-.325 1.011-.48a2.25 2.25 0 00-3.182-3.182c-.155.155-.329.485-.48 1.01a10.515 10.515 0 00-.309 1.67z"></path></svg></div><h2 class="jsx-2464222399 text-gradient my-4 text-center text-2xl font-semibold">Built-in themes and CSS theming</h2><p class="jsx-2464222399 text-sm lg:text-base"><a href="https://github.com/marp-team/marp-core/" rel="noopener noreferrer" target="_blank">Our core engine</a> <!-- -->has<!-- --> <a href="https://github.com/marp-team/marp-core/tree/main/themes" rel="noopener noreferrer" target="_blank">3 built-in themes called <code>default</code>, <code>gaia</code>, and<!-- --> <code>uncover</code></a>, to tell your story beautifully. If you&#x27;d rather customize your design, you can use Marp to<!-- --> <a href="https://marpit.marp.app/theme-css?id=tweak-style-through-markdown" rel="noopener noreferrer" target="_blank">tweak styles with Markdown</a>, or<!-- --> <a href="https://marpit.marp.app/theme-css" rel="noopener noreferrer" target="_blank">create your own Marp theme with plain CSS</a>.</p></div></section><section class="jsx-3889481432 card"><div class="jsx-3889481432"><div class="jsx-3889481432 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-file" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 019 4.25V1.5H3.75zm6.75.062V4.25c0 .138.112.25.25.25h2.688a.252.252 0 00-.011-.013l-2.914-2.914a.272.272 0 00-.013-.011zM2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16h-9.5A1.75 1.75 0 012 14.25V1.75z"></path></svg></div><h2 class="jsx-3889481432 text-gradient my-4 text-center text-2xl font-semibold">Export to HTML, PDF, and PowerPoint</h2><p class="jsx-3889481432 text-sm lg:text-base">Have you finished writing? It&#x27;s time to share your deck! Marp can convert Markdown into presentation-ready HTML, PDF and PowerPoint files directly! (Powered by<!-- --> <a href="https://www.google.com/chrome/" rel="noopener noreferrer" target="_blank">Google Chrome</a> <!-- -->/<!-- --> <a href="https://www.chromium.org/Home" rel="noopener noreferrer" target="_blank">Chromium</a>)</p></div></section><section class="jsx-4253549305 card"><div class="jsx-4253549305"><div class="jsx-4253549305 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-package" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.
1125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg></div><h2 class="jsx-4253549305 text-gradient my-4 text-center text-2xl font-semibold">Marp family: The official toolset</h2><p class="jsx-4253549305 text-sm lg:text-base">The Marp ecosystem contains a rich toolset to assist your work.<!-- --> <a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode" rel="noopener noreferrer" target="_blank"><b>Marp for VS Code</b></a> <!-- -->is an extension that allows you to edit and preview slide Markdown and custom theming within VS Code.<!-- --> <a href="https://github.com/marp-team/marp-cli/" rel="noopener noreferrer" target="_blank"><b>Marp CLI</b></a> <!-- -->is a command line tool allows you to convert Markdown with a simple CLI interface.<!-- --> <a href="https://github.com/marp-team/marp/" rel="noopener noreferrer" target="_blank">... and much more!</a></p></div></section><section class="jsx-1080483610 card"><div class="jsx-1080483610"><div class="jsx-1080483610 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-plug" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M10.276 3.09a.25.25 0 01.192-.09h.782a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-.782a.25.25 0 01-.192-.09l-.95-1.14a.75.75 0 00-.483-.264l-3.124-.39a.25.25 0 01-.219-.249V5.133a.25.25 0 01.219-.248l3.124-.39a.75.75 0 00.483-.265l.95-1.14zM4 8v1.867a1.75 1.75 0 001.533 1.737l2.83.354.761.912c.332.4.825.63 1.344.63h.782A1.75 1.75 0 0013 11.75V11h2.25a.75.75 0 000-1.5H13v-4h2.25a.75.75 0 000-1.5H13v-.75a1.75 1.75 0 00-1.75-1.75h-.782c-.519 0-1.012.23-1.344.63l-.76.913-2.831.353A1.75 1.75 0 004 5.133V6.5H2.5A2.5 2.5 0 000 9v5.25a.75.75 0 001.5 0V9a1 1 0 011-1H4z"></path></svg></div><h2 class="jsx-1080483610 text-gradient my-4 text-center text-2xl font-semibold">Pluggable architecture</h2><p class="jsx-1080483610 text-sm lg:text-base">As a matter of fact,<!-- --> <em>Marp is essentially just a converter for Markdown.</em> The Marp ecosystem is built on<!-- --> <a href="https://marpit.marp.app" rel="noopener noreferrer" target="_blank"><b>the Marpit framework</b></a>, a skinny framework for creating HTML/CSS slide decks. It has a pluggable architecture and any developer can<!-- --> <a href="https://marpit.marp.app/usage?id=extend-marpit-by-plugins" rel="noopener noreferrer" target="_blank">extend features via plugins</a>.</p></div></section><section class="jsx-1444551483 card"><div class="jsx-1444551483"><div class="jsx-1444551483 card-icon"><svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-heart-fill" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:top;overflow:visible"><path fill-rule="evenodd" d="M7.655 14.916L8 14.25l.345.666a.752.752 0 01-.69 0zm0 0L8 14.25l.345.666.002-.001.006-.003.018-.01a7.643 7.643 0 00.31-.17 22.08 22.08 0 003.433-2.414C13.956 10.731 16 8.35 16 5.5 16 2.836 13.914 1 11.75 1 10.203 1 8.847 1.802 8 3.02 7.153 1.802 5.797 1 4.25 1 2.086 1 0 2.836 0 5.5c0 2.85 2.045 5.231 3.885 6.818a22.075 22.075 0 003.744 2.584l.018.01.006.003h.002z"></path></svg></div><h2 class="jsx-1444551483 text-gradient my-4 text-center text-2xl font-semibold">Fully open-source</h2><p class="jsx-1444551483 text-sm lg:text-base">The Marp team loves open source! All tools and related libraries are built by<!-- --> <a href="https://github.com/marp-team" rel="noopener noreferrer" target="_blank">the Marp team</a> <!-- -->and are MIT-licensed.</p></div></section></div></div><div id="get-started" class="jsx-2645168911 get-started flow-root"><section class="jsx-2645168911 container mx-auto py-10 px-8 lg:px-16"><h3 class="jsx-2645168911 text-center text-2xl font-bold sm:text-3xl"><mark class="jsx-2645168911">Tools and integrations</mark></h3><section class="jsx-1708753951 card vscode screenshot"><a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode" target="_blank" rel="noopener noreferrer" class="jsx-1708753951 custom-anchor card-link"><h4 class="jsx-1708753951 text-gradient inline-block pr-3 pb-1 text-xl font-bold sm:text-2xl md:text-3xl">Marp for VS Code</h4><img src="https://img.shields.io/github/v/release/marp-team/marp-vscode.svg?style=flat-square&amp;label=&amp;color=0288d1" alt="" loading="lazy" class="jsx-1708753951 inline rounded-sm align-text-top sm:align-baseline"/><p class="jsx-1708753951 pt-1 text-sm leading-tight text-gray-700">Create slide decks written in Marp Markdown right in VS Code</p></a><figure class="jsx-1708753951"><img src="/assets/marp-for-vs-code.png" alt="Marp for VS Code" loading="lazy" width="1946" height="1424" class="jsx-1708753951"/></figure><p class="jsx-1708753951 mx-5 lg:my-3">Enhance VS Code&#x27;
1s Markdown preview pane to support writing your beautiful presentations. You can preview the slide deck output as soon as you edit its Markdown.</p><p class="jsx-1708753951 mx-5 my-4 text-sm"><a target="_blank" rel="noopener noreferrer" href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary mr-2 mb-2">VS Marketplace</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marp-vscode" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button btnOutline mr-2 mb-2">GitHub</a></p></section><section class="jsx-1708753951 card cli screenshot"><a href="https://github.com/marp-team/marp-cli" target="_blank" rel="noopener noreferrer" class="jsx-1708753951 custom-anchor card-link"><h4 class="jsx-1708753951 text-gradient inline-block pr-3 pb-1 text-xl font-bold sm:text-2xl md:text-3xl">Marp CLI</h4><img src="https://img.shields.io/npm/v/@marp-team/marp-cli.svg?style=flat-square&amp;label=&amp;color=0288d1" alt="" loading="lazy" class="jsx-1708753951 inline rounded-sm align-text-top sm:align-baseline"/><p class="jsx-1708753951 pt-1 text-sm leading-tight text-gray-700">A CLI interface for Marp and Marpit based converters</p></a><figure class="jsx-1708753951"><img src="/assets/marp-cli.png" alt="Marp CLI" loading="lazy" width="1400" height="800" class="jsx-1708753951"/></figure><p class="jsx-1708753951 mx-5 lg:my-3">The Marp CLI is the swiss army knife of the Marp ecosystem. Convert your Markdown into various formats, watch changes, launch server for on-demand conversion, and customize the core engine.</p><p class="jsx-1708753951 mx-5 my-4 text-sm"><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marp-cli/releases" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary mr-2 mb-2">Releases</a><a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/@marp-team/marp-cli" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary btnOutline mr-2 mb-2">npm</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marp-cli" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button btnOutline mr-2 mb-2">GitHub</a></p></section><h3 class="jsx-2645168911 text-center text-2xl font-bold sm:text-3xl"><mark class="jsx-2645168911">For developers</mark></h3><section class="jsx-1708753951 card core"><a href="https://github.com/marp-team/marp-core" target="_blank" rel="noopener noreferrer" class="jsx-1708753951 custom-anchor card-link"><h4 class="jsx-1708753951 text-gradient inline-block pr-3 pb-1 text-xl font-bold sm:text-2xl md:text-3xl">Marp Core</h4><img src="https://img.shields.io/npm/v/@marp-team/marp-core.svg?style=flat-square&amp;label=&amp;color=0288d1" alt="" loading="lazy" class="jsx-1708753951 inline rounded-sm align-text-top sm:align-baseline"/><p class="jsx-1708753951 pt-1 text-sm leading-tight text-gray-700">The core of the Marp converter</p></a><p class="jsx-1708753951 mx-5 lg:my-3">All official Marp tooling uses this core as the engine. It is based on the Marpit framework and includes some extra features to help create beautiful slide decks.</p><p class="jsx-1708753951 mx-5 my-4 text-sm"><a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/@marp-team/marp-core" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary btnOutline mr-2 mb-2">npm</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marp-core" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button btnOutline mr-2 mb-2">GitHub</a></p></section><section class="jsx-1708753951 card marpit"><a href="https://marpit.marp.app/" target="_blank" rel="noopener noreferrer" class="jsx-1708753951 custom-anchor card-link"><h4 class="jsx-1708753951 text-gradient inline-block pr-3 pb-1 text-xl font-bold sm:text-2xl md:text-3xl">Marpit framework</h4><img src="https://img.shields.io/npm/v/@marp-team/marpit.svg?style=flat-square&amp;label=&amp;color=0288d1" alt="" loading="lazy" class="jsx-1708753951 inline rounded-sm align-text-top sm:align-baseline"/><p class="jsx-1708753951 pt-1 text-sm leading-tight text-gray-700">The skinny framework for creating slide decks from Markdown</p></a><p class="jsx-1708753951 mx-5 lg:my-3">Marpit (independent from Marp) is the framework that transforms Markdown and CSS themes to slide decks composed of HTML/CSS. It is optimized to output only the minimum set of assets required.</p><p class="jsx-1708753951 mx-5 my-4 text-sm"><a target="_blank" rel="noopener noreferrer" href="https://marpit.marp.app/" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary mr-2 mb-2">Documentation</a><a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/@marp-team/marpit" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button primary btnOutline mr-2 mb-2">npm</a><a target="_blank" rel="noopener noreferrer" href="https://github.com/marp-team/marpit" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button btnOutline mr-2 mb-2">GitHub</a></p></section><p class="jsx-2645168911 mt-4 text-center">Find all of the Marp tools, integrations, and examples in the GitHub repository!</p><p class="jsx-2645168911 text-foreground mt-4 text-center text-sm"><a rel="noopener" target="_blank" href="https://github.com/marp-team/marp/" role="button" tabindex="0" class="jsx-3188879822 custom-anchor button">Check out Marp GitHub repository...</a></p></section></div></main><footer class="jsx-3096867650"><div class="jsx-3096867650 container mx-auto table"><p class="jsx-3096867650 mx-6 my-5 mr-20 leading-loose">Copyright © 2019-<!-- -->2026<!-- --> Marp team. <iframe src="https://ghbtns.com/github-btn.html?user=marp-team&amp;repo=marp&amp;type=star&amp;count=true" frameBorder="0" scrolling="0" width="150" height="20" title="GitHub" loading="lazy" class="jsx-3096867650 inline-block align-text-top"></iframe></p><div class="jsx-1351492622 scroll-to-top"><button title="Scroll to top" class="jsx-1351492622"><svg aria-hidden="true" focusable="false" role="img" class="scroll-to-top-icon" viewB
1ox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path fill-rule="evenodd" d="M3.47 7.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L9 4.81v7.44a.75.75 0 01-1.5 0V4.81L4.53 7.78a.75.75 0 01-1.06 0z"></path></svg><span class="jsx-1351492622 sr-only">Scroll to top</span></button></div></div></footer></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"example":{"markdown":"---\ntheme: gaia\n_class: lead\npaginate: true\nbackgroundColor: #fff\nbackgroundImage: url('https://marp.app/assets/hero-background.svg')\n---\n\n![bg left:40% 80%](https://marp.app/assets/marp.svg)\n\n# **Marp**\n\nMarkdown Presentation Ecosystem\n\nhttps://marp.app/\n\n---\n\n# How to write slides\n\nSplit pages by horizontal ruler (`---`). It's very simple! :satisfied:\n\n```markdown\n# Slide 1\n\nfoobar\n\n---\n\n# Slide 2\n\nfoobar\n```","html":["\u003csvg data-marpit-svg=\"\" viewBox=\"0 0 1280 720\"\u003e\u003cforeignObject width=\"1280\" height=\"720\"\u003e\u003csection data-paginate=\"true\" data-background-color=\"#fff\" data-background-image=\"url('https://marp.app/assets/hero-background.svg')\" data-class=\"lead\" data-theme=\"gaia\" class=\"lead\" data-marpit-pagination=\"1\" data-marpit-pagination-total=\"2\" style=\"--paginate:true;--background-color:#fff;--background-image:url('https://marp.app/assets/hero-background.svg');--class:lead;--theme:gaia;background-color:#fff;background-image:url('https://marp.app/assets/hero-background.svg');background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:40%;\" data-marpit-advanced-background=\"background\" data-marpit-advanced-background-split=\"left\"\u003e\u003cdiv data-marpit-advanced-background-container=\"true\" data-marpit-advanced-background-direction=\"horizontal\"\u003e\u003cfigure style=\"background-image:url(\u0026quot;https://marp.app/assets/marp.svg\u0026quot;);background-size:80%;\"\u003e\u003c/figure\u003e\u003c/div\u003e\u003c/section\u003e\u003c/foreignObject\u003e\u003cforeignObject width=\"60%\" height=\"720\" x=\"40%\"\u003e\u003csection id=\"1\" data-paginate=\"true\" data-background-color=\"#fff\" data-background-image=\"url('https://marp.app/assets/hero-background.svg')\" data-class=\"lead\" data-theme=\"gaia\" class=\"lead\" data-marpit-pagination=\"1\" data-marpit-pagination-total=\"2\" style=\"--paginate:true;--background-color:#fff;--background-image:url('https://marp.app/assets/hero-background.svg');--class:lead;--theme:gaia;background-color:#fff;background-image:url('https://marp.app/assets/hero-background.svg');background-position:center;background-repeat:no-repeat;background-size:cover;--marpit-advanced-background-split:40%;\" data-marpit-advanced-background=\"content\" data-marpit-advanced-background-split=\"left\"\u003e\n\u003ch1 id=\"marp\"\u003e\u003cstrong\u003eMarp\u003c/strong\u003e\u003c/h1\u003e\n\u003cp\u003eMarkdown Presentation Ecosystem\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://marp.app/\"\u003ehttps://marp.app/\u003c/a\u003e\u003c/p\u003e\n\u003c/section\u003e\n\u003c/foreignObject\u003e\u003cforeignObject width=\"1280\" height=\"720\" data-marpit-advanced-background=\"pseudo\"\u003e\u003csection data-paginate=\"true\" data-background-color=\"#fff\" data-background-image=\"url('https://marp.app/assets/hero-background.svg')\" data-class=\"lead\" data-theme=\"gaia\" class=\"lead\" data-marpit-pagination=\"1\" data-marpit-pagination-total=\"2\" style=\"\" data-marpit-advanced-background=\"pseudo\" data-marpit-advanced-background-split=\"left\"\u003e\u003c/section\u003e\u003c/foreignObject\u003e\u003c/svg\u003e","\u003csvg data-marpit-svg=\"\" viewBox=\"0 0 1280 720\"\u003e\u003cforeignObject width=\"1280\" height=\"720\"\u003e\u003csection id=\"2\" data-paginate=\"true\" data-background-color=\"#fff\" data-background-image=\"url('https://marp.app/assets/hero-background.svg')\" data-theme=\"gaia\" data-marpit-pagination=\"2\" data-marpit-pagination-total=\"2\" style=\"--paginate:true;--background-color:#fff;--background-image:url('https://marp.app/assets/hero-background.svg');--theme:gaia;background-color:#fff;background-image:url('https://marp.app/assets/hero-background.svg');background-position:center;background-repeat:no-repeat;background-size:cover;\"\u003e\n\u003ch1 id=\"how-to-write-slides\"\u003eHow to write slides\u003c/h1\u003e\n\u003cp\u003eSplit pages by horizontal ruler (\u003ccode\u003e---\u003c/code\u003e). It's very simple! \u003cimg class=\"emoji\" draggable=\"false\" alt=\"😆\" src=\"https://cdn.jsdelivr.net/gh/jdecked/[email protected]/assets/svg/1f606.svg\" data-marp-twemoji=\"\"/\u003e\u003c/p\u003e\n\u003cpre is=\"marp-pre\" data-auto-scaling=\"downscale-only\"\u003e\u003ccode class=\"language-markdown\"\u003e\u003cspan class=\"hljs-section\"\u003e# Slide 1\u003c/span\u003e\n\nfoobar\n\n---\n\n\u003cspan class=\"hljs-section\"\u003e# Slide 2\u003c/span\u003e\n\nfoobar\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003c/foreignObject\u
1003e\u003c/svg\u003e"],"css":"@charset \"UTF-8\";/* latin *//* latin-ext *//* latin *//* latin-ext *//* greek *//* latin *//* cyrillic *//* latin-ext *//* vietnamese *//* cyrillic-ext *//* greek *//* latin *//* cyrillic *//* latin-ext *//* vietnamese *//* cyrillic-ext */svg\u003eforeignObject\u003esection{width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;scroll-snap-align:center center}svg\u003eforeignObject\u003esection:after{bottom:0;content:attr(data-marpit-pagination);padding:inherit;pointer-events:none;position:absolute;right:0}svg\u003eforeignObject\u003esection:not([data-marpit-pagination]):after{display:none}/* Normalization */svg\u003eforeignObject\u003esection :is(h1,marp-h1){font-size:2em;margin:0.67em 0}svg\u003eforeignObject\u003esection video::-webkit-media-controls{will-change:transform}svg\u003eforeignObject\u003esection img[data-marp-twemoji]{background:transparent;height:1em;margin:0 .05em 0 .1em;vertical-align:-.1em;width:1em}\n/*!\n * Marp / Marpit Gaia theme.\n *\n * @theme gaia\n * @author Yuki Hattori\n *\n * @auto-scaling true\n * @size 16:9 1280px 720px\n * @size 4:3 960px 720px\n */svg\u003eforeignObject\u003esection :is(pre,marp-pre) code.hljs{display:block;overflow-x:auto;padding:1em}svg\u003eforeignObject\u003esection code.hljs{padding:3px 5px}svg\u003eforeignObject\u003esection .hljs{background:#000;color:#f8f8f8}svg\u003eforeignObject\u003esection .hljs-comment,svg\u003eforeignObject\u003esection .hljs-quote{color:#aeaeae;font-style:italic}svg\u003eforeignObject\u003esection .hljs-keyword,svg\u003eforeignObject\u003esection .hljs-selector-tag,svg\u003eforeignObject\u003esection .hljs-type{color:#e28964}svg\u003eforeignObject\u003esection .hljs-string{color:#65b042}svg\u003eforeignObject\u003esection .hljs-subst{color:#daefa3}svg\u003eforeignObject\u003esection .hljs-link,svg\u003eforeignObject\u003esection .hljs-regexp{color:#e9c062}svg\u003eforeignObject\u003esection .hljs-name,svg\u003eforeignObject\u003esection .hljs-section,svg\u003eforeignObject\u003esection .hljs-tag,svg\u003eforeignObject\u003esection .hljs-title{color:#89bdff}svg\u003eforeignObject\u003esection .hljs-class .hljs-title,svg\u003eforeignObject\u003esection .hljs-doctag,svg\u003eforeignObject\u003esection .hljs-title.class_{text-decoration:underline}svg\u003eforeignObject\u003esection .hljs-bullet,svg\u003eforeignObject\u003esection .hljs-number,svg\u003eforeignObject\u003esection .hljs-symbol{color:#3387cc}svg\u003eforeignObject\u003esection .hljs-params,svg\u003eforeignObject\u003esection .hljs-template-variable,svg\u003eforeignObject\u003esection .hljs-variable{color:#3e87e3}svg\u003eforeignObject\u003esection .hljs-attribute{color:#cda869}svg\u003eforeignObject\u003esection .hljs-meta{color:#8996a8}svg\u003eforeignObject\u003esection .hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}svg\u003eforeignObject\u003esection .hljs-addition{background-color:#253b22;color:#f8f8f8}svg\u003eforeignObject\u003esection .hljs-deletion{background-color:#420e09;color:#f8f8f8}svg\u003eforeignObject\u003esection .hljs-selector-class{color:#9b703f}svg\u003eforeignObject\u003esection .hljs-selector-id{color:#8b98ab}svg\u003eforeignObject\u003esection .hljs-emphasis{font-style:italic}svg\u003eforeignObject\u003esection .hljs-strong{font-weight:700}svg\u003eforeignObject\u003esection :is(h1,marp-h1),svg\u003eforeignObject\u003esection :is(h2,marp-h2),svg\u003eforeignObject\u003esection :is(h3,marp-h3),svg\u003eforeignObject\u003esection :is(h4,marp-h4),svg\u003eforeignObject\u003esection :is(h5,marp-h5),svg\u003eforeignObject\u003esection :is(h6,marp-h6){margin:.5em 0 0}svg\u003eforeignObject\u003esection :is(h1,marp-h1) strong,svg\u003eforeignObject\u003esection :is(h2,marp-h2) strong,svg\u003eforeignObject\u003esection :is(h3,marp-h3) strong,svg\u003eforeignObject\u003esection :is(h4,marp-h4) strong,svg\u003eforeignObject\u003esection :is(h5,marp-h5) strong,svg\u003eforeignObject\u003esection :is(h6,marp-h6) strong{font-weight:inherit}svg\u003eforeignObject\u003esection :is(h1,marp-h1)::part(auto-scaling),svg\u003eforeignObject\u
1003esection :is(h2,marp-h2)::part(auto-scaling),svg\u003eforeignObject\u003esection :is(h3,marp-h3)::part(auto-scaling),svg\u003eforeignObject\u003esection :is(h4,marp-h4)::part(auto-scaling),svg\u003eforeignObject\u003esection :is(h5,marp-h5)::part(auto-scaling),svg\u003eforeignObject\u003esection :is(h6,marp-h6)::part(auto-scaling){max-height:580px}svg\u003eforeignObject\u003esection :is(h1,marp-h1){font-size:1.8em}svg\u003eforeignObject\u003esection :is(h2,marp-h2){font-size:1.5em}svg\u003eforeignObject\u003esection :is(h3,marp-h3){font-size:1.3em}svg\u003eforeignObject\u003esection :is(h4,marp-h4){font-size:1.1em}svg\u003eforeignObject\u003esection :is(h5,marp-h5){font-size:1em}svg\u003eforeignObject\u003esection :is(h6,marp-h6){font-size:.9em}svg\u003eforeignObject\u003esection blockquote,svg\u003eforeignObject\u003esection p{margin:1em 0 0}svg\u003eforeignObject\u003esection ol\u003eli,svg\u003eforeignObject\u003esection ul\u003eli{margin:.3em 0 0}svg\u003eforeignObject\u003esection ol\u003eli\u003ep,svg\u003eforeignObject\u003esection ul\u003eli\u003ep{margin:.6em 0 0}svg\u003eforeignObject\u003esection code{display:inline-block;font-family:Roboto Mono,monospace;font-size:.8em;letter-spacing:0;margin:-.1em .15em;padding:.1em .2em;vertical-align:baseline}svg\u003eforeignObject\u003esection :is(pre,marp-pre){display:block;margin:1em 0 0;overflow:visible}svg\u003eforeignObject\u003esection :is(pre,marp-pre) code{box-sizing:border-box;font-size:.7em;margin:0;min-width:100%;padding:.5em}svg\u003eforeignObject\u003esection :is(pre,marp-pre)::part(auto-scaling){max-height:calc(580px - 1em)}svg\u003eforeignObject\u003esection blockquote{margin:1em 0 0;padding:0 1em;position:relative}svg\u003eforeignObject\u003esection blockquote:after,svg\u003eforeignObject\u003esection blockquote:before{content:\"“\";display:block;font-family:Times New Roman,serif;font-weight:700;position:absolute}svg\u003eforeignObject\u003esection blockquote:before{left:0;top:0}svg\u003eforeignObject\u003esection blockquote:after{bottom:0;right:0;transform:rotate(180deg)}svg\u003eforeignObject\u003esection blockquote\u003e:first-child{margin-top:0}svg\u003eforeignObject\u003esection mark{background:transparent}svg\u003eforeignObject\u003esection table{border-collapse:collapse;border-spacing:0;margin:1em 0 0}svg\u003eforeignObject\u003esection table td,svg\u003eforeignObject\u003esection table th{border-style:solid;border-width:1px;padding:.2em .4em}svg\u003eforeignObject\u003esection footer,svg\u003eforeignObject\u003esection header,svg\u003eforeignObject\u003esection:after{box-sizing:border-box;font-size:66%;height:70px;line-height:50px;overflow:hidden;padding:10px 25px;position:absolute}svg\u003eforeignObject\u003esection:after{--marpit-root-font-size:66%}svg\u003eforeignObject\u003esection header{top:0}svg\u003eforeignObject\u003esection footer,svg\u003eforeignObject\u003esection header{left:0;right:0}svg\u003eforeignObject\u003esection footer{bottom:0}svg\u003eforeignObject\u003esection{word-wrap:break-word;--color-background:#fff8e1;--color-background-stripe:rgba(69,90,100,.1);--color-foreground:#455a64;--color-dimmed:#6a7a7d;--color-highlight:#0288d1;background-color:var(--color-background);background-image:linear-gradient(135deg,hsla(0,0%,53%,0),hsla(0,0%,53%,.02) 50%,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.05));color:var(--color-foreground);font-family:Lato,Avenir Next,Avenir,Trebuchet MS,Segoe UI,sans-serif;font-size:35px;height:720px;letter-spacing:1.25px;line-height:1.35;padding:70px;width:1280px}svg\u003eforeignObject\u003esection{--marpit-root-font-size:35px}svg\u003eforeignObject\u003esection:after{bottom:0;font-size:80%;right:0}svg\u003eforeignObject\u003esection:after{--marpit-root-font-size:80%}svg\u003eforeignObject\u003esection a,svg\u003eforeignObject\u003esection mark{color:var(--color-highlight)}svg\u003eforeignObject\u003esection code{background:var(--color-dimmed);color:var(--color-background)}svg\u003eforeignObject\u003esection :is(h1,marp-h1) strong,svg\u003eforeignObject\u003esection :is(h2,marp-h2) strong,svg\u003eforeignObject\u
1003esection :is(h3,marp-h3) strong,svg\u003eforeignObject\u003esection :is(h4,marp-h4) strong,svg\u003eforeignObject\u003esection :is(h5,marp-h5) strong,svg\u003eforeignObject\u003esection :is(h6,marp-h6) strong{color:var(--color-highlight)}svg\u003eforeignObject\u003esection :is(pre,marp-pre){background:var(--color-foreground)}svg\u003eforeignObject\u003esection :is(pre,marp-pre)\u003ecode{background:transparent}svg\u003eforeignObject\u003esection blockquote:after,svg\u003eforeignObject\u003esection blockquote:before,svg\u003eforeignObject\u003esection footer,svg\u003eforeignObject\u003esection header,svg\u003eforeignObject\u003esection section:after{color:var(--color-dimmed)}svg\u003eforeignObject\u003esection table td,svg\u003eforeignObject\u003esection table th{border-color:var(--color-foreground)}svg\u003eforeignObject\u003esection table thead th{background:var(--color-foreground);color:var(--color-background)}svg\u003eforeignObject\u003esection table tbody\u003etr:nth-child(odd) td,svg\u003eforeignObject\u003esection table tbody\u003etr:nth-child(odd) th{background:var(--color-background-stripe,transparent)}svg\u003eforeignObject\u003esection\u003e:first-child,svg\u003eforeignObject\u003esection\u003eheader:first-child+*{margin-top:0}svg\u003eforeignObject\u003esection:where(.invert){--color-background:#455a64;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#dad8c8;--color-highlight:#81d4fa}svg\u003eforeignObject\u003esection:where(.gaia){--color-background:#0288d1;--color-background-stripe:rgba(255,248,225,.1);--color-foreground:#fff8e1;--color-dimmed:#cce2de;--color-highlight:#81d4fa}svg\u003eforeignObject\u003esection:where(.lead){display:flex;flex-flow:column nowrap;justify-content:center}svg\u003eforeignObject\u003esection:where(.lead) :is(h1,marp-h1),svg\u003eforeignObject\u003esection:where(.lead) :is(h2,marp-h2),svg\u003eforeignObject\u003esection:where(.lead) :is(h3,marp-h3),svg\u003eforeignObject\u003esection:where(.lead) :is(h4,marp-h4),svg\u003eforeignObject\u003esection:where(.lead) :is(h5,marp-h5),svg\u003eforeignObject\u003esection:where(.lead) :is(h6,marp-h6){text-align:center}svg\u003eforeignObject\u003esection:where(.lead) p{text-align:center}svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h1,marp-h1),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h2,marp-h2),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h3,marp-h3),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h4,marp-h4),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h5,marp-h5),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003e:is(h6,marp-h6),svg\u003eforeignObject\u003esection:where(.lead) blockquote\u003ep{text-align:left}svg\u003eforeignObject\u003esection:where(.lead) ol\u003eli\u003ep,svg\u003eforeignObject\u003esection:where(.lead) ul\u003eli\u003ep{text-align:left}svg\u003eforeignObject\u003esection:where(.lead) table{margin-left:auto;margin-right:auto}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]:after,svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]:before,svg\u003eforeignObject\u003esection[data-marpit-advanced-background=content]:after,svg\u003eforeignObject\u003esection[data-marpit-advanced-background=content]:before{display:none!important}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]\u003ediv[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]\u003ediv[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background][data-marpit-advanced-background-split]\u003ediv[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}
1svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]\u003ediv[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=background]\u003ediv[data-marpit-advanced-background-container]\u003efigure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=content],svg\u003eforeignObject\u003esection[data-marpit-advanced-background=pseudo]{background:transparent!important}svg\u003eforeignObject\u003esection[data-marpit-advanced-background=pseudo],svg[data-marpit-svg]\u003eforeignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}svg\u003eforeignObject\u003esection[data-marpit-advanced-background-split]{width:100%;height:100%}","fonts":["@font-face {\n  font-family: 'Lato';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/lato/files/lato-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/lato/files/lato-latin-400-normal.woff) format('woff'); \n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}","@font-face {\n  font-family: 'Lato';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/lato/files/lato-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/lato/files/lato-latin-ext-400-normal.woff) format('woff'); \n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}","@font-face {\n  font-family: 'Lato';\n  font-style: normal;\n  font-weight: 900;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/lato/files/lato-latin-900-normal.woff2) format('woff2'), url(https://fonts.bunny.net/lato/files/lato-latin-900-normal.woff) format('woff'); \n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}","@font-face {\n  font-family: 'Lato';\n  font-style: normal;\n  font-weight: 900;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/lato/files/lato-latin-ext-900-normal.woff2) format('woff2'), url(https://fonts.bunny.net/lato/files/lato-latin-ext-900-normal.woff) format('woff'); \n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-greek-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-greek-400-normal.woff) format('woff'); \n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-400-normal.woff) format('woff'); \n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-400-normal.woff) format('woff'); \n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-ext-400-normal.woff) format('woff'); \n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1D
1BF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-vietnamese-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-vietnamese-400-normal.woff) format('woff'); \n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 400;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-ext-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-ext-400-normal.woff) format('woff'); \n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-greek-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-greek-700-normal.woff) format('woff'); \n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-700-normal.woff) format('woff'); \n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-700-normal.woff) format('woff'); \n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-ext-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-latin-ext-700-normal.woff) format('woff'); \n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-vietnamese-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-vietnamese-700-normal.woff) format('woff'); \n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}","@font-face {\n  font-family: 'Roboto Mono';\n  font-style: normal;\n  font-weight: 700;\n  font-stretch: 100%;\n  font-display: swap;\n  src: url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-ext-700-normal.woff2) format('woff2'), url(https://fonts.bunny.net/roboto-mono/files/roboto-mono-cyrillic-ext-700-normal.woff) format('woff'); \n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}"]}},"__N_SSG":true},"page":"/","query":{},"buildId":"Gzdeapa5HSZum8IdYxv0F","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
1<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"7721b1efde9d46488176f83f69da8c77","r":1,"spa":2}' crossorigin="anonymous"></script>
1
2</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.