|
|
@@ -8,6 +8,8 @@ import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
|
|
|
import type { PresentationOptions } from '../consts';
|
|
|
import * as extractSections from '../services/renderer/extract-sections';
|
|
|
|
|
|
+import { RichSlideSection } from './RichSlideSection';
|
|
|
+
|
|
|
import './Slides.global.scss';
|
|
|
|
|
|
export const MARP_CONTAINER_CLASS_NAME = 'marpit';
|
|
|
@@ -19,7 +21,7 @@ const marpSlide = new Marp({
|
|
|
new Element('div', { class: 'slides' }),
|
|
|
],
|
|
|
slideContainer: [
|
|
|
- new Element('div', { class: 'shadow rounded', style: 'margin: 20px' }),
|
|
|
+ new Element('section', { class: 'shadow rounded m-2' }),
|
|
|
],
|
|
|
inlineSVG: true,
|
|
|
emoji: undefined,
|
|
|
@@ -27,29 +29,6 @@ const marpSlide = new Marp({
|
|
|
math: false,
|
|
|
});
|
|
|
|
|
|
-// TODO: to change better slide style
|
|
|
-// https://redmine.weseek.co.jp/issues/125680
|
|
|
-const marp = new Marp({
|
|
|
- container: [
|
|
|
- new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
|
|
|
- new Element('div', { class: 'slides' }),
|
|
|
- ],
|
|
|
- inlineSVG: false,
|
|
|
- emoji: undefined,
|
|
|
- html: false,
|
|
|
- math: false,
|
|
|
-});
|
|
|
-const marpSlideTheme = marp.themeSet.add(`
|
|
|
- /*!
|
|
|
- * @theme slide_preview
|
|
|
- */
|
|
|
- section {
|
|
|
- max-width: 90%;
|
|
|
- }
|
|
|
-`);
|
|
|
-marp.themeSet.default = marpSlideTheme;
|
|
|
-
|
|
|
-
|
|
|
type Props = {
|
|
|
options: PresentationOptions,
|
|
|
children?: string,
|
|
|
@@ -87,8 +66,11 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
disableSeparationByHeader,
|
|
|
},
|
|
|
]);
|
|
|
+ if (rendererOptions.components != null) {
|
|
|
+ // rendererOptions.components.section = RichSlideSection;
|
|
|
+ }
|
|
|
|
|
|
- const { css } = marp.render('', { htmlAsArray: true });
|
|
|
+ const { css } = marpSlide.render('', { htmlAsArray: true });
|
|
|
return (
|
|
|
<>
|
|
|
<Head>
|
reiji-h