Generate Presentaion From Markdown – mark-display

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

Download Details:

Author: Jinjiang

Live Demo: https://jinjiang.github.io/vue-mark-display/

Download Link: https://github.com/Jinjiang/vue-mark-display/archive/master.zip

Official Website: https://github.com/Jinjiang/vue-mark-display

Last Update: September 2, 2019

Install:

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

You Might Be Interested In:

Add Comment