feat(mdx): add background syntax

hiroppy · hiroppy · commit 535f2ebe43bb · 2021-02-01T23:26:29.000+09:00
diff --git a/packages/client/assets/style/customize.css b/packages/client/assets/style/customize.css
@@ -29,13 +29,26 @@
   color: var(--color-base);
   text-align: var(--base-align);
   background: var(--color-background);
+  position: relative;
 }
 
 .slide-internal-box {
-  background: inherit;
   padding: 16px;
   text-align: inherit;
   max-width: var(--base-max-slide-size);
   margin: auto;
   min-width: 320px;
+  z-index: 2;
+}
+
+.slide-background-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-blend-mode: multiply;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
diff --git a/packages/client/assets/style/tags.css b/packages/client/assets/style/tags.css
@@ -1,6 +1,7 @@
 html {
   font-size: 62.5%;
   -webkit-print-color-adjust: exact;
+  background: var(--color-background);
 }
 
 body {
diff --git a/packages/client/src/components/SlideCore.js b/packages/client/src/components/SlideCore.js
@@ -63,16 +63,13 @@ export const SlideCore = ({ slides, onChangeSlideIndex }) => (
     onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
     className="slide-background"
   >
-    {slides.map(({ slide: Slide, fusumaProps }, i) => (
+    {slides.map(({ slide: Slide, fusumaProps: { classes, sectionTitle, background } }, i) => (
       <SwiperSlide
         key={i /* mdx-loaderでhash作成 */}
-        className={classnames(
-          'slide-box',
-          fusumaProps.classes,
-          fusumaProps.sectionTitle ? 'section-title' : undefined
-        )}
+        className={classnames('slide-box', classes, sectionTitle ? 'section-title' : undefined)}
         data-hash={`slide-${i + 1}`}
       >
+        {background && <div className="slide-background-div" style={{ background }} />}
         <div className="slide-internal-box">
           <Slide />
         </div>
diff --git a/packages/client/src/utils/createSlidesProps.js b/packages/client/src/utils/createSlidesProps.js
@@ -3,11 +3,13 @@ import { ToC } from '../components/ToC';
 export function createSlidesProps(slides) {
   const slidesArr = [];
   const propsArr = [];
+  const backgroundsArr = [];
   const res = {};
 
-  slides.forEach(({ slides, fusumaProps }) => {
+  slides.forEach(({ slides, fusumaProps, backgrounds }) => {
     slidesArr.push(...slides);
     propsArr.push(...fusumaProps);
+    backgroundsArr.push(...backgrounds);
   });
 
   propsArr.reduce((acc, { sectionTitle }, i) => {
@@ -22,10 +24,22 @@ export function createSlidesProps(slides) {
 
   res.slides = slidesArr.map((slide, i) => {
     const props = propsArr[i];
+    const background = (() => {
+      if (backgroundsArr[i] === 0) {
+        return null;
+      }
+      if (backgroundsArr[i].includes('/')) {
+        return `url('${backgroundsArr[i]}')`;
+      }
+      return backgroundsArr[i];
+    })();
 
     return {
       slide: props.contents ? ToC({ list: res.contentsList }) : slide,
-      fusumaProps: props,
+      fusumaProps: {
+        ...props,
+        background,
+      },
     };
   });
 
diff --git a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`fusuma-loader should add background to props 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+export const slides = [props => <>
+              
+
+    
+            </>];
+export const backgrounds = ['red'];
+export const fusumaProps = [{}];
+
+const layoutProps = {
+  
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    {
+      /* background: red */
+    }
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
+exports[`fusuma-loader should add background(url) to props 1`] = `
+"/* @jsxRuntime classic */
+/* @jsx mdx */
+
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+export const slides = [props => <>
+              
+
+    
+            </>];
+export const backgrounds = [require('../../img.jpeg')];
+export const fusumaProps = [{}];
+
+const layoutProps = {
+  
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    {
+      /* background: '../../img.jpeg' */
+    }
+
+    </MDXLayout>;
+}
+
+;
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should add data-line to pre tag 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
@@ -22,6 +90,7 @@ export const slides = [props => <>
 \`}</code></pre>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -68,6 +137,7 @@ export const slides = [props => <>
     <div className=\\"fusuma-screen\\"><div>This view can capture the screen.<br />Click to get started.;)<br /><br />Note: This feature runs only in Presenter Mode.</div><video id=\\"fusuma-screen-1\\" /></div>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{
   note: 'This is Note!',
   classes: 'class!',
@@ -128,6 +198,7 @@ in\`}</p>
     </div>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -187,6 +258,7 @@ console.log(a + b);
 \`}</code></pre>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{
   hasExecutableCode: 'true'
 }];
@@ -380,6 +452,7 @@ export const slides = [props => <>
                           }}>{\`2\`}</span></span></span></span></span></span></span></span></span></span></span></span></div>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -563,6 +636,7 @@ export const slides = [props => <>
     <svg className=\\"qr\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"66px\\" height=\\"66px\\" viewBox=\\"0 0 66 66\\" preserveAspectRatio=\\"xMinYMin meet\\"><rect width=\\"100%\\" height=\\"100%\\" fill=\\"white\\" cx=\\"0\\" cy=\\"0\\" /><path d=\\"M8,8l2,0 0,2 -2,0 0,-2z M10,8l2,0 0,2 -2,0 0,-2z M12,8l2,0 0,2 -2,0 0,-2z M14,8l2,0 0,2 -2,0 0,-2z M16,8l2,0 0,2 -2,0 0,-2z M18,8l2,0 0,2 -2,0 0,-2z M20,8l2,0 0,2 -2,0 0,-2z M24,8l2,0 0,2 -2,0 0,-2z M26,8l2,0 0,2 -2,0 0,-2z M28,8l2,0 0,2 -2,0 0,-2z M30,8l2,0 0,2 -2,0 0,-2z M36,8l2,0 0,2 -2,0 0,-2z M44,8l2,0 0,2 -2,0 0,-2z M46,8l2,0 0,2 -2,0 0,-2z M48,8l2,0 0,2 -2,0 0,-2z M50,8l2,0 0,2 -2,0 0,-2z M52,8l2,0 0,2 -2,0 0,-2z M54,8l2,0 0,2 -2,0 0,-2z M56,8l2,0 0,2 -2,0 0,-2z M8,10l2,0 0,2 -2,0 0,-2z M20,10l2,0 0,2 -2,0 0,-2z M30,10l2,0 0,2 -2,0 0,-2z M32,10l2,0 0,2 -2,0 0,-2z M34,10l2,0 0,2 -2,0 0,-2z M40,10l2,0 0,2 -2,0 0,-2z M44,10l2,0 0,2 -2,0 0,-2z M56,10l2,0 0,2 -2,0 0,-2z M8,12l2,0 0,2 -2,0 0,-2z M12,12l2,0 0,2 -2,0 0,-2z M14,12l2,0 0,2 -2,0 0,-2z M16,12l2,0 0,2 -2,0 0,-2z M20,12l2,0 0,2 -2,0 0,-2z M26,12l2,0 0,2 -2,0 0,-2z M30,12l2,0 0,2 -2,0 0,-2z M34,12l2,0 0,2 -2,0 0,-2z M36,12l2,0 0,2 -2,0 0,-2z M44,12l2,0 0,2 -2,0 0,-2z M48,12l2,0 0,2 -2,0 0,-2z M50,12l2,0 0,2 -2,0 0,-2z M52,12l2,0 0,2 -2,0 0,-2z M56,12l2,0 0,2 -2,0 0,-2z M8,14l2,0 0,2 -2,0 0,-2z M12,14l2,0 0,2 -2,0 0,-2z M14,14l2,0 0,2 -2,0 0,-2z M16,14l2,0 0,2 -2,0 0,-2z M20,14l2,0 0,2 -2,0 0,-2z M28,14l2,0 0,2 -2,0 0,-2z M30,14l2,0 0,2 -2,0 0,-2z M36,14l2,0 0,2 -2,0 0,-2z M38,14l2,0 0,2 -2,0 0,-2z M40,14l2,0 0,2 -2,0 0,-2z M44,14l2,0 0,2 -2,0 0,-2z M48,14l2,0 0,2 -2,0 0,-2z M50,14l2,0 0,2 -2,0 0,-2z M52,14l2,0 0,2 -2,0 0,-2z M56,14l2,0 0,2 -2,0 0,-2z M8,16l2,0 0,2 -2,0 0,-2z M12,16l2,0 0,2 -2,0 0,-2z M14,16l2,0 0,2 -2,0 0,-2z M16,16l2,0 0,2 -2,0 0,-2z M20,16l2,0 0,2 -2,0 0,-2z M28,16l2,0 0,2 -2,0 0,-2z M30,16l2,0 0,2 -2,0 0,-2z M32,16l2,0 0,2 -2,0 0,-2z M34,16l2,0 0,2 -2,0 0,-2z M36,16l2,0 0,2 -2,0 0,-2z M40,16l2,0 0,2 -2,0 0,-2z M44,16l2,0 0,2 -2,0 0,-2z M48,16l2,0 0,2 -2,0 0,-2z M50,16l2,0 0,2 -2,0 0,-2z M52,16l2,0 0,2 -2,0 0,-2z M56,16l2,0 0,2 -2,0 0,-2z M8,18l2,0 0,2 -2,0 0,-2z M20,18l2,0 0,2 -2,0 0,-2z M26,18l2,0 0,2 -2,0 0,-2z M30,18l2,0 0,2 -2,0 0,-2z M34,18l2,0 0,2 -2,0 0,-2z M36,18l2,0 0,2 -2,0 0,-2z M44,18l2,0 0,2 -2,0 0,-2z M56,18l2,0 0,2 -2,0 0,-2z M8,20l2,0 0,2 -2,0 0,-2z M10,20l2,0 0,2 -2,0 0,-2z M12,20l2,0 0,2 -2,0 0,-2z M14,20l2,0 0,2 -2,0 0,-2z M16,20l2,0 0,2 -2,0 0,-2z M18,20l2,0 0,2 -2,0 0,-2z M20,20l2,0 0,2 -2,0 0,-2z M24,20l2,0 0,2 -2,0 0,-2z M28,20l2,0 0,2 -2,0 0,-2z M32,20l2,0 0,2 -2,0 0,-2z M36,20l2,0 0,2 -2,0 0,-2z M40,20l2,0 0,2 -2,0 0,-2z M44,20l2,0 0,2 -2,0 0,-2z M46,20l2,0 0,2 -2,0 0,-2z M48,20l2,0 0,2 -2,0 0,-2z M50,20l2,0 0,2 -2,0 0,-2z M52,20l2,0 0,2 -2,0 0,-2z M54,20l2,0 0,2 -2,0 0,-2z M56,20l2,0 0,2 -2,0 0,-2z M24,22l2,0 0,2 -2,0 0,-2z M26,22l2,0 0,2 -2,0 0,-2z M32,22l2,0 0,2 -2,0 0,-2z M36,22l2,0 0,2 -2,0 0,-2z M38,22l2,0 0,2 -2,0 0,-2z M8,24l2,0 0,2 -2,0 0,-2z M10,24l2,0 0,2 -2,0 0,-2z M14,24l2,0 0,2 -2,0 0,-2z M16,24l2,0 0,2 -2,0 0,-2z M20,24l2,0 0,2 -2,0 0,-2z M26,24l2,0 0,2 -2,0 0,-2z M32,24l2,0 0,2 -2,0 0,-2z M34,24l2,0 0,2 -2,0 0,-2z M36,24l2,0 0,2 -2,0 0,-2z M38,24l2,0 0,2 -2,0 0,-2z M40,24l2,0 0,2 -2,0 0,-2z M44,24l2,0 0,2 -2,0 0,-2z M56,24l2,0 0,2 -2,0 0,-2z M10,26l2,0 0,2 -2,0 0,-2z M22,26l2,0 0,2 -2,0 0,-2z M24,26l2,0 0,2 -2,0 0,-2z M28,26l2,0 0,2 -2,0 0,-2z M36,26l2,0 0,2 -2,0 0,-2z M38,26l2,0 0,2 -2,0 0,-2z M46,26l2,0 0,2 -2,0 0,-2z M48,26l2,0 0,2 -2,0 0,-2z M50,26l2,0 0,2 -2,0 0,-2z M52,26l2,0 0,2 -2,0 0,-2z M54,26l2,0 0,2 -2,0 0,-2z M14,28l2,0 0,2 -2,0 0,-2z M20,28l2,0 0,2 -2,0 0,-2z M26,28l2,0 0,2 -2,0 0,-2z M32,28l2,0 0,2 -2,0 0,-2z M36,28l2,0 0,2 -2,0 0,-2z M38,28l2,0 0,2 -2,0 0,-2z M46,28l2,0 0,2 -2,0 0,-2z M50,28l2,0 0,2 -2,0 0,-2z M56,28l2,0 0,2 -2,0 0,-2z M12,30l2,0 0,2 -2,0 0,-2z M14,30l2,0 0,2 -2,0 0,-2z M16,30l2,0 0,2 -2,0 0,-2z M18,30l2,0 0,2 -2,0 0,-2z M22,30l2,0 0,2 -2,0 0,-2z M24,30l2,0 0,2 -2,0 0,-2z M36,30l2,0 0,2 -2,0 0,-2z M38,30l2,0 0,2 -2,0 0,-2z M46,30l2,0 0,2 -2,0 0,-2z M50,30l2,0 0,2 -2,0 0,-2z M52,30l2,0 0,2 -2,0 0,-2z M54,30l2,0 0,2 -2,0 0,-2z M56,30l2,0 0,2 -2,0 0,-2z M8,32l2,0 0,2 -2,0 0,-2z M10,32l2,0 0,2 -2,0 0,-2z M12,32l2,0 0,2 -2,0 0,-2z M18,32l2,0 0,2 -2,0 0,-2z M20,32l2,0 0,2 -2,0 0,-2z M22,32l2,0 0,2 -2,0 0,-2z M24,32l2,0 0,2 -2,0 0,-2z M26,32l2,0 0,2 -2,0 0,-2z M28,32l2,0 0,2 -2,0 0,-2z M34,32l2,0 0,2 -2,0 0,-2z M36,32l2,0 0,2 -2,0 0,-2z M40,32l2,0 0,2 -2,0 0,-2z M44,32l2,0 0,2 -2,0 0,-2z M46,32l2,0 0,2 -2,0 0,-2z M56,32l2,0 0,2 -2,0 0,-2z M8,34l2,0 0,2 -2,0 0,-2z M14,34l2,0 0,2 -2,0 0,-2z M18,34l2,0 0,2 -2,0 0,-2z M22,34l2,0 0,2 -2,0 0,-2z M24,34l2,0 0,2 -2,0 0,-2z M26,34l2,0 0,2 -2,0 0,-2z M28,34l2,0 0,2 -2,0 0,-2z M32,34l2,0 0,2 -2,0 0,-2z M38,34l2,0 0,2 -2,0 0,-2z M48,34l2,0 0,2 -2,0 0,-2z M54,34l2,0 0,2 -2,0 0,-2z M8,36l2,0 0,2 -2,0 0,-2z M10,36l2,0 0,2 -2,0 0,-2z M16,36l2,0 0,2 -2,0 0,-2z M18,36l2,0 0,2 -2,0 0,-2z M20,36l2,0 0,2 -2,0 0,-2z M22,36l2,0 0,2 -2,0 0,-2z M24,36l2,0 0,2 -2,0 0,-2z M26,36l2,0 0,2 -2,0 0,-2z M28,36l2,0 0,2 -2,0 0,-2z M36,36l2,0 0,2 -2,0 0,-2z M38,36l2,0 0,2 -2,0 0,-2z M42,36l2,0 0,2 -2,0 0,-2z M48,36l2,0 0,2 -2,0 0,-2z M50,36l2,0 0,2 -2,0 0,-2z M52,36l2,0 0,2 -2,0 0,-2z M54,36l2,0 0,2 -2,0 0,-2z M56,36l2,0 0,2 -2,0 0,-2z M8,38l2,0 0,2 -2,0 0,-2z M22,38l2,0 0,2 -2,0 0,-2z M28,38l2,0 0,2 -2,0 0,-2z M32,38l2,0 0,2 -2,0 0,-2z M34,38l2,0 0,2 -2,0 0,-2z M36,38l2,0 0,2 -2,0 0,-2z M42,38l2,0 0,2 -2,0 0,-2z M46,38l2,0 0,2 -2,0 0,-2z M50,38l2,0 0,2 -2,0 0,-2z M52,38l2,0 0,2 -2,0 0,-2z M56,38l2,0 0,2 -2,0 0,-2z M8,40l2,0 0,2 -2,0 0,-2z M14,40l2,0 0,2 -2,0 0,-2z M16,40l2,0 0,2 -2,0 0,-2z M18,40l2,0 0,2 -2,0 0,-2z M20,40l2,0 0,2 -2,0 0,-2z M24,40l2,0 0,2 -2,0 0,-2z M28,40l2,0 0,2 -2,0 0,-2z M30,40l2,0 0,2 -2,0 0,-2z M32,40l2,0 0,2 -2,0 0,-2z M38,40l2,0 0,2 -2,0 0,-2z M40,40l2,0 0,2 -2,0 0,-2z M42,40l2,0 0,2 -2,0 0,-2z M44,40l2,0 0,2 -2,0 0,-2z M46,40l2,0 0,2 -2,0 0,-2z M48,40l2,0 0,2 -2,0 0,-2z M52,40l2,0 0,2 -2,0 0,-2z M54,40l2,0 0,2 -2,0 0,-2z M24,42l2,0 0,2 -2,0 0,-2z M26,42l2,0 0,2 -2,0 0,-2z M28,42l2,0 0,2 -2,0 0,-2z M30,42l2,0 0,2 -2,0 0,-2z M40,42l2,0 0,2 -2,0 0,-2z M48,42l2,0 0,2 -2,0 0,-2z M52,42l2,0 0,2 -2,0 0,-2z M54,42l2,0 0,2 -2,0 0,-2z M8,44l2,0 0,2 -2,0 0,-2z M10,44l2,0 0,2 -2,0 0,-2z M12,44l2,0 0,2 -2,0 0,-2z M14,44l2,0 0,2 -2,0 0,-2z M16,44l2,0 0,2 -2,0 0,-2z M18,44l2,0 0,2 -2,0 0,-2z M20,44l2,0 0,2 -2,0 0,-2z M32,44l2,0 0,2 -2,0 0,-2z M34,44l2,0 0,2 -2,0 0,-2z M36,44l2,0 0,2 -2,0 0,-2z M40,44l2,0 0,2 -2,0 0,-2z M44,44l2,0 0,2 -2,0 0,-2z M48,44l2,0 0,2 -2,0 0,-2z M56,44l2,0 0,2 -2,0 0,-2z M8,46l2,0 0,2 -2,0 0,-2z M20,46l2,0 0,2 -2,0 0,-2z M30,46l2,0 0,2 -2,0 0,-2z M34,46l2,0 0,2 -2,0 0,-2z M38,46l2,0 0,2 -2,0 0,-2z M40,46l2,0 0,2 -2,0 0,-2z M48,46l2,0 0,2 -2,0 0,-2z M8,48l2,0 0,2 -2,0 0,-2z M12,48l2,0 0,2 -2,0 0,-2z M14,48l2,0 0,2 -2,0 0,-2z M16,48l2,0 0,2 -2,0 0,-2z M20,48l2,0 0,2 -2,0 0,-2z M24,48l2,0 0,2 -2,0 0,-2z M26,48l2,0 0,2 -2,0 0,-2z M28,48l2,0 0,2 -2,0 0,-2z M30,48l2,0 0,2 -2,0 0,-2z M34,48l2,0 0,2 -2,0 0,-2z M38,48l2,0 0,2 -2,0 0,-2z M40,48l2,0 0,2 -2,0 0,-2z M42,48l2,0 0,2 -2,0 0,-2z M44,48l2,0 0,2 -2,0 0,-2z M46,48l2,0 0,2 -2,0 0,-2z M48,48l2,0 0,2 -2,0 0,-2z M56,48l2,0 0,2 -2,0 0,-2z M8,50l2,0 0,2 -2,0 0,-2z M12,50l2,0 0,2 -2,0 0,-2z M14,50l2,0 0,2 -2,0 0,-2z M16,50l2,0 0,2 -2,0 0,-2z M20,50l2,0 0,2 -2,0 0,-2z M24,50l2,0 0,2 -2,0 0,-2z M32,50l2,0 0,2 -2,0 0,-2z M34,50l2,0 0,2 -2,0 0,-2z M40,50l2,0 0,2 -2,0 0,-2z M42,50l2,0 0,2 -2,0 0,-2z M44,50l2,0 0,2 -2,0 0,-2z M54,50l2,0 0,2 -2,0 0,-2z M56,50l2,0 0,2 -2,0 0,-2z M8,52l2,0 0,2 -2,0 0,-2z M12,52l2,0 0,2 -2,0 0,-2z M14,52l2,0 0,2 -2,0 0,-2z M16,52l2,0 0,2 -2,0 0,-2z M20,52l2,0 0,2 -2,0 0,-2z M28,52l2,0 0,2 -2,0 0,-2z M30,52l2,0 0,2 -2,0 0,-2z M34,52l2,0 0,2 -2,0 0,-2z M40,52l2,0 0,2 -2,0 0,-2z M42,52l2,0 0,2 -2,0 0,-2z M48,52l2,0 0,2 -2,0 0,-2z M50,52l2,0 0,2 -2,0 0,-2z M52,52l2,0 0,2 -2,0 0,-2z M54,52l2,0 0,2 -2,0 0,-2z M56,52l2,0 0,2 -2,0 0,-2z M8,54l2,0 0,2 -2,0 0,-2z M20,54l2,0 0,2 -2,0 0,-2z M24,54l2,0 0,2 -2,0 0,-2z M30,54l2,0 0,2 -2,0 0,-2z M32,54l2,0 0,2 -2,0 0,-2z M34,54l2,0 0,2 -2,0 0,-2z M44,54l2,0 0,2 -2,0 0,-2z M46,54l2,0 0,2 -2,0 0,-2z M48,54l2,0 0,2 -2,0 0,-2z M52,54l2,0 0,2 -2,0 0,-2z M54,54l2,0 0,2 -2,0 0,-2z M56,54l2,0 0,2 -2,0 0,-2z M8,56l2,0 0,2 -2,0 0,-2z M10,56l2,0 0,2 -2,0 0,-2z M12,56l2,0 0,2 -2,0 0,-2z M14,56l2,0 0,2 -2,0 0,-2z M16,56l2,0 0,2 -2,0 0,-2z M18,56l2,0 0,2 -2,0 0,-2z M20,56l2,0 0,2 -2,0 0,-2z M24,56l2,0 0,2 -2,0 0,-2z M26,56l2,0 0,2 -2,0 0,-2z M30,56l2,0 0,2 -2,0 0,-2z M32,56l2,0 0,2 -2,0 0,-2z M34,56l2,0 0,2 -2,0 0,-2z M40,56l2,0 0,2 -2,0 0,-2z M50,56l2,0 0,2 -2,0 0,-2z M56,56l2,0 0,2 -2,0 0,-2z \\" stroke=\\"transparent\\" fill=\\"black\\" /></svg>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -601,6 +675,7 @@ export const slides = [props => <>
     </div>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -642,6 +717,7 @@ export const slides = [props => <>
     </div>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -682,6 +758,7 @@ export const slides = [props => <>
     <h1>{\`😄\`}</h1>
     
             </>];
+export const backgrounds = [0, 0];
 export const fusumaProps = [{}, {}];
 
 const layoutProps = {
@@ -718,6 +795,7 @@ export const slides = [props => <>
 \`}<img src={require('/tmp/withoutAlt.jpg')}></img></p>
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 
 const layoutProps = {
@@ -766,6 +844,7 @@ B-->D;
 C-->D;</div>
     
             </>];
+export const backgrounds = [0, 0];
 export const fusumaProps = [{}, {}];
 
 const layoutProps = {
@@ -810,6 +889,7 @@ export const slides = [props => <>
     <h1>{\`2\`}</h1>
     
             </>];
+export const backgrounds = [0, 0];
 export const fusumaProps = [{}, {}];
 
 const layoutProps = {
@@ -845,6 +925,7 @@ export const slides = [props => <>
     <Sample mdxType=\\"Sample\\" mdxType=\\"Sample\\" />
     
             </>];
+export const backgrounds = [0];
 export const fusumaProps = [{}];
 const makeShortcode = name => function MDXDefaultShortcode(props) {
       console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
diff --git a/packages/mdx-loader/__tests__/index.js b/packages/mdx-loader/__tests__/index.js
@@ -176,6 +176,22 @@ const a = 1;
 const b = 2;
 console.log(a + b);
 \`\`\`
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should add background to props', async () => {
+    const src = `
+<!-- background: red -->
+`;
+
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should add background(url) to props', async () => {
+    const src = `
+<!-- background: '../../img.jpeg' -->
 `;
 
     expect(await transformToJS(src)).toMatchSnapshot();
diff --git a/packages/mdx-loader/src/mdxPlugin.js b/packages/mdx-loader/src/mdxPlugin.js
@@ -15,6 +15,7 @@ function mdxPlugin() {
     const slides = [];
     let slide = [];
     let props = {};
+    let background = 0; // TODO: hmm... combine into fusumaProps but need to transform to `require`
     let videoId = 1;
     let mermaidId = 1;
 
@@ -24,9 +25,10 @@ function mdxPlugin() {
 
       // move to a new slide
       if (type === 'thematicBreak') {
-        slides.push({ slide, props });
+        slides.push({ slide, props, background });
         slide = [];
         props = {};
+        background = 0; // why 0? null, undefined, '' are omitted at client side
         return;
       }
 
@@ -35,6 +37,10 @@ function mdxPlugin() {
         const prefix = p.split('\n')[0];
         const attr = rest.map((r) => r.trim());
 
+        if (prefix === 'background') {
+          background = attr[0].includes('/') ? `require(${attr[0]})` : `'${attr[0]}'`;
+          return;
+        }
         if (prefix === 'section-title') {
           props.sectionTitle = attr.join('');
           return;
@@ -138,15 +144,17 @@ function mdxPlugin() {
           .replace(/class=/g, 'className=');
       }
     });
+
+    // push last slide
+    slides.push({ slide, props, background });
+
     const res = {
       jsx: [],
       fusumaProps: [],
+      background: [],
     };
 
-    // push last slide
-    slides.push({ slide, props });
-
-    slides.forEach(({ slide, props }) => {
+    slides.forEach(({ slide, props, background }) => {
       const hash = mdxAstToMdxHast()({
         type: 'root',
         children: slide,
@@ -160,6 +168,7 @@ function mdxPlugin() {
       for (const pos of matches) {
         const [, className] = pos;
         const div = className ? `<div className="${className.trim()}">` : '<div>';
+
         mdxJSX = mdxJSX.replace(/{\s.+\/\* block-start:?(.*?) \*\/\s.+}/m, div);
       }
 
@@ -179,6 +188,7 @@ function mdxPlugin() {
 
         res.jsx.push(template);
         res.fusumaProps.push(fusumaProps);
+        res.background.push(background);
       }
     });
 
@@ -191,6 +201,7 @@ function mdxPlugin() {
         import React from 'react';
         import { mdx } from '@mdx-js/react';
         export const slides = [${res.jsx.join(',\n')}];
+        export const backgrounds = [${res.background.join(',\n')}];
         export const fusumaProps = [${res.fusumaProps.join(',\n')}];`,
     });
   };
diff --git a/samples/debug/slides/09-background.md b/samples/debug/slides/09-background.md
@@ -0,0 +1,3 @@
+<!-- background: #444 -->
+
+## background
diff --git a/samples/intro/assets/background.jpeg b/samples/intro/assets/background.jpeg
diff --git a/samples/intro/slides/04-slide.md b/samples/intro/slides/04-slide.md
@@ -98,6 +98,21 @@ The class name of `<!-- block-start -->` isn't mandatory.
 
 ---
 
+## Set Background
+
+<!-- background: '../assets/background.jpeg' -->
+
+```md
+<!-- background: '../assets/background.jpeg' -->
+
+Also, you can specify `#` and names.
+
+<!-- background: #f5f5f5 -->
+<!-- background: green -->
+```
+
+---
+
 ## Declare Section Title
 
 ```md

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`html {`
`2`	`2`	`font-size: 62.5%;`
`3`	`3`	`-webkit-print-color-adjust: exact;`
	`4`	`+ background: var(--color-background);`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<!-- background: #444 -->`
	`2`	`+`
	`3`	`+## background`