livedemo

Turn highlighted HTML, CSS and JavaScript <code> snippets into live demos.

Initially written for this blog post.

Use it

1. Add a comment that contains the text enable javascript as the first, unindented line in code that you want to demo.

2. Highlight code in your HTML page with something like redcarpet or Pygments (both available in Jekyll) or Prism.

3. Download and include the script somewhere in your HTML page: <script src="livedemo.min.js"></script> (after Prisim if you're using it).

HTML

Code elements matching the HTMLSelector and whose first textNode's textContent match the HTMLFlag RegExp will be demo'd.

<!-- enable javascript to view a demo -->
<svg id="demo-svg" viewBox="0 -50 400 100">
    <polygon points="80 -40, 120 40, 40 40" fill="#29e" />
    <rect height="80" width="80" y="-40" x="160" fill="#4e4" />
    <circle cx="320" cy="0" r="40" fill="#f40" />
</svg>

<!-- enable javascript to view a demo --> will be noticed by livedemo. The comment is removed and the remaining content is inserted into the document beside the code element's parent's parent by default.

If for example the HTML on the page is

<div>
    <pre>
        <code class="language-html">
            ... the generated highlighted code ...
        </code>
    <pre>
</div>

then the textContent of the <code> will be inserted after the </div> within a new div.live-demo element.

This makes it convenient for Jekyll sites using redcarpet or Pygments.

CSS

The text of code elements that match the CSSSelector and have firstChildren that match the CSSFlag RegExp will be added to document.head in <script> tags.

/* enable javascript to vew demo */
#demo-svg {
    width: 100%;
    height: 25%;
}

JavaScript

Elements that match the JSSelector and whose firstChild's textContent matches the JSFlag RegExp will have their text executed.

// please enable javascript
var demoSvg = document.getElementById('demo-svg');
 
demoSvg.addEventListener('click', function (event) {
    alert('click on <' + event.target.nodeName + '>');
});

/* enable javascript */
var colours = ['white', 'black'];
 
setInterval(function () {
    demoSvg.style.backgroundColor = colors[0];
 
    colors = [colors[1], colors[0]];
}, 3000);

Both scripts above will be executed and the flag comments will be removed form the <code> blocks.

JavaScript code is executed after HTML and CSS is inserted into the document. If the execution of a code block throws an error, the element and error are logged to the console.

Configuration

The properties of the object window.liveDemoSettings are used to change settings for livedemo if they are set before the DOMContentLoaded event occurs and calls window.liveDemo. The properties are:

• HTMLSelector, JSSelector, CSSSelector: Elements matching these CSS selectors will be checkd for HTMLFlag, CSSFlag and JSFlag respectively. The default values are:

  • HTML: 'code.language-xml,code.language-html,code.language-markup,code.xml,code.html'
  • CSS : 'code.language-css,code.css'
  • JS :'code.language-javascript,code.javascript'

• HTMLFlag, CSSFlag, JSFlag: If the textContents of the firstChildren of the elements matching the respective selectors passes a test for this RegExp, they are processed as HTML, CSS or JavaScript. The default values are:

  • HTML: /^<!--.*enable javascript.*-->/
  • CSS : /^\/\*.*enable javascript.*\*\//
  • JS : /^\/\/.*enable javascript.*|^\/\*.*enable javascript.*\*\//

• codeElementDepth: How much lower in the DOM tree the <code> elements are than the level you want demo HTML div.live-demos to be inserted. Default is 2 as explained in the "HTML" section of this document.

• insertPosition: The position to insert div.live-demos relative to the element that is demoCodeDepth levels up from the <code> element. The default value is 'afterend'. See Element.insertAdjacentHTML for other values.

License

MIT