Noteworthy Programming Masterpiece
Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

markdown-deck

1.6.5 • Public • Published

<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.

Keywords

none

Install

npm i markdown-deck

DownloadsWeekly Downloads

38

Version

1.6.5

License

MIT

Unpacked Size

121 kB

Total Files

5

Last publish

Collaborators

  • avatar