Generate Presentation From Markdown – mark-display

Install & Download:

# NPM
$ npm install vue-mark-display --save

Description:

mark-display is a Vue.js component that dynamically generates a presentation from Markdown-based slides.

Powered by the marked markdown parsing library.

More features:

• Touch-friendly. Requires Hammer.js.
• Allows to export the presentation to a PDF file.

Basic usage:

Install and import the package.

import MarkDisplay from "vue-mark-display";

Use the mark-display component in the template.

<template>
  <mark-display
    :markdown="markdown"
    @title="setTitle"
    MORE PROPS HERE
  ></mark-display>
</template>

Use markdown to write slides.

const markdown = `# Hello World
----
This is Vue Mark Display`;

Generate a presentation from the slides.

export default {
  components: { MarkDisplay },
  data() {
    return { markdown };
  },
  methods: {
    setTitle({ title }) {
      document.title = title;
    }
  }
};

Available props.

markdown: { type: String },
src: { type: String },
page: { type: Number },
baseUrl: { type: String },
theme: { type: String },
autoFontSize: { type: Boolean, default: false },
autoBaseUrl: { type: Boolean, default: false },
autoBlankTarget: { type: Boolean, default: false },
keyboardCtrl: { type: Boolean, default: false },
urlHashCtrl: { type: Boolean, default: false },
supportPreview: { type: Boolean, default: false }

Event handlers.

// when slide changed
@change="func({ from, to })
// when title changed
@title="func({ title })"

API methods.

• goto(page: number): go to a specific slide
• goNext(): go to the next slide
• goPrev(): back to the prev slide
• goFirst(): go to the first slide
• goLast(): go to the last slide

Preview:

Changelog:

08/22/2021

• v0.2.2