Generate Presentation From Markdown – mark-display


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.


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


Generate Presentaion From Markdown - mark-display

Download Details:

Author: Jinjiang

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-mark-display --save

You Might Be Interested In:

Add Comment