-
Notifications
You must be signed in to change notification settings - Fork 0
/
Marp.tsx
42 lines (36 loc) · 1.04 KB
/
Marp.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Marp as MarpCore } from '@marp-team/marp-core'
import { CreateElement, VNode } from 'vue'
import Component from 'vue-class-component'
import MarpBase from './MarpBase'
import bridge from './utils/bridge'
import parse from './utils/parse'
@Component
export class Marp extends MarpBase {
get $_marp_core() {
return new MarpCore(this.$_marp_options)
}
get $_marp_rendered() {
const { html, css, comments } = this.$_marp_core.render(
this.markdown || '',
{ htmlAsArray: true }
)
return {
css,
slides: html.map((h, i) => ({ slide: parse(h), comments: comments[i] })),
}
}
render(createElement: CreateElement): VNode {
const h = bridge(createElement)
const defaultRenderer = slides =>
slides.map(({ slide }) => <marp-slide slide={slide} />)
return (
<div>
{h('style', {}, this.$_marp_rendered.css, this.$_marp_style)}
{(this.$scopedSlots.default || defaultRenderer)(
this.$_marp_rendered.slides
)}
</div>
)
}
}
export default Marp