Awesome

Docsify Demo 💻

Plugin for Docsify 📘 that adds a preview of your component

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

• A live preview of your component/s, which can be resized to simulate smaller devices
• Each demo comes with a toggleable code view, which reveals the underlying code
• For all the code previews, this plugin integrates a copy button feature

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>

2. Add the jsdelivr styles

<link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/docsify-demo@latest/dist/index.min.css"
/>

3. Use the following markdown to add a component to your documentation

```html preview
<p>Hello, World.</p>
```

4. This is what it should look like

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.