{"id":48660368,"url":"https://github.com/sherlockmen/docsify-pytutor","last_synced_at":"2026-04-26T05:00:36.044Z","repository":{"id":349742102,"uuid":"1203661822","full_name":"sherlockmen/docsify-pytutor","owner":"sherlockmen","description":"一个可以实现代码执行可视化的docsify插件","archived":false,"fork":false,"pushed_at":"2026-04-07T10:12:52.000Z","size":83,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-07T11:32:33.244Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sherlockmen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-07T08:48:30.000Z","updated_at":"2026-04-07T10:12:56.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sherlockmen/docsify-pytutor","commit_stats":null,"previous_names":["sherlockmen/docsify-pytutor"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sherlockmen/docsify-pytutor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherlockmen%2Fdocsify-pytutor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherlockmen%2Fdocsify-pytutor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherlockmen%2Fdocsify-pytutor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherlockmen%2Fdocsify-pytutor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sherlockmen","download_url":"https://codeload.github.com/sherlockmen/docsify-pytutor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherlockmen%2Fdocsify-pytutor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32286271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"online","status_checked_at":"2026-04-26T02:00:05.962Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-10T10:00:32.623Z","updated_at":"2026-04-26T05:00:36.037Z","avatar_url":"https://github.com/sherlockmen.png","language":null,"readme":"# docsify-pytutor\n\n一个可直接在 **Docsify** 中使用的代码执行可视化插件，基于 **Python Tutor** 实现，支持在 Markdown 中把 `Python` 和 `Java` 代码块自动渲染为可交互的可视化面板。\n\n---\n\n## 功能特性\n\n- 支持 `python` 代码块可视化交互展示\n- 支持 `java` 代码块可视化交互展示\n- 支持 `pytutor` 作为 Python 简写\n- 自动注入样式，无需手动编写大段 CSS\n- 自带“复制代码”按钮\n- 支持通过 `window.$docsify.pytutor` 进行简单配置\n- 支持本地引用\n- 支持通过 **GitHub + jsDelivr CDN** 直接引用\n- 内置 `compact / comfortable / tall` 三档舒适视图\n- 支持一键“展开查看”，适合长代码和复杂对象场景\n- 窄屏下可自动切换为纵向布局，减少对象区被压缩\n- 支持右下角拖拽角手动调整可视化面板高度\n- 自动去除代码块的公共前导缩进，降低 Markdown 缩进带来的报错概率\n- 自动识别每个代码块的真实执行步数，支持“开始 / 暂停”自动播放\n\n---\n\n## 效果预览\n\n下面这一段会被插件直接渲染成可交互面板，不会显示原始 Markdown 围栏。\n\n### Python 直接渲染预览\n````md\n```pytutor\nword = \"level\"\ncounts = {}\n\nfor ch in word:\n    counts[ch] = counts.get(ch, 0) + 1\n\nprint(counts)\n```\n````\n\n\n#### Python 步骤执行动图\n![python-step](./images/python-step.gif)\n#### Python 自动执行动图\n![python-auto](./images/python-auto.gif)\n\n### Java 直接渲染预览\n\n````md\n```pytutor-java\npublic class Main {\n    public static void main(String[] args) {\n        int[] nums = {7, 3, 9, 5};\n        int best = nums[0];\n\n        for (int i = 1; i \u003c nums.length; i++) {\n            if (nums[i] \u003e best) {\n                best = nums[i];\n            }\n        }\n\n        System.out.println(best);\n    }\n}\n```\n````\n\n#### Java 步骤执行动图\n![python-step](./images/java-step.gif)\n#### Java 自动执行动图\n![python-auto](./images/java-auto.gif)\n\n---\n\n## 仓库地址\n\n```text\nhttps://github.com/sherlockmen/docsify-pytutor\n```\n\n---\n\n## 安装方式\n\n### 方式一：通过 CDN 引用（推荐）\n\n在`docsify`的`index.html`文件中引用以下CDN地址\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/sherlockmen/docsify-pytutor@v2.0.1/dist/docsify-pytutor.js\"\u003e\u003c/script\u003e\n```\n\n### 方式二：本地引用\n\n将插件文件下载到项目中后，本地引入：\n\n```html\n\u003cscript src=\"./dist/docsify-pytutor.js\"\u003e\u003c/script\u003e\n```\n---\n\n## 快速开始\n\n在 Docsify 的 `index.html` 中进行如下配置：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-CN\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\" /\u003e\n  \u003ctitle\u003eDocsify PyTutor Demo\u003c/title\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n  \u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n  \u003cscript\u003e\n    window.$docsify = {\n      name: 'Docsify PyTutor Demo',\n      loadSidebar: false,\n      subMaxLevel: 2,\n      pytutor: {\n        autoplayInterval: 900\n      }\n    };\n  \u003c/script\u003e\n\n  \u003cscript src=\"//cdn.jsdelivr.net/npm/docsify@4\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/sherlockmen/docsify-pytutor@v1.0.1/dist/docsify-pytutor.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n## Markdown 原始写法示例\n\n### Python\n\n````md\n```pytutor-python\nscores = [76, 88, 91, 64]\nbest = scores[0]\n\nfor score in scores[1:]:\n    if score \u003e best:\n        best = score\n\nprint(best)\n```\n````\n\n### Python 简写\n\n````md\n```pytutor\nword = \"hello\"\ncounts = {}\n\nfor ch in word:\n    counts[ch] = counts.get(ch, 0) + 1\n\nprint(counts)\n```\n````\n\n### Java\n\n````md\n```pytutor-java\npublic class Main {\n    public static void main(String[] args) {\n        int n = 5;\n        int factorial = 1;\n\n        while (n \u003e 1) {\n            factorial *= n;\n            n--;\n        }\n\n        System.out.println(factorial);\n    }\n}\n```\n````\n\n---\n\n## 配置项说明\n\n常用场景下通常只需要这 3 个配置项：\n\n```js\nwindow.$docsify = {\n  pytutor: {\n    heightPreset: 'comfortable',\n    showExpandButton: true,\n    autoplayInterval: 900\n  }\n}\n```\n\n| 参数 | 说明 | 默认值 |\n|------|------|--------|\n| `heightPreset` | 舒适视图档位，支持 `compact / comfortable / tall` | `comfortable` |\n| `showExpandButton` | 是否显示展开查看按钮 | `true` |\n| `autoplayInterval` | 自动播放步进间隔，单位毫秒 | `900` |\n\n如果你需要限制面板最大宽度，还可以额外设置：\n\n```js\nwindow.$docsify = {\n  pytutor: {\n    maxWidth: '1080px'\n  }\n}\n```\n\n---\n\n## License\n\nMIT\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherlockmen%2Fdocsify-pytutor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsherlockmen%2Fdocsify-pytutor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherlockmen%2Fdocsify-pytutor/lists"}