# meta-markdown-deck

> A web component for presenters

Latest version **1.0.9** (published 2021-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install meta-markdown-deck
pnpm add meta-markdown-deck
yarn add meta-markdown-deck
bun add meta-markdown-deck
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2021-10-29 |
| First published | 2021-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | pitipon |

## Links

- npm: https://www.npmjs.com/package/meta-markdown-deck
- Repository: https://github.com/pitipon/meta-markdown-deck
- Homepage: https://github.com/pitipon/meta-markdown-deck#readme
- Issues: https://github.com/pitipon/meta-markdown-deck/issues
- npm.io page: https://npm.io/package/meta-markdown-deck

## Dependencies (4)

- [marked](https://npm.io/package/marked.md) ^2.0.0
- [prismjs](https://npm.io/package/prismjs.md) ^1.22.0
- [lit-html](https://npm.io/package/lit-html.md) ^1.3.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.4.0

## Recent versions

- 1.0.9 (latest) — 2021-10-29
- 1.0.8 — 2021-10-29
- 1.0.7 — 2021-10-29
- 1.0.6 — 2021-09-21
- 1.0.5 — 2021-09-13
- 1.0.4 — 2021-09-13
- 1.0.3 — 2021-09-13
- 1.0.2 — 2021-09-13
- 1.0.1 — 2021-09-13
- 1.0.0 — 2021-09-13

## README

### Note

#### Development
* Setup as node 8
```
nvm use 8
```

#### Publish to npm
* Change version of package
* `npm run build`
* `npm login`
* `npm publish`

# <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
    <script type="module" src="https://unpkg.com/markdown-deck"></script>
    ```

2. Put markdown content inside `<script type="text/markdown" />` inside `<markdown-deck />`:

    ```html
    <markdown-deck hotkey hashsync>
      <script type="text/markdown">
        # Title
        ---
        ## Hello World!
        ---
        ## The END
      </script>
    </markdown-deck>
    ```

    or set `markdown` attribute on `<markdown-deck />`:

    ```html
    <markdown-deck markdown="# Awesome Presentation" />
    ```

    or load markdown file with `src` attribute:

    ```html
    <markdown-deck src="deck.md" />
    ```

### Attributes

- `markdown="{string}"` the markdown to parse (override contents in `<script type="text/markdown"`)
- `src="{string}"` load markdown file from url
- `css="{string}"` load custom css file from url
- `index="{number}"` current slide index (starting from 0)
- `hashsync` enable syncing index with location hash
- `hotkey` enable hotkey navigation
- `invert` invert color
- `editing` toggle editor
- `printing` toggle print view
- `progressBar` toggle progress bar

### Hotkeys

- __next__: <kbd>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

---
_Source: https://npm.io/package/meta-markdown-deck · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._