Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including markdown-deck with all npm packages installed. Try it out:

var markdownDeck = require("markdown-deck")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

markdown-deck v1.6.8

A web component for presenters

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free