markdown-presentation-slides

A Vue Component for Generate Markdown Presentation Slides Library | mark-display

by

Vue mark display is a Vue component that creates a dynamic presentation from Markdown-based slides.

bootstrap markdown wysiwyg, markdown slides examples, markdown presentation template github, markdown presentation generator, markdown table generator

How to make use of it:

Install and download:

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

Install and import the package.

import MarkDisplay from "vue-mark-display";

Use the tag 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`;

Create a presentation from 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 })"

Generate Presentation From Markdown, vue mark display Plugin/Github

See Demo And Download

Demo
Download

Official Website(Jinjiang): Click Here

This superior jQuery/javascript plugin is developed by Jinjiang. For extra Advanced Usages, please go to the official website.

Leave a Comment