2026/9/14 2:34:40
FEATURED · 精选文章 
如何用 marimo islands 把交互式笔记本内容嵌入静态网页【免费下载链接】marimoA reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. Stored as pure Python. All in a modern, AI-native editor.项目地址: https://gitcode.com/GitHub_Trending/ma/marimo你已有的静态页面博客、教程、课程站点想放进 marimo 笔记本里的单元格输出并且希望读者打开页面后这些内容可以交互而不是截图或死板的 HTML。marimo 的 islands 功能就是为此设计的把 marimo 的输出和/或 Python 代码以自定义 HTML 标签的形式嵌入你的页面页面加载后由 marimo 的响应式运行时接管内容变为可交互发布指南 将其列为自托管场景下“把单个单元格输出直接嵌入 HTML 页面”的选项。注意文档标注islands 仍是早期功能API 预计不会变但在被认定为稳定前可能还有改进。islands 与常见的 iframe 嵌入不同没有顶层 app运行时拿不到父页面的 HTML只在你用 marimo 自定义标签标出的“岛”上初始化见 frontend/islands/development.md。文档也提示这是一个面向集成的高级构建块适合接到静态站点生成器或文档工具里。主路径从代码块生成 island HTMLdocs/guides/exporting/webassembly_html.md 给出的核心做法是用MarimoIslandGenerator逐块添加代码、构建应用、再把渲染出的 HTML 拼进页面。文档示例import asyncio import sys from marimo import MarimoIslandGenerator if sys.platform win32: asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy()) async def main(): generator MarimoIslandGenerator() block1 generator.add_code(import marimo as mo) block2 generator.add_code(mo.md(Hello, islands!) )) # Build the app app await generator.build() # Render the app output f html head {generator.render_head()} /head body {block1.render(display_outputFalse)} {block2.render()} /body /html print(output) # Save the HTML to a file output_file output.html with open(output_file, w, encodingutf-8) as f: f.write(output) if __name__ __main__: asyncio.run(main())上例按文档整理block2的代码以文档为准应为mo.md(Hello, islands!)这里保留文档原文结构。执行时要理解几个关键点add_code每个代码块调用一次返回一个可render()的 stub。build()会在本地 marimo 会话中运行这些代码拿到真实输出文档源码明确说明build()只能调用一次marimo/_islands/_island_generator.py。render_head()生成放进head的 JS/CSS 引用默认使用当前安装的 marimo 版本version_override参数可指定其他版本它包含marimo-team/islands的main.js和style.cssjsDelivr CDN、Google Fonts 预连接与 KaTeX 样式这些都由render_head()自动生成不需要手写。第一块是 import没有展示价值所以用block1.render(display_outputFalse)只保留代码第二块正常render()输出和隐藏代码一起渲染。add_code还支持display_code是否在 HTML 中展示代码、display_output、is_reactive该块是否通过 pyodide 在浏览器里运行等参数默认值见源码 docstring。生成的output.html就是一份可以直接放进静态站点的完整页面。替代路径从已有的 marimo .py 笔记本生成如果你已经有一个 marimo 笔记本文件marimo 笔记本本身就是纯 Python 文件可以用from_file直接生成from marimo import MarimoIslandGenerator # Create the generator from file generator MarimoIslandGenerator.from_file(./notebook-name.py, display_codeFalse) # Generate and print the HTML without building # This will still work for basic rendering, though without running the cells html generator.render_html(include_init_islandFalse) print(html) # Save the HTML to a file output_file output.html with open(output_file, w, encodingutf-8) as f: f.write(html)./notebook-name.py是文档中的占位符替换成你的 marimo 笔记本文件路径即可。这条路径有一个明确的限制文档原话不经过build()的渲染是 basic rendering单元格不会真正执行。也就是说如果需要真实运行结果走上一条含await generator.build()的路径如果只需要静态渲染结构from_filerender_html更省事。render_html/render_body还有几个影响产物的开关include_init_island默认True在内容前加一个显示 “Initializing...” 的加载器Pyodide 加载完成、内核就绪后消失。include_payload默认False在 body 末尾追加一段 JSON payload 脚本标签供 islands 运行时用来水合hydrate页面。max_width/margin/style控制 body 包裹容器的 CSSstyle会覆盖前两者。生成的 HTML 长什么样无论哪条路径产物结构一致head里是 marimo JS/CSS 与字体引用body里是用自定义标签定义的岛屿。文档给出的模板其中version需替换为实际版本与render_head()自动填充的版本保持一致head !-- marimo js/ccs -- script typemodule srchttps://cdn.jsdelivr.net/npm/marimo-team/islandsversion/dist/main.js/script link hrefhttps://cdn.jsdelivr.net/npm/marimo-team/islandsversion/dist/style.css relstylesheet crossoriginanonymous / !-- fonts -- link relpreconnect hrefhttps://fonts.googleapis.com / link relpreconnect hrefhttps://fonts.gstatic.com crossorigin / link hrefhttps://fonts.googleapis.com/css2?familyFiraMono:wght400;500;700amp;familyLoraamp;familyPTSans:wght400;700amp;displayswap relstylesheet / link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.16.10/dist/katex.min.css integritysha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYbTwlBVMrlgLqwRjRtGZiK7ww crossoriginanonymous / /head body marimo-island>script typeapplication/vnd.marimo.islandsjson{schemaVersion:1,appId:main,cells:[{cellId:cell-1,code:mo.md(Hello, islands!),outputHtml:\u003cspan\u003eHello, islands!\u003c/span\u003e,outputMimetype:text/markdown,reactive:true,displayCode:false,displayOutput:true}]}/scriptpayload 保存了每个单元格的代码、渲染后的输出 HTML、输出 MIME 类型和显示设置DOM 提供可见的岛屿槽位payload 提供运行时代码与元数据。文档特别强调如果你要后处理 island HTML必须原样保留这个typeapplication/vnd.marimo.islandsjson的 script 标签及其内容否则会破坏运行时水合。验证与限制成功判据来自文档站自带的 islands 示例页docs/guides/island_example.md页面打开时先展示预渲染输出marimo 运行时初始化完成后“内容变为可交互”示例页中一个mo.ui.slider拖动后下方 Markdown 会跟着变化。include_init_islandTrue时还会先看到 “Initializing...” 加载器内核就绪后消失。可以拿这份示例页对照你生成页面的行为。版本一致性手动维护 head 模板时version要与生成端一致用render_head()输出则版本自动跟随安装的 marimoversion_override可覆盖文档示例页固定用的是0.5.0。稳定性文档两处标注 islands 是 early feature、尚未稳定API 预计不变但仍有改进计划。from_file路径的渲染不执行单元格只适合 basic rendering需要真实输出时用build()路径。生成 HTML 后如需本地联调仓库内 frontend/islands/development.md 描述了pnpm dev:islands的本地开发/生产生成流程面向 marimo 前端开发者。如果你的目标平台是 Jupyter Book文档给出了现成的集成方式jupyter-book-marimo插件会把 MyST 的{marimo}指令渲染为 hydrated marimo islands见 docs/guides/exporting/jupyter_book.md不必手写上面这套 HTML 拼装逻辑。【免费下载链接】marimoA reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. Stored as pure Python. All in a modern, AI-native editor.项目地址: https://gitcode.com/GitHub_Trending/ma/marimo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何用 marimo islands 把交互式笔记本内容嵌入静态网页？
如何用 marimo islands 把交互式笔记本内容嵌入静态网页【免费下载链接】marimoA reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. Stored as pure Python. All in a modern, AI-native editor.项目地址: https://gitcode.com/GitHub_Trending/ma/marimo你已有的静态页面博客、教程、课程站点想放进 marimo 笔记本里的单元格输出并且希望读者打开页面后这些内容可以交互而不是截图或死板的 HTML。marimo 的 islands 功能就是为此设计的把 marimo 的输出和/或 Python 代码以自定义 HTML 标签的形式嵌入你的页面页面加载后由 marimo 的响应式运行时接管内容变为可交互发布指南 将其列为自托管场景下“把单个单元格输出直接嵌入 HTML 页面”的选项。注意文档标注islands 仍是早期功能API 预计不会变但在被认定为稳定前可能还有改进。islands 与常见的 iframe 嵌入不同没有顶层 app运行时拿不到父页面的 HTML只在你用 marimo 自定义标签标出的“岛”上初始化见 frontend/islands/development.md。文档也提示这是一个面向集成的高级构建块适合接到静态站点生成器或文档工具里。主路径从代码块生成 island HTMLdocs/guides/exporting/webassembly_html.md 给出的核心做法是用MarimoIslandGenerator逐块添加代码、构建应用、再把渲染出的 HTML 拼进页面。文档示例import asyncio import sys from marimo import MarimoIslandGenerator if sys.platform win32: asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy()) async def main(): generator MarimoIslandGenerator() block1 generator.add_code(import marimo as mo) block2 generator.add_code(mo.md(Hello, islands!) )) # Build the app app await generator.build() # Render the app output f html head {generator.render_head()} /head body {block1.render(display_outputFalse)} {block2.render()} /body /html print(output) # Save the HTML to a file output_file output.html with open(output_file, w, encodingutf-8) as f: f.write(output) if __name__ __main__: asyncio.run(main())上例按文档整理block2的代码以文档为准应为mo.md(Hello, islands!)这里保留文档原文结构。执行时要理解几个关键点add_code每个代码块调用一次返回一个可render()的 stub。build()会在本地 marimo 会话中运行这些代码拿到真实输出文档源码明确说明build()只能调用一次marimo/_islands/_island_generator.py。render_head()生成放进head的 JS/CSS 引用默认使用当前安装的 marimo 版本version_override参数可指定其他版本它包含marimo-team/islands的main.js和style.cssjsDelivr CDN、Google Fonts 预连接与 KaTeX 样式这些都由render_head()自动生成不需要手写。第一块是 import没有展示价值所以用block1.render(display_outputFalse)只保留代码第二块正常render()输出和隐藏代码一起渲染。add_code还支持display_code是否在 HTML 中展示代码、display_output、is_reactive该块是否通过 pyodide 在浏览器里运行等参数默认值见源码 docstring。生成的output.html就是一份可以直接放进静态站点的完整页面。替代路径从已有的 marimo .py 笔记本生成如果你已经有一个 marimo 笔记本文件marimo 笔记本本身就是纯 Python 文件可以用from_file直接生成from marimo import MarimoIslandGenerator # Create the generator from file generator MarimoIslandGenerator.from_file(./notebook-name.py, display_codeFalse) # Generate and print the HTML without building # This will still work for basic rendering, though without running the cells html generator.render_html(include_init_islandFalse) print(html) # Save the HTML to a file output_file output.html with open(output_file, w, encodingutf-8) as f: f.write(html)./notebook-name.py是文档中的占位符替换成你的 marimo 笔记本文件路径即可。这条路径有一个明确的限制文档原话不经过build()的渲染是 basic rendering单元格不会真正执行。也就是说如果需要真实运行结果走上一条含await generator.build()的路径如果只需要静态渲染结构from_filerender_html更省事。render_html/render_body还有几个影响产物的开关include_init_island默认True在内容前加一个显示 “Initializing...” 的加载器Pyodide 加载完成、内核就绪后消失。include_payload默认False在 body 末尾追加一段 JSON payload 脚本标签供 islands 运行时用来水合hydrate页面。max_width/margin/style控制 body 包裹容器的 CSSstyle会覆盖前两者。生成的 HTML 长什么样无论哪条路径产物结构一致head里是 marimo JS/CSS 与字体引用body里是用自定义标签定义的岛屿。文档给出的模板其中version需替换为实际版本与render_head()自动填充的版本保持一致head !-- marimo js/ccs -- script typemodule srchttps://cdn.jsdelivr.net/npm/marimo-team/islandsversion/dist/main.js/script link hrefhttps://cdn.jsdelivr.net/npm/marimo-team/islandsversion/dist/style.css relstylesheet crossoriginanonymous / !-- fonts -- link relpreconnect hrefhttps://fonts.googleapis.com / link relpreconnect hrefhttps://fonts.gstatic.com crossorigin / link hrefhttps://fonts.googleapis.com/css2?familyFiraMono:wght400;500;700amp;familyLoraamp;familyPTSans:wght400;700amp;displayswap relstylesheet / link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/katex0.16.10/dist/katex.min.css integritysha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYbTwlBVMrlgLqwRjRtGZiK7ww crossoriginanonymous / /head body marimo-island>script typeapplication/vnd.marimo.islandsjson{schemaVersion:1,appId:main,cells:[{cellId:cell-1,code:mo.md(Hello, islands!),outputHtml:\u003cspan\u003eHello, islands!\u003c/span\u003e,outputMimetype:text/markdown,reactive:true,displayCode:false,displayOutput:true}]}/scriptpayload 保存了每个单元格的代码、渲染后的输出 HTML、输出 MIME 类型和显示设置DOM 提供可见的岛屿槽位payload 提供运行时代码与元数据。文档特别强调如果你要后处理 island HTML必须原样保留这个typeapplication/vnd.marimo.islandsjson的 script 标签及其内容否则会破坏运行时水合。验证与限制成功判据来自文档站自带的 islands 示例页docs/guides/island_example.md页面打开时先展示预渲染输出marimo 运行时初始化完成后“内容变为可交互”示例页中一个mo.ui.slider拖动后下方 Markdown 会跟着变化。include_init_islandTrue时还会先看到 “Initializing...” 加载器内核就绪后消失。可以拿这份示例页对照你生成页面的行为。版本一致性手动维护 head 模板时version要与生成端一致用render_head()输出则版本自动跟随安装的 marimoversion_override可覆盖文档示例页固定用的是0.5.0。稳定性文档两处标注 islands 是 early feature、尚未稳定API 预计不变但仍有改进计划。from_file路径的渲染不执行单元格只适合 basic rendering需要真实输出时用build()路径。生成 HTML 后如需本地联调仓库内 frontend/islands/development.md 描述了pnpm dev:islands的本地开发/生产生成流程面向 marimo 前端开发者。如果你的目标平台是 Jupyter Book文档给出了现成的集成方式jupyter-book-marimo插件会把 MyST 的{marimo}指令渲染为 hydrated marimo islands见 docs/guides/exporting/jupyter_book.md不必手写上面这套 HTML 拼装逻辑。【免费下载链接】marimoA reactive notebook for Python — run reproducible experiments, query with SQL, execute as a script, deploy as an app, and version with git. Stored as pure Python. All in a modern, AI-native editor.项目地址: https://gitcode.com/GitHub_Trending/ma/marimo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
