1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Blog | Marp</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/blog"/><meta property="og:url" content="https://marp.app/blog"/><meta property="og:title" content="Blog | Marp"/><meta property="og:type" content="article"/><meta property="og:image" content="https://marp.app/assets/og-image.png"/><meta property="twitter:card" content="summary"/><link rel="alternate" type="application/rss+xml" title="Blog | Marp" href="https://marp.app/blog/feed.xml"/><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/436-18fd94cd1b7e476a.js" defer=""></script>
1<script src="/_next/static/chunks/765-022d53dea3b17eda.js" defer=""></script>
1<script src="/_next/static/chunks/175-f06fa9b8c388884d.js" defer=""></script>
1<script src="/_next/static/chunks/pages/blog-d6fe266edabd89a7.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-3886093092">.jsx-3886093092 a,.jsx-3886093092 a:hover,.jsx-3886093092 a:hover:active{color:currentColor;-webkit-text-decoration-line:none;text-decoration-line:none;}.jsx-3886093092 a.focus-visible{-webkit-text-decoration-line:underline;text-decoration-line:underline;outline:2px solid transparent;outline-offset:2px;}.jsx-3886093092 a:focus-visible{-webkit-text-decoration-line:underline;text-decoration-line:underline;outline:2px solid transparent;outline-offset:2px;}</style><style id="__jsx-2442332735">.typography.jsx-2442332735{overflow-wrap:break-word;font-size:calc(var(--root-font-size,1rem) * 1);line-height:calc(var(--root-font-size,1rem) * 1.5);line-height:1.625;}.typography.jsx-2442332735 p{margin-top:calc(var(--root-font-size,1rem) * 1);margin-bottom:calc(var(--root-font-size,1rem) * 1);}.typography.jsx-2442332735 h1{position:relative;margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 1.25);font-size:calc(var(--root-font-size,1rem) * 1.875);line-height:calc(var(--root-font-size,1rem) * 2.25);font-weight:700;}.typography.jsx-2442332735 h2{position:relative;margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 1.25);font-size:calc(var(--root-font-size,1rem) * 1.5);line-height:calc(var(--root-font-size,1rem) * 2);font-weight:700;}.typography.jsx-2442332735 h3{position:relative;margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 1);font-size:calc(var(--root-font-size,1rem) * 1.25);
1line-height:calc(var(--root-font-size,1rem) * 1.75);font-weight:700;}.typography.jsx-2442332735 h4{position:relative;margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1);font-size:calc(var(--root-font-size,1rem) * 1.125);line-height:calc(var(--root-font-size,1rem) * 1.75);font-weight:700;}.typography.jsx-2442332735 h5{position:relative;margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1);font-size:calc(var(--root-font-size,1rem) * 1);line-height:calc(var(--root-font-size,1rem) * 1.5);font-weight:700;}.typography.jsx-2442332735 h6{position:relative;margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1);font-size:calc(var(--root-font-size,1rem) * 0.875);line-height:calc(var(--root-font-size,1rem) * 1.25);font-weight:700;--tw-text-opacity:1;color:rgb(113 128 150 / var(--tw-text-opacity));}.typography.jsx-2442332735 .anchor-link{position:absolute;top:0px;right:0px;bottom:0px;left:0px;margin-top:auto;margin-bottom:auto;margin-left:calc(var(--root-font-size,1rem) * -1.25);display:none;width:calc(var(--root-font-size,1rem) * 1.25);overflow:hidden;white-space:nowrap;background-position:left;background-repeat:no-repeat;background-size:calc(var(--root-font-size,1rem) * 1) calc(var(--root-font-size,1rem) * 1);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-link%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%23718096%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z%22%2F%3E%3C%2Fsvg%3E');}.typography.jsx-2442332735 h1:hover > .anchor-link,.typography.jsx-2442332735 h2:hover > .anchor-link,.typography.jsx-2442332735 h3:hover > .anchor-link,.typography.jsx-2442332735 h4:hover > .anchor-link,.typography.jsx-2442332735 h5:hover > .anchor-link,.typography.jsx-2442332735 h6:hover > .anchor-link{display:block;}.typography.jsx-2442332735 hr{margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);}.typography.jsx-2442332735 blockquote{margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);border-left-width:4px;--tw-border-opacity:1;border-color:rgb(103 184 227 / var(--tw-border-opacity));padding-left:calc(var(--root-font-size,1rem) * 1.25);--tw-text-opacity:1;color:rgb(113 128 150 / var(--tw-text-opacity));}.typography.jsx-2442332735 blockquote blockquote{border-left-width:3px;}.typography.jsx-2442332735 blockquote blockquote blockquote{border-left-width:2px;}.typography.jsx-2442332735 ul{margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);margin-left:calc(var(--root-font-size,1rem) * 2);margin-right:calc(var(--root-font-size,1rem) * 0.75);list-style-type:disc;}.typography.jsx-2442332735 ul ul{list-style-type:circle;}.typography.jsx-2442332735 ul ul ul{list-style-type:square;}.typography.jsx-2442332735 ol:not(.code-block){margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);margin-left:calc(var(--root-font-size,1rem) * 2);margin-right:calc(var(--root-font-size,1rem) * 0.75);list-style-type:decimal;}.typography.jsx-2442332735 ul ul,.typography.jsx-2442332735 ul ol:not(._),.typography.jsx-2442332735 ol:not(._) ul,.typography.jsx-2442332735 ol:not(._) ol:not(._){margin-top:0px;margin-bottom:0px;margin-right:0px;}.typography.jsx-2442332735 li:not(.code-block){margin-top:calc(var(--root-font-size,1rem) * 0.25);margin-bottom:calc(var(--root-font-size,1rem) * 0.25);}.typography.jsx-2442332735 code:not(.code-block){border-radius:calc(var(--root-font-size,1rem) * 0.25);border-width:1px;--tw-border-opacity:1;border-color:rgb(203 213 224 / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgb(237 242 247 / var(--tw-bg-opacity));font-size:0.9em;padding:0.15em 0.35em;}.typography.jsx-2442332735 pre{margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);}.typography.jsx-2442332735 img{display:inline;}.typography.jsx-2442332735 figure{margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);}.typography.jsx-2442332735 figure img{margin-left:auto;margin-right:auto;display:block;max-width:min(768px,100%);}.typography.jsx-2442332735 figcaption{margin-left:auto;margin-right:auto;margin-top:calc(var(--root-font-size,1rem) * 1);margin-bottom:calc(var(--root-font-size,1rem) * 1);width:91.666667%;text-align:center;font-size:calc(var(--root-font-size,1rem) * 0.875);line-height:calc(var(--root-font-size,1rem) * 1.25);--tw-text-opacity:1;color:rgb(113 128 150 / var(--tw-text-opacity));}.typography.jsx-2442332735 table{margin-left:auto;margin-right:auto;margin-top:calc(var(--root-font-size,1rem) * 2);margin-bottom:calc(var(--root-font-size,1rem) * 2);max-width:100%;}.typography.jsx-2442332735 td,.typography.jsx-2442332735 th{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(203 213 224 / var(--tw-border-opacity));padding:calc(var(--root-font-size,1rem) * 0.5);font-size:calc(var(--root-font-size,1rem) * 0.875);line-height:calc(var(--root-font-size,1rem) * 1.25);}.typography.jsx-2442332735 thead tr:last-child td,.typography.jsx-2442332735 thead tr:last-child th{border-bottom-width:2px;}@media (min-width:640px){.typography.jsx-2442332735 td,.typography.jsx-2442332735 th{padding-top:calc(var(--root-font-size,1rem) * 0.5);padding-bottom:calc(var(--root-font-size,1rem) * 0.5);padding-left:calc(var(--root-font-size,1rem) * 1);padding-right:calc(var(--root-font-size,1rem) * 1);}}@media (min-width:768px){.typography.jsx-2442332735 td,.typography.jsx-2442332735 th{font-size:calc(var(--root-font-size,1rem) * 1);line-height:calc(var(--root-font-size,1rem) * 1.5);}}.typography.jsx-2442332735>*:first-child,.typography.jsx-2442332735>*:first-child *:first-child{margin-top:0px;}.typography.jsx-2442332735>*:last-child,.typography.jsx-2442332735>*:last-child *:last-child{margin-bottom:0px;}</style><style id="__jsx-163003112">.article-container.jsx-163003112{position:relative;margin-top:calc(var(--root-font-size,1rem) * 1.5);margin-bottom:calc(var(--root-font-size,1rem) * 1.5);padding:calc(var(--root-font-size,1rem) * 1.5);}.article-container-link.jsx-163003112{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:calc(var(--root-font-size,1rem) * 0.5);-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;}@media not all and (hover:none){.article-container-link.jsx-163003112:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--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);}.article-container-link.jsx-163003112:hover.jsx-163003112:active{--tw-bg-opacity:1;background-color:rgb(255 255 255 / 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-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;}.article-container-link.jsx-163003112:hover+*.jsx-163003112 .read-more.jsx-163003112{--tw-text-opacity:1;color:rgb(2 136 209 / var(--tw-text-opacity));}}.article-container-link.jsx-163003112:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255 / 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;}.article-summary.jsx-163003112 a{color:inherit;}.read-more.jsx-163003112{margin-top:calc(var(--root-font-size,1rem) * 1.5);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:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;font-weight:700;text-transform:uppercase;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-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;}.read-more.jsx-163003112 .read-more-icon{height:calc(var(--root-font-size,1rem) * 2);width:calc(var(--root-font-size,1rem) * 2);}@media (min-width:768px){.article-container.jsx-163003112{position:relative;padding:calc(var(--root-font-size,1rem) * 2);}}</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;src: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;
1src: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;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: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;
1src: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');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: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-1D
1BF,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 active" 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="bg-marp-brand border-b py-3 text-white"><h1 class="jsx-3886093092 font-rounded text-center text-3xl font-bold uppercase"><a href="/blog">Blog</a></h1></section><div class="jsx-163003112 container mx-auto max-w-screen-lg px-3 py-1"><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/how-to-make-custom-transition"><h1 class="jsx-163003112 sr-only">Marp CLI: How to make custom transition</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">Marp CLI: How to make custom transition</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2022-05-28" class="jsx-163003112">May 28th, 2022</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><figure class="jsx-163003112 mx-auto mb-6 lg:order-1 lg:mb-0 lg:ml-6 lg:w-full lg:max-w-[20rem]"><img src="/og-images/how-to-make-custom-transition.jpg" alt="Marp CLI: How to make custom transition" class="jsx-163003112 w-full max-w-[20rem] bg-white shadow-md lg:w-[100vw]"/></figure><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p><strong><a href="/blog/202205-ecosystem-update#marp-cli-v2">Marp CLI v2</a></strong> has supported <a href="/blog/202205-ecosystem-update#slide-transition-experiment">brand-new page transitions for the <code>bespoke</code> HTML template</a>. You can use this stable transition support in either Marp CLI v2.4.0+ or Marp for VS Code v2.5.0+.</p> 2<p>Effective transitions will help make a dramatic presentation. Adding a touch of effects to slides is often common in great talks. By viewing HTML slide in the browser that supports <a href="https://www.w3.org/TR/css-view-transitions-1/" target="_blank" rel="noreferrer noopener">View Transitions API</a> (Chrome 110+), or Marp CLI with <code>--preview</code> option, you can start to use <a href="https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions" target="_blank" rel="noreferrer noopener">varied 33 transition effects</a> out of the box, by <a href="https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#transition-local-directive" target="_blank" rel="noreferrer noopener">just a simple definition <code>transition</code> directive</a>.</p> 3<p>Built-in transitions should be useful for 90% of Marp users. But what you can do if there are no effects you are satisfied with? Make your effects in CSS! Marp can register your custom animation set declared in CSS as a named transition, and use it in the Markdown slide.</p></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewB
3ox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/202205-ecosystem-update"><h1 class="jsx-163003112 sr-only">Ecosystem update: Marp Core v3 & Slide transitions in CLI v2</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">Ecosystem update: Marp Core v3 & Slide transitions in CLI v2</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2022-05-26" class="jsx-163003112">May 26th, 2022</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><figure class="jsx-163003112 mx-auto mb-6 lg:order-1 lg:mb-0 lg:ml-6 lg:w-full lg:max-w-[20rem]"><img src="/og-images/202205-ecosystem-update.jpg" alt="Ecosystem update: Marp Core v3 & Slide transitions in CLI v2" class="jsx-163003112 w-full max-w-[20rem] bg-white shadow-md lg:w-[100vw]"/></figure><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p>We are so excited to introduce a stable release of <strong><a href="https://github.com/marp-team/marp-core" target="_blank" rel="noreferrer noopener">Marp Core</a> v3</strong>, and <strong><a href="https://github.com/marp-team/marp-cli" target="_blank" rel="noreferrer noopener">Marp CLI</a> v2</strong> update with <a href="/blog#slide-transition-experiment">an entirely new slide transition experiment</a>.</p> 4<ul> 5<li><strong><a href="/blog#marp-core-v3">Marp Core v3</a></strong>: MathJax rendering as default, updated <code>default</code> theme, and new components for auto-scaling.</li> 6<li><strong><a href="/blog#marp-cli-v2">Marp CLI v2</a></strong>: Bundled core v3, and <a href="/blog#slide-transition-experiment">brand-new slide transition experiment</a> with 33 built-in effects + CSS custom transitions.</li> 7</ul></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewBox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/marp-for-vs-code-v1"><h1 class="jsx-163003112 sr-only">Marp for VS Code v1: IntelliSense for Marp directives</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">Marp for VS Code v1: IntelliSense for Marp directives</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2021-05-20" class="jsx-163003112">May 20th, 2021</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><figure class="jsx-163003112 mx-auto mb-6 lg:order-1 lg:mb-0 lg:ml-6 lg:w-full lg:max-w-[20rem]"><img src="/og-images/marp-for-vs-code-v1.jpg" alt="Marp for VS Code v1: IntelliSense for Marp directives" class="jsx-163003112 w-full max-w-[20rem] bg-white shadow-md lg:w-[100vw]"/></figure><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p>We are continuing development to make stable Marp tools. And today, I'm happy to announce <a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode" target="_blank" rel="noreferrer noopener">Marp for VS Code</a> has reached to the stable release v1!</p> 8<p>Tools of Marp ecosystem are made for potentially covering various situations, and especially Marp for VS Code is made for the daily use for the most of users.</p> 9<p>This extension can change the familiar Markdown preview into slides preview during editing Marp Markdown. You can write and edit slides by text rapidly together with checking the appearance of slides, and export into PDF/PPTX easily. <a href="https://github.com/marp-team/marp-vscode#use-custom-theme-css-shield" target="_blank" rel="noreferrer noopener">Custom theme support</a> is useful to create your own theme with CSS.</p> 10<p>In this release, we have added IntelliSense extension for Marp directives and got more affinity with <a href="https://code.visualstudio.com/" target="_blank" rel="noreferrer noopener">VS Code</a> features. It provides better experience as integrated environment to write the presentation.</p></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewB
10ox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/marpit-v2-marp-core-v2-and-marp-cli-v1"><h1 class="jsx-163003112 sr-only">Marpit v2, Marp Core v2, and Marp CLI v1</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">Marpit v2, Marp Core v2, and Marp CLI v1</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2021-05-06" class="jsx-163003112">May 6th, 2021</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p>I'm so glad to announce shipping <a href="https://marpit.marp.app/" target="_blank" rel="noreferrer noopener">Marpit framework</a> v2, <a href="https://github.com/marp-team/marp-core" target="_blank" rel="noreferrer noopener">Marp Core</a> v2, and <a href="https://github.com/marp-team/marp-cli" target="_blank" rel="noreferrer noopener">Marp CLI</a> v1! Especially, Marp CLI is getting stable now!</p> 11<p>They are major update that may be including some breaking changes. However, we have not intended to include any drastic changes. We have recognized well that user hates to break the existing slide.</p> 12<p>The biggest reason why bumped major version is ending support for outdated Node.js 10. It has reached to End-of-Life and we are just following that.</p> 13<p>Marpit and Marp Core still can use in EOL Node 10, but we are just making a window time for transition. By the security reason, we don't recommend to use outdated Node.js.</p></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewBox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/re-creation-of-marp-website"><h1 class="jsx-163003112 sr-only">Re-creation of Marp website for the unified docs</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">Re-creation of Marp website for the unified docs</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2020-08-22" class="jsx-163003112">August 22nd, 2020</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p>I could not have imagined that now we are living in a unique pandemic era when I wrote <a href="/blog/the-story-of-marp-next">the last article</a>. Even under those severe circumstances, I'm still making progress of Marp.</p> 14<p>Marp gives some tools for making a convincing slide deck with fewer efforts, and they get loved by a lot of users. In early this year, <a href="https://github.com/marp-team/marp-core" target="_blank" rel="noreferrer noopener">Marp Core</a> has reached the stable v1 release, and our tools around the core are keeping steps with it. Needless to mention here, we will keep going to enhance our tools.</p> 15<p>Today we are announcing that <strong>Marp team is working to the re-creation of <a href="/">marp.app</a> website for hosting the unified documentation</strong>. If you are reading this article, you should have already seen the re-created website! Currently the unified docs is not yet ready but we are going to announce here as soon as getting ready.</p></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewB
15ox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div><div class="jsx-163003112 article-container"><a class="jsx-163003112 article-container-link" href="/blog/the-story-of-marp-next"><h1 class="jsx-163003112 sr-only">The story of Marp Next</h1></a><div class="jsx-163003112 pointer-events-none relative"><h1 aria-hidden="true" class="jsx-163003112 text-gradient text-3xl font-bold">The story of Marp Next</h1><p class="jsx-163003112 mt-2 mb-4 border-b-2 pb-4 text-sm text-gray-600"><time dateTime="2019-06-06" class="jsx-163003112">June 6th, 2019</time> by Yuki Hattori</p><div inert="" class="jsx-163003112 article-summary flex flex-col lg:flex-row"><figure class="jsx-163003112 mx-auto mb-6 lg:order-1 lg:mb-0 lg:ml-6 lg:w-full lg:max-w-[20rem]"><img src="/og-images/the-story-of-marp-next.png" alt="The story of Marp Next" class="jsx-163003112 w-full max-w-[20rem] bg-white shadow-md lg:w-[100vw]"/></figure><article class="jsx-163003112 flex-grow"><div class="jsx-2442332735 typography"><div><p>The first version of <a href="https://yhatt.github.io/marp/" target="_blank" rel="noreferrer noopener">Marp</a> was released at almost 3 years ago. At first, it was started from a simple tool for personal usage called "mdSlide". And now, Marp has been used by a lot of users who would recognize the real value of the presentation writer. Marp is amassed around <a href="https://github.com/yhatt/marp/stargazers" target="_blank" rel="noreferrer noopener">8,000 stars</a> until now.</p> 16<p>However, our headache brought from lacked maintainability to develop. We had received so many requests to the old Marp app, and it has to evolve to keep providing the best writing environment of presentation deck.</p> 17<p>Today, I'm so excited to introduce the story of Marp Next! The full-rewritten Marp is not only just a writer. To be usable in various situations, we build <strong>a brand-new Marp ecosystem</strong> consisted of multiple modules. They are developed with JavaScript and TypeScript, and much more maintainable than the previous Marp.</p></div></div></article></div><p class="jsx-163003112 read-more"><svg aria-hidden="true" focusable="false" role="img" class="read-more-icon" viewBox="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="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"></path></svg>Read more...</p></div></div></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&repo=marp&type=star&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" viewBox="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>
17<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"articles":[{"data":{"title":"Marp CLI: How to make custom transition","date":"2022-05-28T00:00:00.000Z","description":"Marp CLI v2.4.0+ and Marp for VS Code v2.5.0+ have a stable support for page transitions with many useful built-in effects. But if you had not satisfied with any effects? Make your effects with CSS!","author":"Yuki Hattori","github":"yhatt","image":"/og-images/how-to-make-custom-transition.jpg"},"excerpt":{"type":"root","children":[{"type":"definition","identifier":"readme","label":"readme","title":null,"url":"https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md"},{"type":"definition","identifier":"built-in","label":"built-in","title":null,"url":"https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions"},{"type":"definition","identifier":"view transitions api","label":"view transitions api","title":null,"url":"https://www.w3.org/TR/css-view-transitions-1/"},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"link","title":null,"url":"/blog/202205-ecosystem-update#marp-cli-v2","children":[{"type":"text","value":"Marp CLI v2"}]}]},{"type":"text","value":" has supported "},{"type":"link","title":null,"url":"/blog/202205-ecosystem-update#slide-transition-experiment","children":[{"type":"text","value":"brand-new page transitions for the "},{"type":"inlineCode","value":"bespoke"},{"type":"text","value":" HTML template"}]},{"type":"text","value":". You can use this stable transition support in either Marp CLI v2.4.0+ or Marp for VS Code v2.5.0+."}]},{"type":"paragraph","children":[{"type":"text","value":"Effective transitions will help make a dramatic presentation. Adding a touch of effects to slides is often common in great talks. By viewing HTML slide in the browser that supports "},{"type":"linkReference","children":[{"type":"text","value":"View Transitions API"}],"label":"View Transitions API","identifier":"view transitions api","referenceType":"shortcut"},{"type":"text","value":" (Chrome 110+), or Marp CLI with "},{"type":"inlineCode","value":"--preview"},{"type":"text","value":" option, you can start to use "},{"type":"linkReference","children":[{"type":"text","value":"varied 33 transition effects"}],"label":"built-in","identifier":"built-in","referenceType":"full"},{"type":"text","value":" out of the box, by "},{"type":"link","title":null,"url":"https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#transition-local-directive","children":[{"type":"text","value":"just a simple definition "},{"type":"inlineCode","value":"transition"},{"type":"text","value":" directive"}]},{"type":"text","value":"."}]},{"type":"paragraph","children":[{"type":"text","value":"Built-in transitions should be useful for 90% of Marp users. But what you can do if there are no effects you are satisfied with? Make your effects in CSS! Marp can register your custom animation set declared in CSS as a named transition, and use it in the Markdown slide."}]}]},"slug":"how-to-make-custom-transition"},{"data":{"title":"Ecosystem update: Marp Core v3 \u0026 Slide transitions in CLI v2","date":"2022-05-26T00:00:00.000Z","description":"Introduce a stable release of Marp Core v3, and updated CLI v2 with an entirely new slide transition experiment.","author":"Yuki Hattori","github":"yhatt","image":"/og-images/202205-ecosystem-update.jpg"},"excerpt":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"We are so excited to introduce a stable release of "},{"type":"strong","children":[{"type":"link","title":null,"url":"https://github.com/marp-team/marp-core","children":[{"type":"text","value":"Marp Core"}]},{"type":"text","value":" v3"}]},{"type":"text","value":", and "},{"type":"strong","children":[{"type":"link","title":null,"url":"https://github.com/marp-team/marp-cli","children":[{"type":"text","value":"Marp CLI"}]},{"type":"text","value":" v2"}]},{"type":"text","value":" update with "},{"type":"link","title":null,"url":"#slide-transition-experiment","children":[{"type":"text","value":"an entirely new slide transition experiment"}]},{"type":"text","value":"."}]},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"link","title":null,"url":"#marp-core-v3","children":[{"type":"text","value":"Marp Core v3"}]}]},{"type":"text","value":": MathJax rendering as default, updated "},{"type":"inlineCode","value":"default"},{"type":"text","value":" theme, and new components for auto-scaling."}]}]},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"strong","children":[{"type":"link","title":null,"url":"#marp-cli-v2","children":[{"type":"text","value":"Marp CLI v2"}]}]},{"type":"text","value":": Bundled core v3, and "},{"type":"link","title":null,"url":"#slide-transition-experiment","children":[{"type":"text","value":"brand-new slide transition experiment"}]},{"type":"text","value":" with 33 built-in effects + CSS custom transitions."}]}]}]}]},"slug":"202205-ecosystem-update"},{"data":{"title":"Marp for VS Code v1: IntelliSense for Marp directives","date":"2021-05-20T00:00:00.000Z","description":"I'm happy to announce Marp for VS Code has reached to the stable release v1! This release includes IntelliSense for Marp directives and getting more affinity with VS Code features to get better writing experience.","author":"Yuki Hattori","github":"yhatt","image":"/og-images/marp-for-vs-code-v1.jpg"},"excerpt":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"We are continuing development to make stable Marp tools. And today, I'm happy to announce "},{"type":"linkReference","children":[{"type":"text","value":"Marp for VS Code"}],"label":"Marp for VS Code","identifier":"marp for vs code","referenceType":"shortcut"},{"type":"text","value":" has reached to the stable release v1!"}]},{"type":"paragraph","children":[{"type":"text","value":"Tools of Marp ecosystem are made for potentially covering various situations, and especially Marp for VS Code is made for the daily use for the most of users."}]},{"type":"paragraph","children":[{"type":"text","value":"This extension can change the familiar Markdown preview into slides preview during editing Marp Markdown. You can write and edit slides by text rapidly together with checking the appearance of slides, and export into PDF/PPTX easily. "},{"type":"link","title":null,"url":"https://github.com/marp-team/marp-vscode#use-custom-theme-css-shield","children":[{"type":"text","value":"Custom theme support"}]},{"type":"text","value":" is useful to create your own theme with CSS."}]},{"type":"paragraph","children":[{"type":"text","value":"In this release, we have added IntelliSense extension for Marp directives and got more affinity with "},{"type":"linkReference","children":[{"type":"text","value":"VS Code"}],"label":"VS Code","identifier":"vs code","referenceType":"shortcut"},{"type":"text","value":" features. It provides better experience as integrated environment to write the presentation."}]},{"type":"definition","identifier":"vs code","label":"vs code","title":null,"url":"https://code.visualstudio.com/"},{"type":"definition","identifier":"marp for vs code","label":"marp for vs code","title":null,"url":"https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode"}]},"slug":"marp-for-vs-code-v1"},{"data":{"title":"Marpit v2, Marp Core v2, and Marp CLI v1","date":"2021-05-06T00:00:00.000Z","description":"I'm so glad to announce shipping Marpit framework v2, Marp Core v2, and Marp CLI v1! Especially, Marp CLI is getting stable now!","author":"Yuki Hattori","github":"yhatt"},"excerpt":{"type":"root","children":[{"type":"definition","identifier":"marpit framework","label":"marpit framework","title":null,"url":"https://marpit.marp.app/"},{"type":"definition","identifier":"marp core","label":"marp core","title":null,"url":"https://github.com/marp-team/marp-core"},{"type":"definition","identifier":"marp cli","label":"marp cli","title":null,"url":"https://github.com/marp-team/marp-cli"},{"type":"paragraph","children":[{"type":"text","value":"I'm so glad to announce shipping "},{"type":"linkReference","children":[{"type":"text","value":"Marpit framework"}],"label":"Marpit framework","identifier":"marpit framework","referenceType":"shortcut"},{"type":"text","value":" v2, "},{"type":"linkReference","children":[{"type":"text","value":"Marp Core"}],"label":"Marp Core","identifier":"marp core","referenceType":"shortcut"},{"type":"text","value":" v2, and "},{"type":"linkReference","children":[{"type":"text","value":"Marp CLI"}],"label":"Marp CLI","identifier":"marp cli","referenceType":"shortcut"},{"type":"text","value":" v1! Especially, Marp CLI is getting stable now!"}]},{"type":"paragraph","children":[{"type":"text","value":"They are major update that may be including some breaking changes. However, we have not intended to include any drastic changes. We have recognized
17well that user hates to break the existing slide."}]},{"type":"paragraph","children":[{"type":"text","value":"The biggest reason why bumped major version is ending support for outdated Node.js 10. It has reached to End-of-Life and we are just following that."}]},{"type":"paragraph","children":[{"type":"text","value":"Marpit and Marp Core still can use in EOL Node 10, but we are just making a window time for transition. By the security reason, we don't recommend to use outdated Node.js."}]}]},"slug":"marpit-v2-marp-core-v2-and-marp-cli-v1"},{"data":{"title":"Re-creation of Marp website for the unified docs","date":"2020-08-22T00:00:00.000Z","description":"We are announcing that Marp team is working to the re-creation of marp.app website for hosting the unified documentation.","author":"Yuki Hattori","github":"yhatt"},"excerpt":{"type":"root","children":[{"type":"definition","identifier":"marpit framework","label":"marpit framework","title":null,"url":"https://marpit.marp.app/"},{"type":"definition","identifier":"marp core","label":"marp core","title":null,"url":"https://github.com/marp-team/marp-core"},{"type":"definition","identifier":"marp cli","label":"marp cli","title":null,"url":"https://github.com/marp-team/marp-cli"},{"type":"definition","identifier":"marp for vs code","label":"marp for vs code","title":null,"url":"https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode"},{"type":"paragraph","children":[{"type":"text","value":"I could not have imagined that now we are living in a unique pandemic era when I wrote "},{"type":"link","title":null,"url":"/blog/the-story-of-marp-next","children":[{"type":"text","value":"the last article"}]},{"type":"text","value":". Even under those severe circumstances, I'm still making progress of Marp."}]},{"type":"paragraph","children":[{"type":"text","value":"Marp gives some tools for making a convincing slide deck with fewer efforts, and they get loved by a lot of users. In early this year, "},{"type":"linkReference","children":[{"type":"text","value":"Marp Core"}],"label":"Marp Core","identifier":"marp core","referenceType":"shortcut"},{"type":"text","value":" has reached the stable v1 release, and our tools around the core are keeping steps with it. Needless to mention here, we will keep going to enhance our tools."}]},{"type":"paragraph","children":[{"type":"text","value":"Today we are announcing that "},{"type":"strong","children":[{"type":"text","value":"Marp team is working to the re-creation of "},{"type":"link","title":null,"url":"/","children":[{"type":"text","value":"marp.app"}]},{"type":"text","value":" website for hosting the unified documentation"}]},{"type":"text","value":". If you are reading this article, you should have already seen the re-created website! Currently the unified docs is not yet ready but we are going to announce here as soon as getting ready."}]}]},"slug":"re-creation-of-marp-website"},{"data":{"title":"The story of Marp Next","date":"2019-06-06T00:00:00.000Z","description":"Today, I'm so excited to introduce the story of Marp Next! The full-rewritten Marp is not only just a writer. To be usable in various situations, we build a brand-new Marp ecosystem consisted of multiple modules.","author":"Yuki Hattori","github":"yhatt","image":"/og-images/the-story-of-marp-next.png"},"excerpt":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"The first version of "},{"type":"link","title":null,"url":"https://yhatt.github.io/marp/","children":[{"type":"text","value":"Marp"}]},{"type":"text","value":" was released at almost 3 years ago. At first, it was started from a simple tool for personal usage called \"mdSlide\". And now, Marp has been used by a lot of users who would recognize the real value of the presentation writer. Marp is amassed around "},{"type":"link","title":null,"url":"https://github.com/yhatt/marp/stargazers","children":[{"type":"text","value":"8,000 stars"}]},{"type":"text","value":" until now."}]},{"type":"paragraph","children":[{"type":"text","value":"However, our headache brought from lacked maintainability to develop. We had received so many requests to the old Marp app, and it has to evolve to keep providing the best writing environment of presentation deck."}]},{"type":"paragraph","children":[{"type":"text","value":"Today, I'm so excited to introduce the story of Marp Next! The full-rewritten Marp is not only just a writer. To be usable in various situations, we build "},{"type":"strong","children":[{"type":"text","value":"a brand-new Marp ecosystem"}]},{"type":"text","value":" consisted of multiple modules. They are developed with JavaScript and TypeScript, and much more maintainable than the previous Marp."}]}]},"slug":"the-story-of-marp-next"}]},"__N_SSG":true},"page":"/blog","query":{},"buildId":"Gzdeapa5HSZum8IdYxv0F","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
17<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>
17 18</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.