当前位置：首页 > web >正文

构建 TypoView：一个富文本样式预览工具的全流程记录

web 2025/8/22 7:49:29

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

在一次和 CodeBuddy 的日常交流中，我提出了一个构想：能不能帮我从零构建一个富文本样式预览工具？我希望这个工具不仅能渲染 Markdown，还能模拟真实出版物的排版风格，比如极简主义、报刊、读书笔记等，最好还能支持一键切换排版样式，甚至导出 PDF 或网页代码。

CodeBuddy 毫不犹豫地答应了，而且从头到尾主动承担了所有核心代码的生成任务，我几乎只需要旁观并观察它的思路，然后适时调整方向。这篇文章记录了我们合作开发 TypoView 的全过程。

从想法到实现：项目初始化的曲折之路

最开始，我提出需求之后，CodeBuddy 并没有直接进入编码环节，而是对整个项目做了简要分析，它判断这个项目复杂度适中，预估文件不会太多，并主动规划出八个步骤：从创建项目、安装依赖、构建 UI，到最终的导出功能。

我原本以为一切会非常顺利，但没想到一开始创建 Vue3 项目的过程就“翻车”了几次。CodeBuddy 原本打算用 npm create vite@latest . --template vue-ts 创建 Vue + TypeScript 项目，结果因为一些环境问题，Vite 多次默认回退到了 JavaScript 模板。

几次尝试之后，CodeBuddy 没有气馁，而是开始手动排查问题，逐步清理目录内容，更换命令格式，甚至从 PowerShell 角度考虑命令兼容性。最终它通过 Remove-Item * -Recurse -Force; npm create vite@latest typoview --template vue-ts 成功在一个新目录中创建了正确的 Vue3 + TypeScript 项目。

这种从失败中快速迭代并修正策略的能力，让我对 CodeBuddy 的稳健印象非常深刻。

自动生成项目结构与依赖配置

项目目录生成后，CodeBuddy 自动安装了必要的依赖，比如 Markdown 渲染用的 marked，主题样式用的 CSS Modules，还预留了将来导出 PDF 的库扩展空间（如 html2pdf.js）。整个 scaffold 过程清晰有序，使用 Vite 提升了开发效率，而使用 TypeScript 也为后续的模块拆分和类型校验奠定了基础。
在这里插入图片描述

Markdown 渲染的实现与样式注入

CodeBuddy 接着构建了核心组件 MarkdownRenderer.vue，这个组件的职责很明确：接收 Markdown 字符串，转化为 HTML，再通过 CSS Modules 注入不同风格的排版样式。它选择了 marked 库作为 Markdown 解析器，并封装得非常优雅，既保持了解耦又方便主题扩展。

<template><div :class="themeClass" v-html="renderedHtml" />
</template><script lang="ts" setup>
import { marked } from 'marked'
const props = defineProps<{ markdown: string, theme: string }>()
const renderedHtml = computed(() => marked(props.markdown))
const themeClass = computed(() => `typoview-theme-${props.theme}`)
</script>

这种代码结构的优点在于逻辑集中且清晰，主题切换只需要传入不同的 theme 参数即可，CSS Modules 也避免了样式污染的问题。

多种主题切换 + 行距字号模板

为了满足不同使用场景（比如编辑器开发者、写博客的用户等），CodeBuddy 主动构建了三个主题：

极简主题（Minimal）
报刊风格（Newspaper）
阅读笔记风格（Reader）

每个主题通过 .module.css 文件单独定义行距、字间距、首行缩进等参数，并通过按钮切换。更令人惊喜的是，它还引入了“模板配置”的概念，用户可以通过界面选择不同字号/行距组合，比如“16px + 1.5 行距”，“18px + 1.75 行距”等，并立即预览效果。

网格背景与排版边距模拟

为了更贴近真实出版系统的排版体验，CodeBuddy 还添加了仿印刷背景。它在页面底部生成一个网格背景（使用 CSS background-image: repeating-linear-gradient 实现），并对渲染容器设置了左右边距与最大宽度。这种设计不仅提升了整体观感，还让我在排版时更容易把握结构平衡。

在这里插入图片描述