use presentation view options directly

apps/app/src/client/services/renderer/renderer.tsx

@@ -236,6 +236,21 @@ export const generatePresentationViewOptions = (
   // based on simple view options
   const options = generateSimpleViewOptions(config, pagePath);
 
+  const { rehypePlugins } = options;
+
+
+  const rehypeSanitizePlugin: Pluggable<any[]> | (() => void) = config.isEnabledXssPrevention
+    ? [sanitize, deepmerge(
+      addLineNumberAttribute.sanitizeOption,
+    )]
+    : () => {};
+
+  // add rehype plugins
+  rehypePlugins.push(
+    addLineNumberAttribute.rehypePlugin,
+    rehypeSanitizePlugin,
+  );
+
   if (config.isEnabledXssPrevention) {
     verifySanitizePlugin(options, false);
   }

apps/app/src/components/ReactMarkdownComponents/SlideViewer.tsx

@@ -3,21 +3,22 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
 
-import type { RendererOptions } from '~/interfaces/renderer-options';
+import { usePresentationViewOptions } from '~/stores/renderer';
 
 const Slides = dynamic(() => import('../Presentation/Slides').then(mod => mod.Slides), { ssr: false });
 
 type SlideViewerProps = {
   marp: boolean,
   children: string,
-  rendererOptions: RendererOptions,
 }
 
 export const SlideViewer = React.memo((props: SlideViewerProps) => {
   const {
-    marp, children, rendererOptions,
+    marp, children,
   } = props;
 
+  const { data: rendererOptions } = usePresentationViewOptions();
+
   return (
     <Slides
       hasMarpFlag={marp}