一个可直接在 Docsify 中使用的代码执行可视化插件，基于 Python Tutor 实现，支持在 Markdown 中把 Python 和 Java 代码块自动渲染为可交互的可视化面板。
- 支持
python代码块可视化交互展示 - 支持
java代码块可视化交互展示 - 支持
pytutor作为 Python 简写 - 自动注入样式，无需手动编写大段 CSS
- 自带“复制代码”按钮
- 支持通过
window.$docsify.pytutor进行简单配置 - 支持本地引用
- 支持通过 GitHub + jsDelivr CDN 直接引用
- 内置
compact / comfortable / tall三档舒适视图 - 支持一键“展开查看”，适合长代码和复杂对象场景
- 窄屏下可自动切换为纵向布局，减少对象区被压缩
- 支持右下角拖拽角手动调整可视化面板高度
- 自动去除代码块的公共前导缩进，降低 Markdown 缩进带来的报错概率
- 自动识别每个代码块的真实执行步数，支持“开始 / 暂停”自动播放
下面这一段会被插件直接渲染成可交互面板，不会显示原始 Markdown 围栏。
```pytutorword = "level"counts = {}for ch in word: counts[ch] = counts.get(ch, 0) + 1print(counts)```
```pytutor-javapublic class Main { public static void main(String[] args) { int[] nums = {7, 3, 9, 5}; int best = nums[0]; for (int i = 1; i < nums.length; i++) { if (nums[i] > best) { best = nums[i]; } } System.out.println(best); }}```
https://github.com/sherlockmen/docsify-pytutor
在docsify的index.html文件中引用以下CDN地址
<scriptsrc="https://cdn.jsdelivr.net/gh/sherlockmen/docsify-pytutor@v2.0.1/dist/docsify-pytutor.js"></script>将插件文件下载到项目中后，本地引入：
<scriptsrc="./dist/docsify-pytutor.js"></script>在 Docsify 的 index.html 中进行如下配置：
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8" /><title>Docsify PyTutor Demo</title><metaname="viewport" content="width=device-width, initial-scale=1.0" /><linkrel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css" /></head><body><divid="app"></div><script>window.$docsify={name: 'Docsify PyTutor Demo',loadSidebar: false,subMaxLevel: 2,pytutor: {autoplayInterval: 900}};</script><scriptsrc="//cdn.jsdelivr.net/npm/docsify@4"></script><scriptsrc="https://cdn.jsdelivr.net/gh/sherlockmen/docsify-pytutor@v1.0.1/dist/docsify-pytutor.js"></script></body></html>```pytutor-pythonscores = [76, 88, 91, 64]best = scores[0]for score in scores[1:]: if score > best: best = scoreprint(best)``````pytutorword = "hello"counts = {}for ch in word: counts[ch] = counts.get(ch, 0) + 1print(counts)``````pytutor-javapublic class Main { public static void main(String[] args) { int n = 5; int factorial = 1; while (n > 1) { factorial *= n; n--; } System.out.println(factorial); }}```常用场景下通常只需要这 3 个配置项：
window.$docsify={pytutor: {heightPreset: 'comfortable',showExpandButton: true,autoplayInterval: 900}}| 参数 | 说明 | 默认值 |
|---|---|---|
heightPreset | 舒适视图档位，支持 compact / comfortable / tall | comfortable |
showExpandButton | 是否显示展开查看按钮 | true |
autoplayInterval | 自动播放步进间隔，单位毫秒 | 900 |
如果你需要限制面板最大宽度，还可以额外设置：
window.$docsify={pytutor: {maxWidth: '1080px'}}MIT