Nickel Palladium Manganese

    @marp-team/marp-vue
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    @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

    • [x] Implement Vue renderer component based on our prototype
    • [x] Support rendering in worker
      • [x] Allow using worker via CDN (importScript())
      • [x] 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

    Keywords

    none

    Install

    npm i @marp-team/marp-vue

    DownloadsWeekly Downloads

    6

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    1.54 MB

    Total Files

    38

    Last publish

    Collaborators

    • yhatt