hexo-plugin-live-code

这是一个 Hexo 插件，允许你在博客文章中嵌入可交互、可运行的 Python 代码块。

它利用 Thebe 和 MyBinder 将静态的代码块转换为由 Jupyter
内核支持的实时单元格。

$3

* 零布局抖动：初始加载时，代码块作为静态 HTML 渲染（利用 Hexo 原生的语法高亮），不影响 SEO 和页面加载速度。
* 按需加载：只有当用户点击“运行”按钮时，才会加载庞大的 JS 库并连接到 Binder 内核。
* 无缝切换：点击运行后，静态视图自动转换为交互式编辑器。
* 高度可配：支持自定义 Binder 仓库、分支和 UI 选择器。

$3

在你的 Hexo 博客根目录下运行：

``bash
npm install hexo-plugin-python3-live-code --save


或者，如果您是把文件直接放在 scripts 文件夹中，则无需安装，确保依赖 hexo-util 存在即可


`

$3

在站点的 _config.yml 文件中添加以下配置：

`yaml
live_code:
enable: true # 必须开启
# 你的 Binder 运行环境仓库 (必须包含 requirements.txt 或 environment.yml)
# 格式: "github-username/repo-name"
binderRepo: "wuhunyu/blog-python-runtime"
binderRef: "main" # 分支名称

# Thebe 配置 (通常不需要修改)
selector: ".live-code-cell"
thebeCDN: "https://unpkg.com/thebe@latest/lib/index.js"
`

$3

在 Markdown 文章中，使用 live_py 标签包裹你的 Python 代码：

基本用法：

`markdown
{% live_py "python3" %}
print("Hello Hexo!")
a = 10
b = 20
print(f"Result is {a + b}")
{% endlive_py %}
`

带标题用法：

`markdown
{% live_py "计算斐波那契数列" %}
def fib(n):
if n <= 1: return n
return fib(n-1) + fib(n-2)

print(fib(10))
{% endlive_py %}
`

$3

1. 运行环境：你需要一个包含 Python 环境定义的 GitHub 仓库（即 binderRepo 配置项）。该仓库根目录需要有
requirements.txt 或 environment.yml`。
2. 启动时间：如果是第一次连接或环境已休眠，Binder 可能需要几十秒来启动容器。插件会在按钮上显示加载动画。
3. 样式：插件会尽可能继承 Hexo 主题的高亮样式，但交互式区域（Jupyter 单元格）的样式主要由 Thebe 控制。