fix styles

packages/app/src/components/PagePresentationModal.tsx

@@ -55,7 +55,6 @@ const PagePresentationModal = (): JSX.Element => {
             revealOptions={{
               embedded: true,
               hash: true,
-              disableLayout: true,
             }}
           >
             {markdown}

packages/presentation/src/components/Presentation.module.scss

@@ -0,0 +1,5 @@
+.grw-presentation :global {
+  .slides {
+    text-align: unset;
+  }
+}

packages/presentation/src/components/Presentation.tsx

@@ -3,11 +3,16 @@ import React, { useEffect } from 'react';
 import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 import Reveal from 'reveal.js';
 
+import { MARP_CONTAINER_CLASS_NAME, Sections } from './Sections';
 
 import 'reveal.js/dist/reveal.css';
-import { CONTAINER_CLASS_NAME, Sections } from './Sections';
+import styles from './Presentation.module.scss';
 
 
+const baseRevealOptions: Reveal.Options = {
+  disableLayout: true,
+};
+
 type Props = {
   rendererOptions: ReactMarkdownOptions,
   revealOptions?: Reveal.Options,
@@ -19,14 +24,14 @@ export const Presentation = (props: Props): JSX.Element => {
 
   useEffect(() => {
     if (children != null) {
-      const deck = new Reveal(revealOptions);
+      const deck = new Reveal({ ...baseRevealOptions, ...revealOptions });
       deck.initialize()
         .then(() => deck.slide(0)); // navigate to the first slide
     }
   }, [children, revealOptions]);
 
   return (
-    <div className={`reveal ${CONTAINER_CLASS_NAME}`}>
+    <div className={`grw-presentation ${styles['grw-presentation']} reveal ${MARP_CONTAINER_CLASS_NAME}`}>
       <div className="slides d-flex justify-content-center align-items-center">
         <Sections rendererOptions={rendererOptions}>{children}</Sections>
       </div>

packages/presentation/src/components/Sections.global.scss

@@ -0,0 +1,5 @@
+div.marpit > div.slides > section :is(pre, marp-pre) {
+  padding: 0;
+  background-color: none;
+  border: none;
+}

packages/presentation/src/components/Sections.tsx

@@ -8,12 +8,14 @@ import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 
 import * as hrSplitter from '../services/renderer/hr-splitter';
 
+import './Sections.global.scss';
+
+export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
-export const CONTAINER_CLASS_NAME = 'marpit';
 
 const marp = new Marp({
   container: [
-    new Element('div', { class: CONTAINER_CLASS_NAME }),
+    new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
     new Element('div', { class: 'slides' }),
   ],
   inlineSVG: false,