Home

Awesome

Docsify Demo 💻

Plugin for Docsify 📘 that adds a preview of your component

Latest version on NPM NPM bundle size GitHub top language MIT License

This plugin is focused on testing local code within Docsify, based on the @shoelace code-block implementation. Unlike other docsify plugins that exist, this plugin supports LitElement, more recently known as Lit.Dev. Similar to Storybook, this allows for testing common use cases, but in a simpler way.

Key Features

This is my first plugin - please feel welcome to suggest features or raise bugs by creating an issue.

Installation

  1. Add the jsdelivr script
<script src="//cdn.jsdelivr.net/npm/docsify-demo@latest/dist/index.min.js"></script>
  1. Add the jsdelivr styles
<link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/docsify-demo@latest/dist/index.min.css"
/>
  1. Use the following markdown to add a component to your documentation
```html preview
<p>Hello, World.</p>
```
  1. This is what it should look like
<img src="screenshot.png" width="500px" alt="Demo Screenshot, showing a toggle bar, reveal button and preview box" />

Example

To see the small example in this repo, run the following.

git clone https://github.com/JacobWeinbren/docsify-demo
cd docsify-demo
yarn install
yarn build
yarn serve

License

This plugin uses the MIT License, summarised here.