Embedding Supporting Content

Use include-iframe plugin to embed HTML content that supports your documentation. Some examples:generated React JS index.html with components that get rendered based on url anchor custom plot functions markdown :include-iframe: iframe/custom.html { fit: true } Note: Use fit parameter to automatically set the height of the iframe to fit its content <html lang="en"> <head> <style> :root { --backgroundColor: #eee; --color: #222; } body { margin: 0 } .content { background-color: var(--backgroundColor); border: 2px solid #555; color: var(--color); font-size: 20px; padding: 16px; } </style> <title>generated content</title> </head> <body> <div class="content">Custom content</div> </body> </html> Only iframe/custom.html will be automatically copied to the deploy destination during documentation build step. If you need other supporting files you need to use deployment/additional-files upload.txt

Properties Override

Use light and dark to override CSS properties inside iframe content for light and dark modes respectively. Switch mode now to see the effect. markdown :include-iframe: iframe/custom.html { fit: true, light: { "--color": "#333", "--backgroundColor": "#eee" }, dark: { "--color": "#eee", "--backgroundColor": "#333" }, }

Title

Use title parameter to display title bar on top of the embedded content: markdown :include-iframe: iframe/custom.html { title: "rendered example", light: { "--color": "#333", "--backgroundColor": "#eee" }, dark: { "--color": "#eee", "--backgroundColor": "#333" }, fit: true }

Embedding Video

Use include-iframe to embed media from other places. By default, aspect ratio is set to 16:9 . :include-iframe: https://www.youtube.com/embed/tgbNymZ7vqY

Aspect Ratio

Use aspectRatio to change aspect ratio of the embedded content :include-iframe: https://www.youtube.com/embed/tgbNymZ7vqY {aspectRatio: "4:3"}