use marp in presentation

packages/presentation/src/components/Presentation.tsx

@@ -1,6 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
+
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkParse from 'remark-parse';
+import remarkStringify from 'remark-stringify';
 import Reveal from 'reveal.js';
+import { unified } from 'unified';
 
 import type { PresentationOptions } from '../consts';
 
@@ -39,6 +44,8 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   const { options, children } = props;
   const { revealOptions } = options;
 
+  const [marp, setMarp] = useState<boolean>(false);
+
   useEffect(() => {
     let deck: Reveal.Api;
     if (children != null) {
@@ -50,16 +57,34 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
       deck.on('slidechanged', removeAllHiddenElements);
     }
 
+    unified()
+      .use(remarkParse)
+      .use(remarkStringify)
+      .use(remarkFrontmatter, ['yaml'])
+      .use(() => (obj) => {
+        setMarp(false);
+        if (obj.children[0]?.type === 'yaml') {
+          const lines = (obj.children[0]?.value as string).split('\n');
+          lines.forEach((line) => {
+            const [key, value] = line.split(':').map(part => part.trim());
+            if (key === 'marp' && value === 'true') {
+              setMarp(true);
+            }
+          });
+        }
+      })
+      .process(children as string);
+
     return function cleanup() {
       deck?.off('ready', removeAllHiddenElements);
       deck?.off('slidechanged', removeAllHiddenElements);
     };
-  }, [children, revealOptions]);
+  }, [children, revealOptions, setMarp]);
 
   return (
     <div className={`grw-presentation ${styles['grw-presentation']} reveal ${MARP_CONTAINER_CLASS_NAME}`}>
       <div className="slides">
-        <Slides options={options}>{children}</Slides>
+        <Slides options={options} hasMarpFlag={marp}>{children}</Slides>
       </div>
     </div>
   );