render reveal with embedded mode

packages/app/src/components/PagePresentationModal.tsx

@@ -44,7 +44,15 @@ const PagePresentationModal = (): JSX.Element => {
           </ReactMarkdown>
         )} */}
         { rendererOptions != null && (
-          <Presentation rendererOptions={rendererOptions as ReactMarkdownOptions}>{markdown}</Presentation>
+          <Presentation
+            rendererOptions={rendererOptions as ReactMarkdownOptions}
+            revealOptions={{
+              embedded: true,
+              hash: true,
+            }}
+          >
+            {markdown}
+          </Presentation>
         ) }
       </ModalBody>
     </Modal>

packages/app/src/styles/style-app.scss

@@ -16,10 +16,6 @@
 // KaTeX
 @import '~katex/dist/katex.min';
 
-// reveal.js
-@import '~reveal.js/dist/reveal.css';
-@import '~reveal.js/dist/theme/white.css';
-
 // icons
 
 // DO NOT CHANGE THER OERDER OF font-awesome AND simple-line-icons.

packages/presentation/package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@marp-team/marp-core": "^3.4.2",
+    "@types/reveal.js": "^4.4.1",
     "eslint-plugin-regex": "^1.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/presentation/src/components/PresentationWithReveal.tsx

@@ -7,22 +7,24 @@ import Reveal from 'reveal.js';
 import * as hrSplitter from '../services/renderer/hr-splitter';
 
 
+import 'reveal.js/dist/reveal.css';
+import 'reveal.js/dist/theme/black.css';
+
+
 type Props = {
   rendererOptions: ReactMarkdownOptions,
+  revealOptions?: Reveal.Options,
   children?: string,
 }
 
 export const Presentation = (props: Props): JSX.Element => {
-  const { rendererOptions, children } = props;
+  const { rendererOptions, revealOptions, children } = props;
 
   useEffect(() => {
     if (children != null) {
-      Reveal.initialize({
-        hash: true,
-        pageNumber: true,
-      });
+      Reveal.initialize(revealOptions);
     }
-  }, [children]);
+  }, [children, revealOptions]);
 
   rendererOptions.remarkPlugins?.push(hrSplitter.remarkPlugin);
 

yarn.lock

@@ -4695,6 +4695,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/reveal.js@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@types/reveal.js/-/reveal.js-4.4.1.tgz#970e29b6ed6c07ad693797d5157ba2fb3e94840c"
+  integrity sha512-oMcIAaP9rFCODHdGC2RM71cbBGOPc4prolkPEN98LUQm9b64ePjNpD/Fb2b/oep2w0XDN4aYCdUmip6kuLEJBg==
+
 "@types/rewire@^2.5.28":
   version "2.5.28"
   resolved "https://registry.yarnpkg.com/@types/rewire/-/rewire-2.5.28.tgz#ff34de38c4269fe74e2597195d4918c25d42ebad"