hexo-plugin-live-code

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

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

✨ 特性

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

📦 安装

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

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

⚙️ 配置

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

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"

📝 使用方法

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

基本用法：

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

带标题用法：

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

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

⚠️ 注意事项

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