Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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

Initially written for this blog post. Also used on

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. npm install livedemo and call require('livedemo')(options) (after Prisim if you're using it).


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" />

<!-- 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

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

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

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


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%;


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 <' + + '>');
/* enable javascript */
var colors = ['white', 'black'];

setInterval(function () { = 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.


  • HTMLSelector, JSSelector, CSSSelector: Elements matching these CSS selectors will be checked 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 to be inserted. Default is 2 as explained in the "HTML" section of this document.

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