# docsify-example-panels
[](https://www.npmjs.com/package/docsify-example-panels)
[](https://github.com/docsifyjs/awesome-docsify#plugins)
[](https://app.codacy.com/app/VagnerDomingues/docsify-example-panels?utm_source=github.com&utm_medium=referral&utm_content=VagnerDomingues/docsify-example-panels&utm_campaign=Badge_Grade_Dashboard)
[](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE)
[](https://www.jsdelivr.com/package/npm/docsify-example-panels)
[](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation)
Star
A [docsify.js](https://docsify.js.org) plugin for rendering example panels content from markdown.
## Demo
If you are on widescreen, checkout the *right* panel, *right* there →
This is an example panel.
You can see it's usage in practice in the docs listed below:
- [Fairlay API](https://fairlay.com/api)
- [FLAP services](https://docs.flap.cloud/#/create_new_service?id=special-files)
please contact me if you use docsify-example-panels. i would like to display it here too.
## Features
**Advantages**
- Create div panels really fast and anywhere in your .md file.
- Choose the classnames for your divs and stylize them.
- Use CSS custom properties to change it's structure.
- Prefab CSS classes for "left-panel", "right-panel" and "title-panel".
**Compatibility**
- Fully compatible with any markdown or html features:
code snippets
```html
```
quotes
> just a quote
?> a cooler quote... (at least i think it is)
images (memorable)
- Fully compatible with major docsify plugins such as:
> [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/)
>
> [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/)
>
> [docsify-copy-code](https://github.com/jperasmus/docsify-copy-code)
>
> [docsify-pagination](https://github.com/imyelo/docsify-pagination)
**Limitations**
*Nesting* (i.e panels within panels) all pannels are rendered as siblings, Nesting only avaiable throught post-render javascript code.
For multi-language documentation you can use it along with [docsify-tabs](https://jhildenbiddle.github.io/docsify-tabs/):
### **HTML**
```html
Heading
This is a paragraph.
```
### **JS**
```js
// JavaScript
function add(a, b) {
return Number(a + b);
}
```
### **CSS**
```css
/* CSS */
body {
background: white;
}
```
## Installation
Just add the docsify-example-panels plugin to your `HTML` after docsify and you'll be ready to go.
```html
```
## Usage
1. Define a panel in markdown file using `panels:start` and `panels:end` HTML comments.
HTML comments are used to mark the start and end of a panel. The use of HTML comments prevents any markup from being displayed when markdown is rendered as HTML outside of your docsify site (e.g. Github, GitLab, etc).
```markdown
(...) - Awesome div wrapper
```
2. Define divs within a panel in markdown file using HTML comments.
The character sequence after double dot : will be rendered as the classname of the div content. all proceeding content will be associated with that div up to start of the next div `div:class` or end of panel `panels:end` comments.
```markdown
(...) - Awesome title
(...) - Awesome explanation
(...) - Awesome example
```
3. You can add a custom class aswell.
perphaps you want something like a "floating-cat" class
```markdown
...
```
## Customization
### Properties
Allows you to customize panels styles without rewriting any CSS rule.
```css
:root{
/* Document */
--docsify-example-panels-document-width: 90%;
/* Wrapper */
--docsify-example-panels-wrapper-width: 100%;
/* Standards */
--docsify-example-panels-padding-inner : 8px 16px;
--docsify-example-panels-padding-surroundings : 0px;
/* Panel Left */
--docsify-example-panels-left-panel-background : transparent;
--docsify-example-panels-left-panel-width : 60%;
/* Panel Right */
--docsify-example-panels-right-panel-background : transparent;
--docsify-example-panels-right-panel-width : 40%;
/* Titles */
--docsify-example-panels-title-background: transparent;
}
```
### Custom Properties
You can change properties by adding a `
```
### Custom Styles
Custom styles can be created using the classname you choosed in markdown
The main purpose of this plugin is to ease and rush the production of any markdown written documentation using the right panel as code examples.
But let's suppose you indeed wants to add a floating cat in your documentation, like i did.
In case you insisted to read this in github url the cat image won't be so floating.
1. Add this to your markdown:
```markdown
```
2. will be rendered like this:
```html
```
3. Then you can play with css animations:
```css
.floating-cat{
position:absolute;
right: 0px;
width: 200px;
height: 360px;
z-index: 1000;
-webkit-filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6));
filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.6));
transform: translatey(0px);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.8));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6));
transform: translatey(0px);
}
50% {
box-shadow: drop-shadow(0px 25px 10px rgba(0,0,0,0.4));
filter: drop-shadow(0px 25px 10px rgba(0,0,0,0.2));
transform: translatey(-20px);
}
100% {
box-shadow: drop-shadow(0px 5px 5px rgba(0,0,0,0.8));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.6));
transform: translatey(0px);
}
}
```
## Contact & Support
- Create a [GitHub issue](https://github.com/VagnerDomingues/docsify-example-panels/issues) for bug reports, feature requests, or questions
- Add a ⭐️ [star on GitHub](https://github.com/VagnerDomingues/docsify-example-panels) or ❤️ [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2FVagnerDomingues%2Fdocsify-example-panels&hashtags=docsify,developers,frontend,plugin,documentation) to support the project!
## License
This project is licensed under the [MIT license](https://github.com/VagnerDomingues/docsify-example-panels/blob/master/LICENSE).
Plugin created by [Vagner Domingues Madeira](https://github.com/VagnerDomingues/)