Embedding Supporting Content
Use 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 Note: Use parameter to automatically set the height of the iframe to fit its content Only will be automatically copied to the deploy destination during documentation build step. If you need other supporting files you need to use upload.txt iframe/custom.html include-iframe :include-iframe: iframe/custom.html { fit: true } fit <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>
Use and to override CSS properties inside iframe content for light and dark modes respectively. Switch mode now to see the effect. light dark :include-iframe: iframe/custom.html { fit: true, light: { "--color": "#333", "--backgroundColor": "#eee" }, dark: { "--color": "#eee", "--backgroundColor": "#333" }, }
Use parameter to display title bar on top of the embedded content: title :include-iframe: iframe/custom.html { title: "rendered example", light: { "--color": "#333", "--backgroundColor": "#eee" }, dark: { "--color": "#eee", "--backgroundColor": "#333" }, fit: true }
When iframe content changes after page load, the iframe automatically resizes to fit. Click buttons below to see it in action: Use and to limit the height when content grows: height maxHeight :include-iframe: iframe/custom-delayed.html { fit: true, height: 120, maxHeight: 200 }
Use to take all the available horizontal space: wide :include-iframe: iframe/custom.html { title: "my wide iframe content", fit: true, wide: true }
Use to add a full-screen zoom button to the title bar. Clicking the button opens the iframe in a full-screen overlay with a close button. Press or click the close button to exit. Use to add an open-in-new-tab button to the title bar. Note: Requires to be set. zoomEnabled Escape newTabEnabled title :include-iframe: iframe/custom-multi-line.html { title: "parameters reference", fit: true, maxHeight: 120, zoomEnabled: true, newTabEnabled: true }
Use to make iframe collapsible. Note: Requires to be set. collapsed: true|false title :include-iframe: iframe/custom.html { title: "collapsible content", fit: true, collapsed: true }
Use to remove top/bottom margins when there are multiple iframes in a row. Use to add a delimiter between them: noGap: true noGapBorder: true :include-iframe: iframe/custom.html { title: "part one", fit: true, noGap: true, noGapBorder: true } :include-iframe: iframe/custom.html { title: "part two", fit: true }
Use to embed media from other places. By default, aspect ratio is set to . include-iframe 16:9 :include-iframe: https://www.youtube.com/embed/tgbNymZ7vqY { title: "sample video", newTabEnabled: true }
Use to change aspect ratio of the embedded content aspectRatio :include-iframe: https://www.youtube.com/embed/tgbNymZ7vqY {aspectRatio: "4:3"}