<markdown-deck />

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.