Skip to content
[UNDER CONSTRUCTION] Marp renderer component for Vue
Branch: master
Clone or download
Latest commit c2fe780 Mar 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add basic implementation of Marp Vue Mar 24, 2019
.storybook Update stories to stop using force-debounced knobs Mar 26, 2019
src
stories Add story to use worker via CDN Mar 27, 2019
test Ready to use MarpWorker by same way with Marp React Mar 27, 2019
.eslintignore Add pre-built worker for CDN Mar 27, 2019
.eslintrc.yml Fix prettier Mar 25, 2019
.gitignore Initial commit Mar 23, 2019
.node-version Initial commit Mar 23, 2019
.prettierignore Update ignore files Mar 24, 2019
CHANGELOG.md 0.0.1 Mar 27, 2019
LICENSE
README.md Update README.md Mar 27, 2019
jest.config.js Add a basic test Mar 24, 2019
package.json 0.0.1 Mar 27, 2019
tsconfig.json Setup storybook Mar 23, 2019
webpack.config.js
worker.js
yarn.lock Add pre-built worker for CDN Mar 27, 2019

README.md

@marp-team/marp-vue

Storybook CircleCI Codecov npm LICENSE

Marp renderer component for Vue.

Before using Marp Vue

This component is suited to create presentation tools integrated with Marp by Vue. Marp would create the static slide contents consist of plain HTML and CSS, so you have to notice that it's not suited to control the content of your slide by Vue.

Eagle.js framework is a good choice to create beautiful slide contents with making full use of Vue power. If you really think to need, you can even use Marp Vue in that frameworks.

Install

# yarn
yarn add @marp-team/marp-core @marp-team/marp-vue

# npm
npm install --save @marp-team/marp-core @marp-team/marp-vue

Usage

Marp renderer component

This is a simple usage of Marp renderer component. It renders slides via inline SVG to <div> elements.

<template>
  <div id="app">
    <MarpRenderer :markdown="markdown" />
  </div>
</template>

<script>
import { MarpRenderer } from '@marp-team/marp-vue'

const markdown = `
# Page 1

---

## Page 2`

export default {
  components: { MarpRenderer },
  data: () => ({ markdown }),
}
</script>
<div>
  <div class="marp-xxxxxxxx">
    <svg data-marpit-svg viewBox="0 0 1280 960">
      <foreignObject width="1280" height="960">
        <section><h1>Page 1</h1></section>
      </foreignObject>
    </svg>
  </div>
  <div class="marp-xxxxxxxx">
    <svg data-marpit-svg viewBox="0 0 1280 960">
      <foreignObject width="1280" height="960">
        <section><h2>Page 2</h2></section>
      </foreignObject>
    </svg>
  </div>
</div>

We also provide Marp component and actually MarpRenderer is an alias to Marp. We recommend to use MarpRenderer becasue the multi-word component name is an essential rule in Vue style guide.

Constructor option

Marp constructor options can change in options prop.

<template>
  <div id="app">
    <MarpRenderer markdown=":+1:" :options="options" />
  </div>
</template>

<script>
import { MarpRenderer } from '@marp-team/marp-vue'

const options = {
  inlineSVG: false,
  emoji: {
    shortcode: true,
    unicode: true,
  },
}

export default {
  components: { MarpRenderer },
  data: () => ({ options }),
}
</script>

Custom renderer

You can use a custom renderer by passing slot content to children. MarpSlide component is required to render slides provided by slot props.

<template>
  <div id="app">
    <MarpRenderer :markdown="markdown" v-slot="slides">
      <div class="slide" v-for="(s, i) in slides" :key="i">
        <MarpSlide :slide="s.slide" />
        <p v-for="(comment, i) in s.comments" v-text="comment" :key="i" />
      </div>
    </MarpRenderer>
  </div>
</template>

<script>
import { MarpRenderer, MarpSlide } from '@marp-team/marp-vue'

const markdown = '# :a: <!-- A -->\n\n---\n\n# :b: <!-- B -->'

export default {
  components: { MarpRenderer, MarpSlide },
  data: () => ({ markdown }),
}
</script>

ℹ️ See also Scoped Slots in the document of Vue.

MarpWorker component (Experimental)

For the best performance of the integrated web app, MarpWorker component allows using Web Worker for Markdown conversion. It has a lot of clear advantages over a regular MarpRenderer component.

  • It does not block UI thread while converting large Markdown.
  • A blazing fast live preview by a simple but clever queueing system is available.
  • No longer need to include a huge Marp Core into main JS.
  • Web Worker will be loaded asynchronously, so the first paint will not block.

The renderer using worker may be default component of Marp Vue in future.

Basic usage

You can use it just by swapping from MarpRenderer to MarpWorker. By default, MarpWorker will use a pre-built worker via jsDelivr CDN.

<template>
  <div id="app">
    <MarpWorker markdown="# Hello, Marp Worker!" />
  </div>
</template>

<script>
import { MarpWorker } from '@marp-team/marp-vue'

export default { components: { MarpWorker } }
</script>

Use custom worker

The custom worker may specify via worker prop.

<template>
  <div id="app">
    <MarpWorker :worker="worker" markdown="# Hello, Marp Worker!" />
  </div>
</template>

<script>
import { MarpWorker } from '@marp-team/marp-vue'

export default {
  components: { MarpWorker },
  data: () => ({
    worker: new Worker('worker.js'),
  }),
}
</script>
// worker.js
require('@marp-team/marp-vue/lib/worker')()

Initial rendering

MarpWorker's custom renderer might be called with undefined slides argument, unlike Marp. It means an initial rendering of the component while preparing worker.

You may show waiting user a loading message as follows:

<MarpWorker markdown="# Hello, Marp Worker!" v-slot="slides">
  <div class="marp" v-if="slides">
    <div class="slide" v-for="(s, i) in slides" :key="i">
      <MarpSlide :slide="s.slide" />
    </div>
  </div>
  <p v-else>
    Loading Marp Worker...
  </p>
</MarpWorker>

Or initial named slot allows showing individually defined template while loading worker:

<MarpWorker markdown="# Hello, Marp Worker!">
  <template #initial>
    <p>Loading...</p>
  </template>

  <template #default="slides">
    <div class="slide" v-for="(s, i) in slides" :key="i">
      <MarpSlide :slide="s.slide" />
    </div>
  </template>
</MarpWorker>

ToDo

  • Implement Vue renderer component based on our prototype
  • Support rendering in worker
    • Allow using worker via CDN (importScript())
    • Use worker hosted on CDN by default
  • Support additional theme(s)
  • Support swapping engine (e.g. Marpit)

Author

Managed by @marp-team.

License

MIT License

You can’t perform that action at this time.