# steps URL: /api/rendering/plugins/directives/steps/ Section: directives -------------------------------------------------------------------------------- steps - Bengal window.BENGAL_THEME_DEFAULTS = { appearance: 'dark', palette: 'snow-lynx' }; // Progressive Enhancement System Configuration window.Bengal = window.Bengal || {}; window.Bengal.enhanceBaseUrl = '/bengal/assets/js/enhancements'; window.Bengal.watchDom = true; window.Bengal.debug = false; (function () { try { var defaults = window.BENGAL_THEME_DEFAULTS || { appearance: 'system', palette: '' }; var defaultAppearance = defaults.appearance; if (defaultAppearance === 'system') { defaultAppearance = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'; } var storedTheme = localStorage.getItem('bengal-theme'); var storedPalette = localStorage.getItem('bengal-palette'); var theme = storedTheme ? (storedTheme === 'system' ? defaultAppearance : storedTheme) : defaultAppearance; var palette = storedPalette ?? defaults.palette; document.documentElement.setAttribute('data-theme', theme); if (palette) { document.documentElement.setAttribute('data-palette', palette); } } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); } })(); Skip to main content Magnifying Glass ESC Recent Clear Magnifying Glass No results for "" Try different keywords or check your spelling Start typing to search... ↑↓ Navigate ↵ Open ESC Close Powered by Lunr ᓚᘏᗢ Documentation Info About Arrow Clockwise Get Started Note Tutorials File Text Content Palette Theming Settings Building Starburst Extending Bookmark Reference Learning Tracks Releases Dev GitHub API Reference bengal CLI Magnifying Glass Search ⌘K Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal List ᓚᘏᗢ Magnifying Glass Search X Close Documentation Info About Arrow Clockwise Get Started Note Tutorials File Text Content Palette Theming Settings Building Starburst Extending Bookmark Reference Learning Tracks Releases Dev GitHub API Reference bengal CLI Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal API Reference __main__ bengal Caret Right Folder Analysis community_detection graph_analysis graph_reporting graph_visualizer knowledge_graph link_suggestions link_types page_rank path_analysis performance_advisor results Caret Right Folder Assets manifest pipeline Caret Right Folder Autodoc base config docstring_parser utils virtual_orchestrator Caret Right Folder Extractors cli openapi python Caret Right Folder Models cli common openapi python Caret Right Folder Cache asset_dependency_map cache_store cacheable compression dependency_tracker page_discovery_cache query_index query_index_registry taxonomy_index utils Caret Right Folder Build Cache autodoc_tracking core file_tracking fingerprint parsed_content_cache rendered_output_cache taxonomy_index_mixin validation_cache Caret Right Folder Indexes author_index category_index date_range_index section_index Caret Right Folder Cli __main__ base site_templates utils Caret Right Folder Commands assets build clean collections config debug explain fix health init perf project serve site skeleton sources theme utils validate Caret Right Folder Graph __main__ bridges communities orphans pagerank report suggest Caret Right Folder New config presets scaffolds site wizard Caret Right Folder Helpers cli_app_loader cli_output config_validation error_handling menu_config metadata progress site_loader traceback validation Caret Right Folder Skeleton hydrator schema Caret Right Folder Templates base registry Caret Right Folder Blog template Caret Right Folder Changelog template Caret Right Folder Default template Caret Right Folder Docs template Caret Right Folder Landing template Caret Right Folder Portfolio template Caret Right Folder Resume template Caret Right Folder Collections errors loader schemas validator Caret Right Folder Config defaults deprecation directory_loader env_overrides environment feature_mappings hash loader merge origin_tracker validators Caret Right Folder Content Layer entry loaders manager source Caret Right Folder Sources github local notion rest Caret Right Folder Content Types base registry strategies Caret Right Folder Core build_context cascade_engine menu section theme Caret Right Folder Asset asset_core css_transforms Caret Right Folder Page computed content metadata navigation operations page_core proxy relationships utils Caret Right Folder Site core data discovery factories page_caches properties section_registry theme Caret Right Folder Debug base config_inspector content_migrator delta_analyzer dependency_visualizer explainer incremental_debugger models reporter shortcode_sandbox Caret Right Folder Discovery asset_discovery content_discovery Caret Right Folder Fonts downloader generator Caret Right Folder Health autofix base health_check report Caret Right Folder Linkcheck async_checker ignore_policy internal_checker models orchestrator Caret Right Folder Validators anchors assets cache config connectivity cross_ref fonts links menu navigation output performance rendering rss sitemap taxonomy tracks Caret Right Folder Directives analysis checkers constants Caret Right Folder Orchestration asset content full_to_incremental incremental menu postprocess related_posts render section static streaming taxonomy Caret Right Folder Postprocess html_output redirects rss sitemap special_pages Caret Right Folder Output Formats index_generator json_generator llm_generator lunr_index_generator txt_generator utils Caret Right Folder Rendering api_doc_enhancer asset_extractor errors jinja_utils link_transformer link_validator pygments_cache renderer template_context template_profiler validator Caret Right Folder Parsers base factory mistune native_html pygments_patch python_markdown Caret Right Folder Pipeline core output thread_local toc transforms Caret Right Folder Plugins badges cross_references inline_icon term variable_substitution Caret Right Folder Directives _icons admonitions badge base button cache cards checklist code_tabs container contracts data_table dropdown embed errors example_label fenced figure glossary icon include list_table literalinclude marimo navigation options rubric steps tabs target term terminal tokens utils validator video Caret Right Folder Template Engine asset_url core environment manifest menu url_helpers Caret Right Folder Template Functions advanced_collections advanced_strings autodoc collections content crossref data dates debug files get_page i18n icons images math_functions navigation pagination_helpers seo strings tables taxonomies theme urls Caret Right Folder Server build_handler component_preview constants dev_server live_reload pid_manager reload_controller request_handler request_logger resource_manager utils Caret Right Folder Services validation Caret Right Folder Themes config Caret Right Folder Utils atomic_write autodoc build_context build_stats build_summary cli_output css_minifier dates dotdict error_handlers file_io file_lock hashing incremental_constants js_bundler live_progress logger metadata observability page_initializer pagination path_resolver paths performance_collector performance_report profile progress retry rich_console sections swizzle text theme_registry theme_resolution thread_local traceback_config traceback_renderer url_normalization url_strategy Plugins Directives ᗢ Caret Down Link Copy URL External Open LLM text Copy Copy LLM text Share with AI Ask Claude Ask ChatGPT Ask Gemini Ask Copilot Module rendering.plugins.directives.steps Steps directive for Mistune. Provides visual step-by-step guides using nested directives. Architecture: Migrated to BengalDirective base class with DirectiveContract validation. This demonstrates the contract system for enforcing valid nesting: StepsDirective: requires_children=["step"] StepDirective: requires_parent=["steps"] Syntax (preferred - named closers, no colon counting): :::{steps} :start: 1 :::{step} Step Title :description: Brief context before diving into the step content. :duration: 5 min Step 1 content with **markdown** and nested directives. :::{/step} :::{step} Optional Step :optional: This step can be skipped. :::{/step} :::{/steps} Legacy syntax (fence-depth counting - still works): ::::{steps} :::{step} Step Title Step 1 content ::: :::: Steps Container Options: :class: - Custom CSS class for the steps container :style: - Visual style (default, compact) :start: - Start numbering from this value (default: 1) Step Options: :class: - Custom CSS class for the step :description: - Lead-in text with special typography (rendered before main content) :optional: - Mark step as optional/skippable (adds visual indicator) :duration: - Estimated time for the step (e.g., "5 min", "1 hour") View source 4 Classes 2 Functions Classes StepOptions dataclass Options for step directive. 0 Caret Right Options for step directive. Inherits from DirectiveOptions Attributes Name Type Description css_class str Custom CSS class for the step description str Lead-in text with special typography (rendered before main content) optional bool Mark step as optional/skippable (adds visual indicator) duration str Estimated time for the step (e.g., "5 min", "1 hour") _field_aliases ClassVar[dict[str, str]] StepDirective Individual step directive (nested in steps). Syntax: :::{step} Optional Title :class: cust… 4 Caret Right Individual step directive (nested in steps). Syntax: :::{step} Optional Title :class: custom-class Step content with **markdown** and nested directives. ::: Contract: MUST be nested inside a :::{steps} directive. If used outside steps, a warning is logged. Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] CONTRACT ClassVar[DirectiveContract] DIRECTIVE_NAMES ClassVar[list[str]] Methods 2 parse_directive Build step token from parsed components. Title becomes the step heading, conte… 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: StepOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build step token from parsed components. Title becomes the step heading, content is parsed as markdown. Description (if provided) renders as lead-in text with special typography. Optional and duration add visual indicators. Parameters 5 title str options StepOptions content str children list[Any] state Any Returns DirectiveToken render Render individual step to HTML. Step titles are rendered as headings (h2/h3/h4… 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render individual step to HTML. Step titles are rendered as headings (h2/h3/h4) based on parent level. Step markers are rendered as anchor links for direct navigation. Descriptions are rendered as lead-in text with special typography. Optional steps get a visual indicator. Duration is shown as a time estimate badge. Parameters 2 renderer Any text str Returns str Internal Methods 2 Caret Right _parse_inline_markdown staticmethod Parse inline markdown in step titles. Tries mistune's inline parser first, fal… 2 str Caret Right def _parse_inline_markdown(renderer: Any, text: str) -> str Parse inline markdown in step titles. Tries mistune's inline parser first, falls back to regex. Parameters 2 renderer Any text str Returns str _slugify staticmethod Convert text to URL-safe slug for anchor IDs. Converts to lowercase, replaces … 1 str Caret Right def _slugify(text: str) -> str Convert text to URL-safe slug for anchor IDs. Converts to lowercase, replaces spaces with hyphens, removes non-alphanumeric characters except hyphens. Parameters 1 text str Returns str StepsOptions dataclass Options for steps container directive. 0 Caret Right Options for steps container directive. Inherits from DirectiveOptions Attributes Name Type Description css_class str Custom CSS class for the steps container style str Step style (compact, default) start int Start numbering from this value (default: 1) _field_aliases ClassVar[dict[str, str]] _allowed_values ClassVar[dict[str, list[str]]] StepsDirective Steps directive for visual step-by-step guides. Syntax (preferred - supports nested directives): … 4 Caret Right Steps directive for visual step-by-step guides. Syntax (preferred - supports nested directives): ::::{steps} :class: custom-class :style: compact :::{step} Step 1 Title Step 1 content with nested :::{tip} directives ::: :::{step} Step 2 Title Step 2 content ::: :::: Note: Parent container (steps) uses 4 colons, nested steps use 3 colons. Contract: REQUIRES at least one :::{step} child directive. If no steps found, a warning is logged. Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] CONTRACT ClassVar[DirectiveContract] DIRECTIVE_NAMES ClassVar[list[str]] Methods 2 parse_directive Build steps token from parsed components. Injects heading_level and step_numbe… 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: StepsOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build steps token from parsed components. Injects heading_level and step_number into child step tokens for proper semantic HTML and anchor link support. Parameters 5 title str options StepsOptions content str children list[Any] state Any Returns DirectiveToken render Render steps container to HTML. Wraps step list items in <ol> if present. Supp… 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render steps container to HTML. Wraps step list items in <ol> if present. Supports custom start number for continuing numbered lists. Parameters 2 renderer Any text str Returns str Internal Methods 2 Caret Right _inject_step_metadata Inject heading_level and step_number into step tokens. This allows step titles… 3 list[Any] Caret Right def _inject_step_metadata(self, children: list[Any], heading_level: int, start: int) -> list[Any] Inject heading_level and step_number into step tokens. This allows step titles to render as proper headings (h2/h3/h4) and step markers to be anchor links with the correct number. Parameters 3 children list[Any] heading_level int start int Returns list[Any] _detect_heading_level Detect the current heading level from parser state. Steps should render step t… 1 int Caret Right def _detect_heading_level(self, state: Any) -> int Detect the current heading level from parser state. Steps should render step titles as headings one level deeper than the parent heading (h1 -> h2, h2 -> h3, etc.). Returns the heading level (2-6) that steps should use. Defaults to h2 if no heading context found. Parameters 1 state Any Returns int Functions render_step Legacy render function for backward compatibility. 2 str Caret Right def render_step(renderer: Any, text: str, **attrs: Any) -> str Legacy render function for backward compatibility. Parameters 2 Name Type Default Description renderer Any — text str — Returns str render_steps Legacy render function for backward compatibility. 2 str Caret Right def render_steps(renderer: Any, text: str, **attrs: Any) -> str Legacy render function for backward compatibility. Parameters 2 Name Type Default Description renderer Any — text str — Returns str ← Previous rubric Next → tabs List © 2025 Bengal ᓚᘏᗢ window.BENGAL_LAZY_ASSETS = { tabulator: '/bengal/assets/js/tabulator.min.js', dataTable: '/bengal/assets/js/data-table.js', mermaidToolbar: '/bengal/assets/js/mermaid-toolbar.9de5abba.js', mermaidTheme: '/bengal/assets/js/mermaid-theme.344822c5.js', graphMinimap: '/bengal/assets/js/graph-minimap.cc7e42e3.js', graphContextual: '/bengal/assets/js/graph-contextual.440e59c6.js' }; window.BENGAL_ICONS = { close: '/bengal/assets/icons/close.911d4fe1.svg', enlarge: '/bengal/assets/icons/enlarge.652035e5.svg', copy: '/bengal/assets/icons/copy.3d56e945.svg', 'download-svg': '/bengal/assets/icons/download.04f07e1b.svg', 'download-png': '/bengal/assets/icons/image.c34dfd40.svg', 'zoom-in': '/bengal/assets/icons/zoom-in.237b4a83.svg', 'zoom-out': '/bengal/assets/icons/zoom-out.38857c77.svg', reset: '/bengal/assets/icons/reset.d26dba29.svg' }; Arrow Up X -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 1991 - Reading Time: 10 minutes