initialize Reveal

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

@@ -16,6 +16,10 @@
 // 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/src/components/PresentationWithReveal.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import Reveal from 'reveal.js';
 
 import * as hrSplitter from '../services/renderer/hr-splitter';
 
+
 type Props = {
   rendererOptions: ReactMarkdownOptions,
   children?: string,
@@ -13,14 +15,22 @@ type Props = {
 export const Presentation = (props: Props): JSX.Element => {
   const { rendererOptions, children } = props;
 
+  useEffect(() => {
+    if (children != null) {
+      Reveal.initialize();
+    }
+  }, [children]);
+
   rendererOptions.remarkPlugins?.push(hrSplitter.remarkPlugin);
 
   return (
-    <>
-      { children == null
-        ? <section>No contents</section>
-        : <ReactMarkdown {...rendererOptions}>{children}</ReactMarkdown>
-      }
-    </>
+    <div className="reveal">
+      <div className="slides">
+        { children == null
+          ? <section>No contents</section>
+          : <ReactMarkdown {...rendererOptions}>{children}</ReactMarkdown>
+        }
+      </div>
+    </div>
   );
 };