There are three ways to use demobox, for varying simplicity and flexibility.
The demobox cli tool will turn a regular markdown file with annotated code
snippets into a stylish demo page with editable examples. You can look at the
markdown source for this page
here as an
example. Also the source for the demo page
(demo.md)
showcases a number of features.
$ npm install -g demobox
$ demobox -i demo.md -o demo.html
demo.md (||)
---
title: Demobox Demos
subtitle: Getting rather meta
fontPair: Open Sans
colors: light-green
links:
Home: index.html
Demos: demos.html
Themes: themes.html
Github: https://github.com/jaredly/demobox
---
# First example
``ˋjavascript
// @demobox height=150px
var first = 'javascript code'
, second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
// element.
<p>
<span>{second} </span><br/>
<strong>JSX is just fine</strong>
</p>
``ˋ
... etc.
demo.html rendered page (||)
There are two configuration options associated with theming, colors and
fontPair. Look at the themes page for examples and more
information.
There are a few suffixes you can put onto headings that will give them extra properties (See the markdown source of this page for an example).
(<<) marks the section as collapsed(>>) marks the section as collapsible but expanded(||) makes the section part of a column group. Adjascent sections (of the
same heading level) that have this marking will be rendered side-by-side.
An example of this is the demo.md and "demo.html rendered page"
sections above.demobox.js drop-in script<head><!-- if you want codemirror, that needs to be included separately -->
<script src="https://jaredly.github.io/demobox/demobox.js"></script>
<link rel="stylesheet" href="https://jaredly.github.io/demobox/demobox.css">
<textarea data-demobox>
// some great code here
var x = <em>element</em>;
<strong>End with a react {x}</strong>
</textarea>
The demobox.js script finds all textareas with the data-demobox
attribute and converts them into demoboxes that look like this:
// @demobox
// some great code here
var x = <em>element</em>;
<strong>End with a react {x}</strong>
Configuration options can be given as data-* attributes on the textarea.
Look at the html source of this page (and the demo page) for example usage.
If you install the demobox library from npm (npm install -S demobox) then
you can use the DemoBox react component in your project.
In this demobox, you can play with the DemoBox component :).
// @demobox
var value = `\
<strong>
It's demoboxes all the way down...
</strong>
`;
// Try changing position to left, right
// or top, and codeMirror to false
<DemoBox
position='bottom'
header={true}
style={{width: 360}}
codeMirror={true}
initialValue={value}/>
FAQs
Demo Page Generator & Live Editor Component
The npm package demobox receives a total of 2 weekly downloads. As such, demobox popularity was classified as not popular.
We found that demobox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.