|
|
@@ -1,5 +1,3 @@
|
|
|
-import React from 'react';
|
|
|
-
|
|
|
import { Marp } from '@marp-team/marp-core';
|
|
|
import { Element } from '@marp-team/marpit';
|
|
|
import Head from 'next/head';
|
|
|
@@ -13,19 +11,33 @@ import './Slides.global.scss';
|
|
|
export const MARP_CONTAINER_CLASS_NAME = 'marpit';
|
|
|
|
|
|
|
|
|
-const marp = new Marp({
|
|
|
+const marpSlide = new Marp({
|
|
|
container: [
|
|
|
new Element('div', { class: MARP_CONTAINER_CLASS_NAME }),
|
|
|
new Element('div', { class: 'slides' }),
|
|
|
],
|
|
|
- inlineSVG: false,
|
|
|
+ slideContainer: [
|
|
|
+ new Element('div', { class: 'shadow rounded', style: 'margin: 20px' }),
|
|
|
+ ],
|
|
|
+ inlineSVG: true,
|
|
|
emoji: undefined,
|
|
|
html: false,
|
|
|
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
|
|
|
@@ -49,12 +61,21 @@ export const Slides = (props: Props): JSX.Element => {
|
|
|
rendererOptions, isDarkMode, disableSeparationByHeader,
|
|
|
} = options;
|
|
|
|
|
|
-
|
|
|
- // TODO: can Marp rendering
|
|
|
- // https://redmine.weseek.co.jp/issues/115673
|
|
|
if (hasMarpFlag) {
|
|
|
+ const { html, css } = marpSlide.render(children ?? '');
|
|
|
return (
|
|
|
- <></>
|
|
|
+ <>
|
|
|
+ <Head>
|
|
|
+ <style>{css}</style>
|
|
|
+ </Head>
|
|
|
+ <div
|
|
|
+ // eslint-disable-next-line react/no-danger
|
|
|
+ dangerouslySetInnerHTML={{
|
|
|
+ // DOMpurify.sanitize delete elements in <svg> so sanitize is not used here.
|
|
|
+ __html: html,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
);
|
|
|
}
|
|
|
|
reiji-h