Skip to main content

Turn example code into interactive HTML documentation

Project description

Code Guide

A tool that generates an interactive HTML explanation of how code
works from unobtrusive markup of comments in the code. The
explanation is readable in the source, as well as in the generated


Install with pip:

pip install code-guide

Running the Tool

To convert a single file, _example.py_:

# This is where we are going to save generated HTML
mkdir outdir

# Generate HTML from some example code
code-guide --extract-resources -o outdir/example.html

Run `code-guide --help` for more help on the command-line options.

Converting Multiple Files with Make

When converting multiple files, run the translation of source files
into HTML and the extraction of resources used by all the generated
HTML as separate steps.

It's convenient to use Make to coordinate the translation of multiple
files, as so:

EXAMPLES = $(wildcard examples/*.java)

docs: $(EXAMPLE_DOCS) docs/examples/code-guide.css
.PHONY: docs

docs/examples/%.html: examples/
@mkdir -p $(dir $@)
code-guide $< -o $@ -r . -l java -c // -t '(.+).java' '\1.html'

@mkdir -p $(dir $@)
code-guide --extract-resources --resource-dir=$(dir $@)

How to Mark Up Example Code

Mark up regions of code to be explained by adding line comments that
immediately start with a "|" character at the start of the region, and
a line comment that starts with "|." at the end of the region.

E.g., in Python:

#| This is the start

In Java:

//| This is the start

The rest of this document describes using the tool with a language
that has line comments starting with "#", but the documentation
applies to just as well languages with a different line-comment

Adjacent #| comments are treated as a single block of Markdown syntax.
Regions can be nested but not overlap.

#| This if statement compares two numbers.
#| It copes with floating point _NaN_ values.
if a > b:
print "larger"
elif a < b:
print "smaller"
elif a == b:
print "the same"
#| _NaN_ is never equal to another floating point value, not even to _NaN_.
print "NaN"

The order in which explanations are presented to the reader can be
controlled by adding indices in square brackets at the start of each
#| comment block. Indices start at 1. Either all or none of the
explanations must have an index. If no explanations have an index,
they are shown in the order they appear in the source code.

#| [2] This statement will be explained second.
print "goodbye, cruel world."

#| [1] This statement will be explained first.

The generated document can be given an introduction and/or end-note in
markdown format with a block of adjacent lines that start with #||.
If the introduction has a top-level heading, the text of the heading
is used as the title of the generated HTML.

Only the first and last block of text will be used. Any others will
be silently ignored (and may cause an error in future versions of the

#|| Hello World
#|| ===========
#|| Hello world is traditionally used to illustrate to beginners
#|| the most basic syntax of a programming language, or to verify
#|| that a language or system is operating correctly.

#| This is all that is required in Python
print "hello, world"

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

code-guide-1.0.2.tar.gz (126.7 kB view hashes)

Uploaded source

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