前端开发

一、前置准备：确认soloMD环境与插件机制 在集成任何 Markdown 渲染增强功能前，必须确保开发环境与 soloMD 的插件扩展机制完全兼容。soloMD 自 1.5.0 版本起全面拥抱 Vite 生态，其 Markdown 渲染层基于 markdown-it 构建，并通过 markdownConfig 显式暴露插件注入入口——这不是一个“开箱即用”的黑盒，而是一个可编程的渲染流水线。 首先，请执行以下两条命令验证基础环境： npm list solomd # ✅ 正确输出示例：`└── [email protected]` node -v # ✅ 要求输出 v18.17.0 或更高（推荐 LTS v18.20.2+） ⚠️ 若 npm list solomd 报错或版本低于 1.5.0，请先升级： npm install solomd@latest 并确认 package.json 中 "type": "module" 已设置（Vite 项目必备）。 soloMD 的项目结构遵循标准 Vite 模式： src/ ├── components/ ├── pages/ ├── App.vue └── main.ts ← 渲染初始化入口（常见配置位置） public/ package.json vite.config.ts ← 更推荐的插件配置位置（全局生效） 关键配置入口有两个，优先级顺序为：vite.config.ts > main.ts。你只需选择其一即可（本文统一使用 vite.config.ts）： ...

一、为什么选择Prism.js？——轻量、易用与生态优势 在为技术博客、文档站或开发者平台选型代码高亮方案时，你很可能已在 Highlight.js、Shiki 和 Prism.js 之间犹豫。而越来越多的现代静态站点（Hugo/Jekyll/VitePress）和框架应用（Vue 3、React 18+、SvelteKit）正将 Prism.js 作为默认首选——这不是偶然。 Prism 的核心竞争力在于「精准克制」：它零运行时依赖（纯原生 JS），无构建强制要求（CDN 开箱即用），且语言与插件完全解耦。对比 Highlight.js（需手动注册语言、CSS 主题强耦合、SSR 友好性较弱），Prism 的模块化设计天然适配按需加载：你只需引入 prism-core.js + prism-javascript.js + prism-coy.css，就能获得一个仅 12KB（gzip）的 JS 高亮内核。 更关键的是，Prism 对 Markdown 生态的原生友好性极强。主流渲染器（Remark/Rehype、VitePress 的 @mdx-js/mdx、Hugo 的 Goldmark）默认输出符合 Prism 规范的 HTML 结构： <pre><code class="language-js">console.log('Hello Prism!');</code></pre> 无需额外配置解析器或自定义语法树转换——这为后续集成省去了大量胶水代码。同时，其 CSS-in-JS 友好特性（如通过 Prism.plugins.NormalizeWhitespace 处理缩进、支持 data-language 属性驱动）也让它轻松融入 Tailwind、UnoCSS 或 CSS Modules 工程体系。 💡 小贴士：Prism 官方提供 下载定制器，可勾选所需语言/插件后一键生成精简版 CDN 链接——这是避免“全量打包却只用 JS”的第一道防线。 二、三步完成基础集成——CDN引入 + 自动高亮 无需构建工具，3 分钟即可让代码块焕然一新： ✅ 步骤1：引入精简版 CDN 访问 prismjs.com/download，勾选 JavaScript、CSS、Line Numbers（可选）及主题（如 Prism 或 Night Owl），复制生成的 <link> 和 <script>： ...

1. 前置准备：环境与工具确认 在开始编码前，请先确认你正运行在支持代码执行的 Claude 环境中——这不是传统意义上的“本地开发”，而是利用 Anthropic 提供的智能沙箱能力，全程在浏览器或桌面客户端内完成构建、调试与迭代。关键认知：✅ 无需安装 Claude 模型，无需配置 Python/Node 环境，甚至不需要 npm install。Claude Code（即 Claude 3.5 Sonnet 在「Code」模式下）已内置完整 JavaScript 运行时、文件系统模拟（localStorage、fetch、DOM API）及 CDN 资源加载能力。 ✅ 推荐平台清单（实测可用） Cursor v0.48+：启用「Claude Code」模型后，默认激活 Code Interpreter 插件，支持 .html 文件实时预览与 DOM 操作 Continue.dev v0.27+：在 config.json 中设置 "model": "claude-3-5-sonnet-20240620"，并开启 codeInterpreter: true Claude Desktop（Beta）：macOS/Windows 官方桌面版，需在设置中开启实验性功能 → 「Enable Code Interpreter」 Claude in Browser（claude.ai）：⚠️ 仅当右下角出现「Code Interpreter」图标（⚡）且可点击时才可用；首次使用需手动开启（Settings → Experimental Features） ❌ 明确排除场景 纯网页版 claude.ai（未开启 Code Interpreter）：不支持 localStorage 写入、无法加载外部 CDN、无 document 对象访问权限 移动端 Claude App：暂不支持代码执行沙箱 使用 claude-3-haiku 或 claude-3-opus 模型：它们默认不启用 Code Interpreter 模式，必须显式切换为 claude-3-5-sonnet 并确认沙箱就绪 快速验证环境就绪 在 Claude Code 输入框中粘贴并运行以下命令（无需回车，Claude 会自动执行并返回结果）： ...