[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81650":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},81650,"r-markdown","RobocopMao\u002Fr-markdown","RobocopMao","一款专为微信公众号设计的 Markdown 实时预览编辑器，支持丰富的排版组件和一键复制到公众号，主要方便自己使用，也可以自行下载后修改成自己喜欢的排版。","https:\u002F\u002Frobocopmao.github.io\u002Fr-markdown\u002F",null,"TypeScript",41,17,21,3,0,9,15,20,27,3.77,false,"main",true,[],"2026-06-12 02:04:17","# R-Markdown 编辑器\n\n> 专为微信公众号打造的 Markdown 排版工具，所见即所得，一键复制到公众号后台。\n\n## ✨ 功能特性\n\n- **实时预览** — 左侧编辑 Markdown，右侧实时渲染公众号效果\n- **一键复制** — 富文本 \u002F HTML 源码两种复制模式，直接粘贴到公众号编辑器\n- **保存图片** — 将排版内容导出为高清 PNG 图片\n- **主题切换** — 15 款预设主题色 + 自定义颜色，支持暗色模式\n- **滚动同步** — 编辑器与预览面板滚动位置按比例联动\n- **自动保存** — 内容实时保存到 localStorage，刷新不丢失\n- **可调面板** — 拖拽调整编辑器与预览区宽度\n- **组件展示** — 内置排版组件库，可视化浏览所有可用组件及效果\n\n## 🎨 排版能力\n\n基于 [awesome-design-md](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fawesome-design-md) 排版引擎，支持丰富的公众号扩展语法：\n\n### 内联语法\n\n| 语法 | 效果 |\n| --- | --- |\n| `==渐变背景文字==` | 渐变背景强调 |\n| `::柔光重点文字::` | 柔光蓝紫色文字 |\n| `!!胶囊文字!!` | 超圆角胶囊背景 |\n| `^^加重强调^^` | 靛青加重文字 |\n| `\u003Cbadges>` | 彩色标签徽章 |\n\n### 块级组件\n\n| 组件 | 说明 |\n| --- | --- |\n| `\u003Cstatement>` | 居中强调语 |\n| `\u003Clead>` | 引导文字段 |\n| `\u003Cbreaking>` | 突发\u002F重大更新卡片 |\n| `\u003Ccompare>` | Before\u002FAfter 对比布局 |\n| `\u003Ccta>` | 行动召唤卡片 |\n| `\u003Csteps>` | 横向步骤流 |\n| `\u003Ctimeline>` | 时间线组件 |\n| `\u003Ctitle>` | 标题组件 |\n| `\u003Cptitle>` | 副标题组件 |\n| `\u003Cengage>` | 互动引导组件 |\n| `\u003Ccaseflow>` | 案例流程组件 |\n| `\u003Creadingpath>` | 阅读路径组件 |\n| ` ``` ` | 代码块 |\n| `> [TIP]` | 提示框 |\n\n## 🚀 快速开始\n\n### 环境要求\n\n- Node.js >= 20\n- pnpm\n\n### 安装与运行\n\n```bash\n# 克隆项目\ngit clone https:\u002F\u002Fgithub.com\u002FRobocopMao\u002Fr-markdown.git\ncd r-markdown\n\n# 安装依赖\npnpm install\n\n# 启动开发服务器\npnpm dev\n```\n\n浏览器打开终端输出的地址即可使用。\n\n### 构建生产版本\n\n```bash\npnpm build\n```\n\n构建产物输出到 `dist\u002F` 目录。\n\n### 预览构建结果\n\n```bash\npnpm preview\n```\n\n### 代码检查\n\n```bash\npnpm check    # ESLint + Prettier 检查\npnpm lint     # ESLint 自动修复\npnpm format   # Prettier 格式化\n```\n\n## 📦 技术栈\n\n- **Vue 3** (Composition API + `\u003Cscript setup>`)\n- **TypeScript**\n- **Vite** — 构建工具\n- **Vue Router** — 路由管理\n- **CodeMirror 6** — Markdown 编辑器内核\n- **Tailwind CSS 4** — 样式系统\n- **html-to-image** — 图片导出\n- **awesome-design-md** — 公众号排版引擎\n\n## 📁 项目结构\n\n```\nr-markdown\u002F\n├── src\u002F\n│   ├── components\u002F            # UI 组件\n│   │   ├── Editor.vue         # CodeMirror 编辑器\n│   │   ├── Preview.vue        # 公众号预览面板\n│   │   ├── ThemePicker.vue    # 主题色选择器\n│   │   ├── DarkModeToggle.vue # 暗色模式切换\n│   │   ├── NavCapsule.vue     # 顶部导航胶囊\n│   │   ├── SiteLogo.vue       # 站点 Logo\n│   │   ├── SiteFooter.vue     # 页脚\n│   │   ├── Toast.vue          # 轻提示\n│   │   ├── MobileActionsMenu.vue  # 移动端操作菜单\n│   │   └── MobileNavMenu.vue  # 移动端导航菜单\n│   ├── editor-components\u002F     # 排版组件库\n│   │   ├── index.ts           # 组件注册与导出\n│   │   ├── Badges_DA01.ts     # 标签徽章\n│   │   ├── Breaking_DA01.ts   # 突发新闻卡片\n│   │   ├── CaseFlow_DA01.ts   # 案例流程\n│   │   ├── Compare_DA01.ts    # 对比布局 v1\n│   │   ├── Compare_DA02.ts    # 对比布局 v2\n│   │   ├── Cta_DA01.ts        # 行动召唤\n│   │   ├── Engage_DA01.ts     # 互动引导 v1\n│   │   ├── Engage_DA02.ts     # 互动引导 v2\n│   │   ├── Lead_DA01.ts       # 引导文段\n│   │   ├── PTitle_DA01.ts     # 副标题\n│   │   ├── ReadingPath_DA01.ts # 阅读路径\n│   │   ├── Statement_DA01.ts  # 居中强调语\n│   │   ├── Steps_DA01.ts      # 步骤流 v1\n│   │   ├── Steps_DA02.ts      # 步骤流 v2\n│   │   ├── Timeline_DA01.ts   # 时间线\n│   │   ├── Title_DA01.ts      # 标题 v1\n│   │   └── Title_DA02.ts      # 标题 v2\n│   ├── composables\u002F           # 组合式函数\n│   │   ├── useTheme.ts        # 主题管理\n│   │   ├── useDarkMode.ts     # 暗色模式\n│   │   └── useDropdownGroup.ts # 下拉菜单组\n│   ├── views\u002F                 # 页面视图\n│   │   ├── HomePage.vue       # 首页\n│   │   ├── EditorPage.vue     # 编辑器页\n│   │   └── ComponentShowcase.vue # 组件展示页\n│   ├── utils\u002F                 # 工具函数\n│   │   ├── markdownParser.ts  # Markdown → HTML 解析\n│   │   ├── colorUtils.ts      # 颜色处理\n│   │   ├── components.ts      # 组件工具\n│   │   ├── helpers.ts         # 通用辅助函数\n│   │   └── inlineFormat.ts    # 内联格式化\n│   ├── data\u002F\n│   │   └── demoContent.ts     # 示例内容\n│   ├── router\u002F\n│   │   └── index.ts           # 路由配置\n│   ├── styles\u002F                # 全局样式\n│   ├── App.vue                # 根组件\n│   └── main.ts                # 入口\n├── .github\u002Fworkflows\u002F\n│   └── deploy.yml             # GitHub Actions 自动部署\n├── package.json\n├── vite.config.ts\n└── tsconfig.json\n```\n\n## 🌐 在线体验\n\n访问 [GitHub Pages](https:\u002F\u002Frobocopmao.github.io\u002Fr-markdown\u002F) 直接使用。\n\n## 📄 License\n\nMIT\n","R-Markdown 编辑器是一款专为微信公众号设计的 Markdown 实时预览编辑工具，支持丰富的排版组件和一键复制到公众号后台。其核心功能包括实时预览、一键复制富文本或 HTML 源码、保存图片、主题切换、滚动同步、自动保存等，极大提升了内容创作效率与美观度。基于 Vue 3 和 TypeScript 构建，并使用 CodeMirror 6 作为编辑器内核，结合 Tailwind CSS 4 提供强大的样式支持。适用于需要频繁发布高质量图文消息的微信公众号运营者，无论是个人还是团队都能通过它轻松实现高效且专业的排版工作。",2,"2026-06-11 04:05:50","CREATED_QUERY"]