ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

如何用 markmap-cli 玩转离线模式、watch热更新与输出选项:一份完整实战清单

如何用 markmap-cli 玩转离线模式、watch热更新与输出选项:一份完整实战清单 如何用 markmap-cli 玩转离线模式、watch热更新与输出选项一份完整实战清单【免费下载链接】markmapBuild mindmaps with plain text项目地址: https://gitcode.com/gh_mirrors/ma/markmapmarkmap-cli 是把 Markdown 直接转成交互式思维导图 HTML 的命令行工具属于 markmap用纯文本构建脑图项目的核心包之一。本文带你完整掌握它的离线模式--offline、watch 热更新和全部输出选项几行命令就能把文档变成可折叠、可分享的脑图。30秒上手一条命令生成思维导图安装后要求 Node.js ≥ 18见 package.json在任意 Markdown 文件上执行markmap docs/notes.md默认行为有三个输出文件为去掉原扩展名的.html如notes.md→notes.html生成后自动用浏览器打开结果页页面右下角自带工具栏缩放、折叠等操作想自定义输出位置用-o参数markmap notes.md -o ./output/my-mindmap.html选项在 cli.ts 中定义转换核心逻辑见 index.ts。markmap-cli 输出选项完整清单选项说明适用场景input输入的 Markdown 文件必填参数一切场景-o, --output file指定输出 HTML 文件名默认与输入同名.html需要固定产物路径时--no-open生成后不自动打开浏览器脚本化、CI 构建--no-toolbar隐藏页面工具栏嵌入其他页面、追求极简--offline内联全部 JS/CSS 资源HTML 断网可用内网、飞机上、交付给他人-w, --watch监听输入文件修改即热更新边写文档边看脑图--port port指定 watch 模式开发服务器的端口端口冲突时 小提示--offline与-w可以组合使用例如离线开发场景。离线模式 --offline断网也能打开的脑图默认生成的 HTML 从 CDN 加载 markmap 的运行时代码打开页面需要联网。加上--offline后工具会把所有 JS 依赖指向本地资源local provider执行inlineAssets内联将脚本和样式全部打包进单个 HTML 文件markmap notes.md --offline得到的 HTML 是自包含的拷到任何机器、甚至离线环境都能直接双击打开非常适合做演示、内网分发。相关实现在 index.ts 的 inlineAssets。⚠️ 注意--offline生成的文件会比默认版本大不少资源都内联了日常本机使用不必强开。watch 热更新边写 Markdown 边看脑图-w是 markmap-cli 最有意思的功能它会启动一个本地开发服务器实时监听你的 Markdown 文件保存即刷新无需重新执行命令。markmap notes.md -w执行后终端会打印监听地址形如http://localhost:5173/?keyxxxfilenamenotes.md并自动打开浏览器。原理见 dev-server.ts基于chokidar监听文件变化前端轮询/~data接口拉取最新内容并增量重绘支持光标同步编辑器里移动光标对应脑图节点会高亮方便定位端口冲突时可指定markmap notes.md -w --port 3000两个实用细节官方提示 watch 模式面向开发场景生产交付请用一次性生成watch 模式默认强制启用离线内联见 cli.ts保证开发服务器不依赖外网 CDN实用组合示例按场景抄作业日常写文档边写边看markmap notes.md -w生成可分享的自包含 HTML带工具栏markmap notes.md -o mindmap.html --offline脚本里静默生成、不带工具栏用于嵌入自己的页面markmap notes.md -o out.html --offline --no-open --no-toolbar常见问题速答Q为什么 watch 模式不是直接更新 HTML 文件因为热更新走的是本地服务器推送数据效率更高、还能同步光标位置它只在开发时存在最终产物仍建议用普通模式生成。Q输出文件名能指定吗能-o指定任意路径不指定时默认与输入文件同目录同名。Q生成的页面工具栏能关吗能加--no-toolbar即可页面会干净很多。相关模块位置命令行入口与选项定义packages/markmap-cli/src/cli.ts转换与离线内联核心packages/markmap-cli/src/index.tswatch 开发服务器实现packages/markmap-cli/src/util/dev-server.ts本地资源 Providerpackages/markmap-cli/src/util/common.tsCLI 使用文档入口packages/markmap-cli/README.md掌握以上选项markmap-cli 就能覆盖从随手看一眼到离线交付的全部场景。动手转换一份你自己的 Markdown 吧脑图比文字更直观【免费下载链接】markmapBuild mindmaps with plain text项目地址: https://gitcode.com/gh_mirrors/ma/markmap创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表