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
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
Install & Download:
# NPM
$ npm install vue-mark-display --save