relocate marp instance

packages/presentation/src/components/Sections.tsx

@@ -11,6 +11,18 @@ import * as hrSplitter from '../services/renderer/hr-splitter';
 
 export const CONTAINER_CLASS_NAME = 'marpit';
 
+const marp = new Marp({
+  container: [
+    new Element('div', { class: CONTAINER_CLASS_NAME }),
+    new Element('div', { class: 'slides' }),
+  ],
+  inlineSVG: false,
+  emoji: undefined,
+  html: false,
+  math: false,
+});
+
+
 type SectionsProps = {
   rendererOptions: ReactMarkdownOptions,
   children?: string,
@@ -21,16 +33,6 @@ export const Sections = (props: SectionsProps): JSX.Element => {
 
   rendererOptions.remarkPlugins?.push(hrSplitter.remarkPlugin);
 
-  const marp = new Marp({
-    container: [
-      new Element('div', { class: CONTAINER_CLASS_NAME }),
-      new Element('div', { class: 'slides' }),
-    ],
-    inlineSVG: false,
-    emoji: undefined,
-    html: false,
-    math: false,
-  });
   const { css } = marp.render('', { htmlAsArray: true });
 
   return (