Sphinx extension for creating tabbed views in HTML documentation with syntax highlighting and synchronization.
Core setup functions and builder compatibility detection for the sphinx-tabs Sphinx extension.
Primary setup function that registers all sphinx-tabs components with Sphinx.
def setup(app):
"""Set up the sphinx-tabs extension
Args:
app: Sphinx application instance
Returns:
dict: Extension metadata with parallel processing settings
{'parallel_read_safe': True, 'parallel_write_safe': True}
"""Registration Actions:
Usage:
# Automatically called when extension is loaded
extensions = ['sphinx_tabs.tabs']Return Value:
{
"parallel_read_safe": True, # Safe for parallel reading
"parallel_write_safe": True, # Safe for parallel writing
}Determines which Sphinx builders are compatible with sphinx-tabs functionality.
def get_compatible_builders(app):
"""Get list of builders compatible with sphinx-tabs
Args:
app: Sphinx application instance
Returns:
list: List of builder names that support tabs
"""Default Compatible Builders:
html - Standard HTML buildersinglehtml - Single-page HTMLdirhtml - Directory-based HTMLreadthedocs - Read the Docs HTMLreadthedocsdirhtml - RTD directory HTMLreadthedocssinglehtml - RTD single HTMLreadthedocssinglehtmllocalmedia - RTD single HTML with local mediaspelling - Spelling checker (supports tabs for content checking)Extended Compatibility:
# Builders are extended with user configuration
builders.extend(app.config["sphinx_tabs_valid_builders"])Usage in Code:
# Check if current builder supports tabs
if self.env.app.builder.name in get_compatible_builders(self.env.app):
# Generate full tab HTML structure
else:
# Generate simplified fallback structureCustom docutils nodes for rendering tab HTML structure.
# Node classes registered with HTML visitors
app.add_node(SphinxTabsContainer, html=(visit, depart))
app.add_node(SphinxTabsPanel, html=(visit, depart))
app.add_node(SphinxTabsTab, html=(visit, depart))
app.add_node(SphinxTabsTablist, html=(visit, depart))Node Types:
class SphinxTabsContainer(nodes.container):
"""Top-level container for tab set"""
tagname = "div"
class SphinxTabsPanel(nodes.container):
"""Individual tab content panel"""
tagname = "div"
class SphinxTabsTab(nodes.paragraph):
"""Clickable tab button"""
tagname = "button"
class SphinxTabsTablist(nodes.container):
"""Container for tab navigation buttons"""
tagname = "div"Functions that generate HTML output for custom nodes.
def visit(translator, node):
"""Generate opening HTML tag for node
Processes node attributes and generates the opening HTML tag using the
translator's starttag method. Filters out docutils-specific attributes
before HTML generation.
Args:
translator: HTML translator instance from Sphinx
node: docutils node being processed (SphinxTabsContainer, etc.)
"""
def depart(translator, node):
"""Generate closing HTML tag for node
Appends the closing HTML tag for the node using the node's tagname.
Args:
translator: HTML translator instance from Sphinx
node: docutils node being processed (SphinxTabsContainer, etc.)
"""HTML Generation Process:
translator.starttag(node, node.tagname, **attrs)</{node.tagname}> and append to translator bodyAttribute Filtering: The visit function removes these internal docutils attributes before HTML generation:
classes - CSS classes (handled separately by Sphinx)ids - Element IDs (handled separately by Sphinx)names - docutils name referencesdupnames - duplicate name trackingbackrefs - back-reference trackingAutomatic integration of CSS and JavaScript files.
# Static directory registration
static_dir = Path(__file__).parent / "static"
app.connect(
"builder-inited",
(lambda app: app.config.html_static_path.insert(0, static_dir.as_posix())),
)Asset Constants:
JS_FILES = ["tabs.js"]
CSS_FILES = ["tabs.css"]Asset Files:
tabs.css - Styling for tab interfacetabs.js - JavaScript for tab functionality and interactionLoading Strategy:
update_context handlerPage-level event handling for conditional asset loading.
app.connect("html-page-context", update_context)
def update_context(app, pagename, templatename, context, doctree):
"""Add CSS/JS assets only to pages that contain tabs
Args:
app: Sphinx application
pagename: Current page name
templatename: Template being used
context: Template context
doctree: Document tree for current page
"""Asset Loading Logic:
Internal visitor class used to detect sphinx-tabs directives in document trees.
class _FindTabsDirectiveVisitor(nodes.NodeVisitor):
"""Visitor pattern that looks for sphinx tabs directive in a document
Args:
document: docutils document to traverse
"""
def __init__(self, document):
"""Initialize visitor with document"""
def unknown_visit(self, node):
"""Visit node and check if it contains sphinx-tabs class"""
@property
def found_tabs_directive(self):
"""Return whether a sphinx tabs directive was found
Returns:
bool: True if tabs directive found in document
"""Usage in Asset Loading:
visitor = _FindTabsDirectiveVisitor(doctree)
doctree.walk(visitor)
if visitor.found_tabs_directive:
# Load tab assets for this pagesetup() called when extension loadedSphinx Versions:
Python Versions:
pathlib.Path for cross-platform compatibilityBuilder Support:
sphinx_tabs_valid_buildersInstall with Tessl CLI
npx tessl i tessl/pypi-sphinx-tabs