拓十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

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

用 Claude Code + GLM 两天做出自定义样式 MD 转 PDF 工具:TaoToken 统一 Key 配置与 MCP 接入全记录

用 Claude Code + GLM 两天做出自定义样式 MD 转 PDF 工具:TaoToken 统一 Key 配置与 MCP 接入全记录 1. 从 Markdown 到 PDF为什么我非要自己造一个工具写技术文档、整理小说稿、做项目周报Markdown 几乎是我唯一会用的格式。但每次要把.md发给别人看问题就来了对方手机打开一堆#和|表格排版全乱。转 PDF 吧市面上的在线工具要么样式固定死板要么导出后字体变形、代码块溢出想调个标题居中、换个护眼背景基本没戏。我试过手动调 CSS 再打印也试过几个开源方案结果不是依赖太重就是导出效果和预览对不上。核心痛点其实就一个预览和导出必须是同一套渲染逻辑样式要能自定义还得能框选文字。截图式导出html2canvas 那类直接排除因为导出的 PDF 里文字选不中搜索也搜不到体积还大。于是我想能不能用 AI 辅助编码两天内撸一个自定义样式的 MD 转 PDF 工具技术选型上Claude Code 负责终端里的项目级操作GLM 4.6 提供模型能力MCP 扩展视觉理解和联网搜索再用 TaoToken 统一管理 Key 和 API 通道省得在多个平台之间来回切换配置。这篇文章就把从环境搭建、MCP 接入、样式渲染到导出验证的全流程拆开讲配置片段可以直接复制。2. TaoToken 前置统一 Key 与 API 通道配置在开始写代码之前先把模型调用通道理顺。Claude Code 默认走的是 Anthropic 的接口但我们可以通过环境变量把它转发到 GLM 上。这里用 TaoToken 做统一入口好处是 Key 只需要管一份模型对话、编码计划、API Keys 都在一个控制台里。2.1 获取 API Key 与配置环境变量先到 TaoToken 控制台创建一个 API Key。地址是https://taotoken.net/api-keys登录后点新建复制那串sk-开头的密钥。注意不要把它提交到 Git 仓库里后面我们会用环境变量注入。拿到 Key 之后配置 Claude Code 的转发。Claude Code 读取的是ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY这两个环境变量。在 Windows 的 PowerShell 里可以这样设$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_API_KEYsk-你的TaoToken密钥macOS 或 Linux 的 bash/zsh 则是export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYsk-你的TaoToken密钥如果你想让配置持久化Windows 可以写进系统环境变量macOS 可以追加到~/.zshrc。这样每次打开终端Claude Code 就会自动走 TaoToken 的通道模型请求会被转发到 GLM 4.6 上。2.2 settings.json 骨架Claude Code 支持项目级的settings.json放在项目根目录的.claude文件夹下。这个文件可以固化模型选择、权限模式等。一个可用的骨架如下{ model: claude-sonnet-4-5, permissions: { allow: [ Read, Write, Edit, Bash(npm run *), Bash(git *) ] }, env: { ANTHROPIC_BASE_URL: https://taotoken.net/api } }这里model写的是 sonnet 4.5但实际请求会被 TaoToken 转发到 GLM 4.6表面模型名不影响使用。permissions.allow里放开文件读写和常用命令避免每步都弹确认。注意不要把 API Key 写进这个文件Key 还是走环境变量更安全。2.3 config.toml 骨架可选用于 MCP 注册有些 MCP 客户端或工具链会用config.toml来管理服务注册。如果你习惯用配置文件而不是命令行注册 MCP可以准备一份这样的骨架[mcp_servers.zai-mcp-server] command npx args [-y, z_ai/mcp-server] env { Z_AI_API_KEY 你的智谱Key } [mcp_servers.web-search-prime] type http url https://open.bigmodel.cn/api/mcp/web_search_prime/mcp headers { Authorization Bearer 你的智谱Key }不过 Claude Code 更推荐用claude mcp add命令来注册下面会讲。这份 toml 主要是给你在别的 MCP 宿主里复用时参考。3. 可复制配置Claude Code 与 MCP 接入环境变量配好之后安装 Claude Code 并注册 MCP 服务。这一步是整个工具能“自己查错、自己搜方案”的关键。3.1 安装 Claude Code 与 GLM 转发先确保 Node.js 版本在 v22 以上。然后全局安装 Claude Codenpm install -g anthropic-ai/claude-code安装完成后在项目目录下打开终端输入claude如果看到欢迎界面说明环境变量生效了。此时默认模型表面显示 sonnet 4.5实际请求已经通过 TaoToken 转发到 GLM 4.6。如果是基于已有项目开发进入项目后先输入/init让模型梳理整个目录结构生成一份项目说明。新项目则可以直接描述需求。3.2 注册视觉理解 MCPGLM 的视觉理解 MCP 可以让模型“看懂”截图。注册命令如下把your_api_key换成你的智谱 Keyclaude mcp add -s user zai-mcp-server --env Z_AI_API_KEYyour_api_key -- npx -y z_ai/mcp-server-s user表示注册到用户级配置所有项目都能用。注册成功后在 Claude Code 里输入/mcp可以看到当前可用的 MCP 列表。3.3 注册网页搜索 MCP联网搜索 MCP 走的是 HTTP 方式注册时带上 Authorization 头claude mcp add -s user -t http web-search-prime https://open.bigmodel.cn/api/mcp/web_search_prime/mcp --header Authorization: Bearer your_api_key这个 MCP 在后续调研 PDF 导出方案时非常有用。注意调用时需要点名“联网搜索”否则模型可能不会主动触发。3.4 注册 chrome-devtools MCP为了排查前端控制台报错再装一个 chrome-devtools MCPclaude mcp add chrome-devtools npx chrome-devtools-mcplatest注册后终端会提示Added stdio MCP server chrome-devtools并修改~/.claude.json。这个 MCP 能自动驱动浏览器、查看控制台、截图相当于给模型装了一双眼睛。4. 验证请求与成功结果从想法到可导出 PDF配置就绪后开始让模型干活。整个过程是对话式迭代每一轮聚焦一个具体问题。4.1 第一轮描述需求生成初版我直接把想法丢给模型“最近让大模型生成了小说但分享时用 Markdown 不方便希望转成 PDF。现有工具样式单一我想要一个能调整 PDF 样式的 md2pdf 工具比如标题居中、背景自定义。”允许文件编辑后按shift tab保持允许状态GLM 开始生成代码。几分钟后第一版出来了左侧编辑器右侧配置面板底部有预览和下载按钮。打开index.html预览正常但下载后的 PDF 字体变形。4.2 第二轮实时预览与布局调整第一轮的问题是预览需要手动点按钮且下载后样式不对。我提出新要求“预览面板默认打开且实时跟随编辑区渲染左右并列布局。预览正常但下载后的 PDF 整体变形。”模型调整了布局但控制台出现两条报错主题配置没生效。这时候 chrome-devtools MCP 派上用场。我输入请使用 chrome-devtools 查看当前 index.html 页面运行是否出现错误。模型自动驱动浏览器查看控制台截图然后定位到问题并修复。这一步的关键是点名 MCP 工具否则模型可能只用静态分析。4.3 第三轮修复 PDF 导出变形预览正常但导出变形根因是内部用了 html2canvas 截图导出。我把下载的 PDF 截图作为image.png通过指定文件位置让模型理解问题。注意终端里不支持直接粘贴剪贴板图片得先保存成文件。模型调用视觉理解 MCP 分析截图后发现 html2canvas 导致文字无法框选且变形。接着我让它联网搜索替代方案请使用联网搜索调研纯前端 PDF 导出的其他方案。调研结果是纯前端导出要么走window.print要么用 html2canvas。截图方案排除最终选择打印方案。核心思路是点击打印按钮 → 保存页面状态 → 设置预览 HTML →window.print→ 恢复页面状态。4.4 第四轮小说主题适配基础功能跑通后开始做差异化。我提出“新增两个适合小说阅读的 PDF 主题可调用 MCP 联网搜索参考主流阅读平台的护眼背景或搜集公开剪贴画装饰。”模型联网搜索后生成了护眼配色和装饰元素。导出打印时仍有部分样式丢失又折腾了几轮。总计约 30 轮对话两天完成。4.5 验证导出结果最终验证动作在编辑器输入一段包含标题、表格、代码块、数学公式的 Markdown点击预览确认渲染再点下载。用 PDF 阅读器打开检查三点文字能否框选、代码块是否溢出、背景色是否保留。实测下来打印方案导出的 PDF 文字可选中样式与预览一致。5. 本篇常见错排查5.1 MCP 工具不触发模型不会自动调用所有 MCP。视觉理解要明确说“使用 zai-mcp-server 理解图片”联网搜索要说“联网搜索”chrome-devtools 要说“使用 chrome-devtools 查看控制台”。名称点对调用才稳。5.2 环境变量不生效ANTHROPIC_BASE_URL末尾不要多加斜杠写成https://taotoken.net/api即可。如果claude启动后仍报连接错误检查 Key 是否复制完整以及终端是否重启过。5.3 PDF 导出字体变形根因是 html2canvas 截图。改用window.print方案并在打印前设置media print样式隐藏不需要打印的按钮和面板。打印时用window.print()触发浏览器原生导出文字可框选。5.4 上下文过长导致模型“失忆”对话轮次多了之后上下文会膨胀。每隔一段时间用/compact压缩或者/clear清空重来。也可以开一个 Cursor 窗口方便查看文件改动纯终端不方便对比。5.5 改错代码无法回滚做好 Git 阶段性提交。每完成一个小功能就git commit改错了直接git checkout回滚。Vibe coding 一时爽不 review 就是 debug 火葬场。6. 继续迭代把工具用起来工具跑通后日常使用就是打开页面、粘贴 Markdown、选主题、导出。如果想让模型能力更顺手可以到模型对话页面直接测试 GLM 4.6 的响应效果长期做编码和 Agent 任务可以了解 Coding Plan 的额度方案需要管理多个 Key 或查看调用量API Keys 控制台和接入文档里有详细说明。两天做出一个自定义样式的 MD 转 PDF 工具核心不在于代码量而在于把 MCP 工具用对、把上下文管好、把每一步验证做扎实。模型负责生成和排查你负责聚焦需求和把关结果。这套流程复用到其他小工具上同样成立。
返回列表