Skip to main content

HTML/Javascript Demo extension for Sphinx

Project description

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
sphinxcontrib_jsdemo-0.1.4-py2-none-any.whl (6.9 kB) Copy SHA256 hash SHA256 Wheel 2.7
sphinxcontrib-jsdemo-0.1.4.tar.gz (7.2 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page