# embed URL: /api/rendering/plugins/directives/embed/ Section: directives -------------------------------------------------------------------------------- embed - 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.embed Developer tool embed directives for Bengal. Provides directives for embedding code playgrounds and developer tools: GitHub Gists CodePen CodeSandbox StackBlitz Architecture: All embed directives extend BengalDirective with type-specific validation and rendering for their respective services. Security: All IDs/URLs are validated via regex patterns to prevent XSS and injection. Script-based embeds (Gist) include noscript fallbacks. Accessibility: Title is required for iframe-based embeds to meet WCAG 2.1 AA requirements. Related: bengal/rendering/plugins/directives/base.py: BengalDirective RFC: plan/active/rfc-media-embed-directives.md View source 8 Classes Classes GistOptions dataclass Options for GitHub Gist embed. 0 Caret Right Options for GitHub Gist embed. Inherits from DirectiveOptions Attributes Name Type Description file str Specific file from gist to display css_class str Additional CSS classes _field_aliases ClassVar[dict[str, str]] GistDirective GitHub Gist embed directive. Embeds GitHub Gists using the official script embed method. Includes … 3 Caret Right GitHub Gist embed directive. Embeds GitHub Gists using the official script embed method. Includes noscript fallback with link to gist. Syntax: :::{gist} username/gist_id :file: example.py ::: Options: :file: Specific file from gist to display :class: Additional CSS classes Output: <div class="gist-embed"> <script src="https://gist.github.com/username/gist_id.js?file=example.py"></script> <noscript><p>View gist: <a href="...">username/gist_id</a></p></noscript> </div> Security: Username validated (alphanumeric, underscore, hyphen) Gist ID validated (32 hex characters) File parameter escaped for URL safety Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] DIRECTIVE_NAMES ClassVar[list[str]] ID_PATTERN ClassVar[re.Pattern[str]] Methods 3 validate_source Validate gist reference (username/gist_id). 1 str | None Caret Right def validate_source(self, gist_ref: str) -> str | None Validate gist reference (username/gist_id). Parameters 1 gist_ref str Returns str | None parse_directive Build gist embed token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: GistOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build gist embed token. Parameters 5 title str options GistOptions content str children list[Any] state Any Returns DirectiveToken render Render gist embed to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render gist embed to HTML. Parameters 2 renderer Any text str Returns str CodePenOptions dataclass Options for CodePen embed. 0 Caret Right Options for CodePen embed. Inherits from DirectiveOptions Attributes Name Type Description title str Required - Accessible title for iframe default_tab str Tab to show - html, css, js, result (default: result) height int Height in pixels (default: 300) theme str Color theme - light, dark, or theme ID (default: dark) editable bool Allow editing (default: false) preview bool Show preview on load (default: true) css_class str Additional CSS classes _field_aliases ClassVar[dict[str, str]] _allowed_values ClassVar[dict[str, list[str]]] CodePenDirective CodePen embed directive. Embeds CodePen pens using iframe with customizable display options. Synt… 4 Caret Right CodePen embed directive. Embeds CodePen pens using iframe with customizable display options. Syntax: :::{codepen} username/pen/pen_id :title: Interactive Example :default-tab: result :height: 400 ::: Options: :title: (required) Accessible title for iframe :default-tab: Tab to show - html, css, js, result (default: result) :height: Height in pixels (default: 300) :theme: Color theme - light, dark (default: dark) :editable: Allow editing (default: false) :preview: Show preview on load (default: true) :class: Additional CSS classes Security: Username validated (alphanumeric, underscore, hyphen) Pen ID validated (alphanumeric, underscore, hyphen) Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] DIRECTIVE_NAMES ClassVar[list[str]] ID_PATTERN ClassVar[re.Pattern[str]] Methods 3 validate_source Validate CodePen reference. 1 str | None Caret Right def validate_source(self, pen_ref: str) -> str | None Validate CodePen reference. Parameters 1 pen_ref str Returns str | None parse_directive Build CodePen embed token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: CodePenOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build CodePen embed token. Parameters 5 title str options CodePenOptions content str children list[Any] state Any Returns DirectiveToken render Render CodePen embed to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render CodePen embed to HTML. Parameters 2 renderer Any text str Returns str Internal Methods 1 Caret Right _parse_pen_ref Parse pen reference into (username, pen_id). 1 tuple[str, str] Caret Right def _parse_pen_ref(self, pen_ref: str) -> tuple[str, str] Parse pen reference into (username, pen_id). Parameters 1 pen_ref str Returns tuple[str, str] CodeSandboxOptions dataclass Options for CodeSandbox embed. 0 Caret Right Options for CodeSandbox embed. Inherits from DirectiveOptions Attributes Name Type Description title str Required - Accessible title for iframe module str File to show initially view str Display mode - editor, preview, split (default: split) height int Height in pixels (default: 500) fontsize int Editor font size (default: 14) hidenavigation bool Hide file navigation (default: false) theme str Color theme - light, dark (default: dark) css_class str Additional CSS classes _field_aliases ClassVar[dict[str, str]] _allowed_values ClassVar[dict[str, list[str]]] CodeSandboxDirective CodeSandbox embed directive. Embeds CodeSandbox projects using iframe with customizable display op… 3 Caret Right CodeSandbox embed directive. Embeds CodeSandbox projects using iframe with customizable display options. Syntax: :::{codesandbox} sandbox_id :title: React Example :module: /src/App.js :view: preview ::: Options: :title: (required) Accessible title for iframe :module: File to show initially :view: Display mode - editor, preview, split (default: split) :height: Height in pixels (default: 500) :fontsize: Editor font size (default: 14) :hidenavigation: Hide file navigation (default: false) :theme: Color theme - light, dark (default: dark) :class: Additional CSS classes Security: Sandbox ID validated (alphanumeric, 5+ characters) Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] DIRECTIVE_NAMES ClassVar[list[str]] ID_PATTERN ClassVar[re.Pattern[str]] Methods 3 validate_source Validate CodeSandbox ID. 1 str | None Caret Right def validate_source(self, sandbox_id: str) -> str | None Validate CodeSandbox ID. Parameters 1 sandbox_id str Returns str | None parse_directive Build CodeSandbox embed token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: CodeSandboxOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build CodeSandbox embed token. Parameters 5 title str options CodeSandboxOptions content str children list[Any] state Any Returns DirectiveToken render Render CodeSandbox embed to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render CodeSandbox embed to HTML. Parameters 2 renderer Any text str Returns str StackBlitzOptions dataclass Options for StackBlitz embed. 0 Caret Right Options for StackBlitz embed. Inherits from DirectiveOptions Attributes Name Type Description title str Required - Accessible title for iframe file str File to show initially view str Display mode - editor, preview, both (default: both) height int Height in pixels (default: 500) hidenavigation bool Hide file navigation (default: false) hidedevtools bool Hide dev tools panel (default: false) css_class str Additional CSS classes _field_aliases ClassVar[dict[str, str]] _allowed_values ClassVar[dict[str, list[str]]] StackBlitzDirective StackBlitz embed directive. Embeds StackBlitz projects using iframe with customizable display opti… 3 Caret Right StackBlitz embed directive. Embeds StackBlitz projects using iframe with customizable display options. Syntax: :::{stackblitz} project_id :title: Angular Demo :file: src/app.component.ts :view: preview ::: Options: :title: (required) Accessible title for iframe :file: File to show initially :view: Display mode - editor, preview, both (default: both) :height: Height in pixels (default: 500) :hidenavigation: Hide file navigation (default: false) :hidedevtools: Hide dev tools panel (default: false) :class: Additional CSS classes Security: Project ID validated (alphanumeric, underscore, hyphen) Inherits from BengalDirective Attributes Name Type Description NAMES ClassVar[list[str]] TOKEN_TYPE ClassVar[str] OPTIONS_CLASS ClassVar[type[DirectiveOptions]] DIRECTIVE_NAMES ClassVar[list[str]] ID_PATTERN ClassVar[re.Pattern[str]] Methods 3 validate_source Validate StackBlitz project ID. 1 str | None Caret Right def validate_source(self, project_id: str) -> str | None Validate StackBlitz project ID. Parameters 1 project_id str Returns str | None parse_directive Build StackBlitz embed token. 5 DirectiveToken Caret Right def parse_directive(self, title: str, options: StackBlitzOptions, content: str, children: list[Any], state: Any) -> DirectiveToken Build StackBlitz embed token. Parameters 5 title str options StackBlitzOptions content str children list[Any] state Any Returns DirectiveToken render Render StackBlitz embed to HTML. 2 str Caret Right def render(self, renderer: Any, text: str, **attrs: Any) -> str Render StackBlitz embed to HTML. Parameters 2 renderer Any text str Returns str ← Previous dropdown Next → errors 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: 2181 - Reading Time: 11 minutes