https://github.com/amio/markdown-deck
A web component for presenters
https://github.com/amio/markdown-deck
markdown ppt presentation slides web-component
Last synced: 7 months ago
JSON representation
A web component for presenters
- Host: GitHub
- URL: https://github.com/amio/markdown-deck
- Owner: amio
- License: mit
- Created: 2019-09-15T10:05:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T21:01:28.000Z (over 2 years ago)
- Last Synced: 2025-03-18T12:03:18.064Z (7 months ago)
- Topics: markdown, ppt, presentation, slides, web-component
- Language: TypeScript
- Homepage: https://markdown-deck.now.sh
- Size: 1.33 MB
- Stars: 17
- Watchers: 1
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# <markdown-deck />
[![npm version][npm-src]][npm-href]
[![Bundle size][bundlephobia-src]][bundlephobia-href]
[![License][license-src]][license-href]
A web component for presenters.
- Auto screen fitting & keyboard navigation
- Mobile view & touch navigation
- Dark mode
- Print view
- Live editor
## Usage
1. Import script from https://unpkg.com/markdown-deck
```html
```
2. Put markdown content inside `` inside ``:
```html
# Title
---
## Hello World!
---
## The END
```
or set `markdown` attribute on ``:
```html
```
or load markdown file with `src` attribute:
```html
```
### Attributes
- `markdown="{string}"` the markdown to parse (override contents in `Space</kbd>
- __prev / next__: <kbd>⇦</kbd> / <kbd>⇨</kbd> or <kbd>J</kbd> / <kbd>L</kbd>
- __first / last__: <kbd>⇧</kbd> / <kbd>⇩</kbd>
- __invert color (dark theme)__: <kbd>I</kbd> or <kbd>D</kbd>
- __toggle print view__: <kbd>P</kbd>
- __toggle editor__: <kbd>ESC</kbd>
### Customization
- __Custom global styles__
Use `<style />` inside `<markdown-deck />` to apply custom styles:
```html
<markdown-deck>
<style>
img[src*="badgen.net"] { height: 40px }
</style>
</markdown-deck>
```
or load external css file with `css` attribute:
```html
<markdown-deck css="index.css"></markdown-deck>
```
- __Custom per-slide style__
Write `<style />` within markdown content:
```
# Title
<style>
.slide { background: url(...) }
.content { filter: invert() }
code { opacity: 0.8 }
</style>
```
## See Also
- [eloc][eloc-href]: Eloquence cli.
[npm-src]: https://badgen.net/npm/v/markdown-deck
[npm-href]: https://www.npmjs.com/package/markdown-deck
[bundlephobia-src]: https://badgen.net/bundlephobia/min/markdown-deck
[bundlephobia-href]: https://bundlephobia.com/result?p=markdown-deck
[license-src]: https://badgen.net/badge/license/MIT
[license-href]: LICENSE.md
[eloc-href]: https://github.com/amio/eloc