can use marp in presentation

apps/app/src/components/PagePresentationModal.tsx

@@ -8,6 +8,7 @@ import {
   Modal, ModalBody,
 } from 'reactstrap';
 
+import { useIsEnabledMarp } from '~/stores/context';
 import { usePagePresentationModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { usePresentationViewOptions } from '~/stores/renderer';
@@ -35,6 +36,8 @@ const PagePresentationModal = (): JSX.Element => {
   const { data: currentPage } = useSWRxCurrentPage();
   const { data: rendererOptions } = usePresentationViewOptions();
 
+  const { data: isEnabledMarp } = useIsEnabledMarp();
+
   const toggleFullscreenHandler = useCallback(() => {
     if (fullscreen.active) {
       fullscreen.exit();
@@ -85,6 +88,7 @@ const PagePresentationModal = (): JSX.Element => {
               },
               isDarkMode,
             }}
+            isEnabledMarp = {isEnabledMarp}
           >
             {markdown}
           </Presentation>

packages/presentation/src/components/Presentation.tsx

@@ -37,11 +37,12 @@ const removeAllHiddenElements = () => {
 
 export type PresentationProps = {
   options: PresentationOptions,
+  isEnabledMarp: boolean,
   children?: string,
 }
 
 export const Presentation = (props: PresentationProps): JSX.Element => {
-  const { options, children } = props;
+  const { options, isEnabledMarp, children } = props;
   const { revealOptions } = options;
 
   const [marp, setMarp] = useState<boolean>(false);
@@ -84,7 +85,7 @@ export const Presentation = (props: PresentationProps): JSX.Element => {
   return (
     <div className={`grw-presentation ${styles['grw-presentation']} reveal ${MARP_CONTAINER_CLASS_NAME}`}>
       <div className="slides">
-        <Slides options={options} hasMarpFlag={marp}>{children}</Slides>
+        <Slides options={options} hasMarpFlag={marp && isEnabledMarp}>{children}</Slides>
       </div>
     </div>
   );