Skip to content
A web component for presenters
TypeScript JavaScript HTML CSS
Branch: master
Clone or download
Pull request Compare This branch is even with amio:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.npmignore
LICENSE.md
README.md
bili.config.ts
deck.css
deck.md
index.html
now.json
package-lock.json
package.json
tsconfig.json

README.md

<markdown-deck />

npm version Bundle size License

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

    <script type="module" src="https://unpkg.com/markdown-deck"></script>
  2. Put markdown content inside <script type="text/markdown" /> inside <markdown-deck />:

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

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

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

    or load markdown file with src attribute:

    <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: Space
  • prev / next: / or J / L
  • first / last: /
  • invert color (dark theme): I or D
  • toggle print view: P
  • toggle editor: ESC

Customization

  • Custom global styles

    Use <style /> inside <markdown-deck /> to apply custom styles:

    <markdown-deck>
      <style>
        img[src*="badgen.net"] { height: 40px }
      </style>
    </markdown-deck>

    or load external css file with css attribute:

    <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: Eloquence cli.
You can’t perform that action at this time.