Skip to content

pitipon/meta-markdown-deck

Repository files navigation

Note

Development

  • Setup as node 8
nvm use 8

Publish to npm

  • Change version of package
  • npm run build
  • npm login
  • npm publish

Support language by Prism.js

https://prismjs.com/

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages