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.

Source Distribution

sphinxcontrib-jsdemo-0.1.4.tar.gz (7.2 kB view details)

Uploaded Source

Built Distribution

sphinxcontrib_jsdemo-0.1.4-py2-none-any.whl (6.9 kB view details)

Uploaded Python 2

File details

Details for the file sphinxcontrib-jsdemo-0.1.4.tar.gz.

File metadata

File hashes

Hashes for sphinxcontrib-jsdemo-0.1.4.tar.gz
Algorithm Hash digest
SHA256 3d03b6af0dfed69413039ee8a5e6b62846353e942afb56fecf0fd3b067dc1447
MD5 e3fd7c99902d27ba61f2ae439f714481
BLAKE2b-256 89122224b833a3b9e0bbb9e47a4ed38dbedf422af2d722a4b8d9d1cbbc17ec32

See more details on using hashes here.

File details

Details for the file sphinxcontrib_jsdemo-0.1.4-py2-none-any.whl.

File metadata

File hashes

Hashes for sphinxcontrib_jsdemo-0.1.4-py2-none-any.whl
Algorithm Hash digest
SHA256 b9aa9f109cd1ffe517c7ef2edb7d60a634a5d814cd18cd58cb1fb966c79548cf
MD5 5985142120cec03a763d897e4621984e
BLAKE2b-256 4098165419b88ba45fef65010fa0072f1e39ab4a11e1853427dcbf1add2a6f47

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page