*************************************************************************
  ``sphinxcontrib-jsdemo`` -- HTML/Javascript Demo extension for Sphinx
*************************************************************************

Overview
========

``sphinxcontrib-jsdemo`` is an extension for embedding HTML/Javascript
demo snippets into Sphinx_ documents.

You can see this extension in action at
http://htsql.org/htraf/index.html.  For more examples, see ``demo``
directory in the source distribution.

This software is written by Kirill Simonov (`Prometheus Research, LLC`_)
and released under BSD license.


Usage
=====

To enable this extension, add the following line to ``conf.py``::

    extensions.append('sphinxcontrib.jsdemo')

Now you can include a snippet of HTML/Javascript code to a Sphinx
document using ``demo`` directive.  For example::

    .. demo::

       <button>Click me!</button>

The directive renders its content twice: as a raw HTML block (demo) and
as a literal block (source).  Clicking on the *Demo* and *Source* headers
toggles visibility of the blocks.

Option ``layout`` allows you to control the relative order of the blocks.
For example, the following directive renders the source block before the
demo block with the content of the demo block initially hidden::

    .. demo::
       :layout: +source, -demo

       <button>Click me, too!</button>


Reference
=========

Directives
----------

``demo``
    Inserts a demo widget.

    The directive is rendered as a composite node with two blocks:

    * A *demo* block containing raw HTML content.

    * A *source* block with the same content in literal form.

    Clicking on a block header toggles the block's visibility.

    Options:

    ``layout``
        This option controls the order of the blocks and their initial
        visibility.  It must contain comma-separated list of blocks with
        optional ``+`` or ``-`` indicators specifying the initial
        visibility.  Examples:

        ``demo, source``
            Render the *demo* block before the *source* block.
            This is the default value of the option.

        ``+source, -demo``
            Render the *source* block before the *demo* block.
            The content of the *demo* block is hidden.

        ``-demo``
            Render the *demo* block only; hidden.

Configuration parameters
------------------------

``demo_layout``
    The layout for ``demo`` directives with no ``layout`` option.
    By default, ``+demo, +source``.

CSS classes
-----------

``demo-wrapper``
    Wraps the demo directive.

``demo-header``
    Wraps a block header.

``demo-hide``
    If set on a block header, indicates that the content of the block
    is hidden.

``demo-area``
    Wraps the demo block.

``demo-source``
    Wraps the source block.


.. _Sphinx: http://sphinx-doc.org/
.. _Prometheus Research, LLC: http://prometheusresearch.com/


.. vim: set spell spelllang=en textwidth=72: