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