告别复制粘贴！用Code2Word在Word文档中一键插入高亮代码（Vue3+highlight.js实战）

用Vue3+highlight.js打造Word代码高亮工具：告别格式混乱的复制粘贴

写技术文档时，你是否也受够了从IDE复制代码到Word后的格式灾难？原本优雅的高亮代码变成了一团黑白文字，缩进错乱、关键字毫无区分度。更糟糕的是，当你需要更新代码片段时，又得重新复制粘贴、调整格式——这种重复劳动简直是对开发者时间的公然谋杀。

今天，我们就来彻底解决这个痛点。我将带你用Vue3和highlight.js构建一个专为Word文档优化的代码高亮工具Code2Word。不同于简单的语法高亮复制，这个工具能生成Word原生支持的富文本格式，确保代码在文档中保持完美呈现，即使经过多次编辑也不会丢失样式。

1. 为什么需要专门的Word代码工具？

几乎所有开发者都遇到过这样的场景：编写技术方案时需要插入示例代码，撰写API文档时要展示接口响应，制作教程时希望示例清晰可读。主流的Markdown工具虽然能完美呈现代码，但当文档需要与他人协作或最终交付时，Word仍是不可替代的标准格式。

常见的"伪解决方案"其实都存在明显缺陷：

• IDE直接复制：VS Code等工具的确支持带高亮复制，但粘贴到Word后：
  • 背景色经常丢失
  • 行号与代码分离
  • 字体样式不统一
• 在线转换工具：
  • 依赖第三方服务稳定性
  • 需要联网操作
  • 存在代码隐私风险
• 截图插入：
  • 无法直接复制代码文本
  • 修改时需要重新截图
  • 文档体积急剧膨胀

// 典型的问题案例：从VS Code复制到Word后的结果 function example() { const message = "Hello World"; // 注释也会失去高亮 console.log(message); }

提示：Word实际上支持通过HTML/RTF格式渲染带样式的内容，关键是要以正确的方式将代码注入剪贴板

2. 工具核心原理与技术选型

2.1 剪贴板的多格式写入机制

现代浏览器的Clipboard API支持同时写入多种格式的内容。当我们在Word中执行粘贴操作时，程序会智能选择最合适的格式进行渲染。我们的工具正是利用这一特性，同时准备以下格式：

2.2 为什么选择highlight.js？

经过对比主流语法高亮库，我们选择了highlight.js，主要因为：

• 轻量高效：核心库仅6KB(gzipped)
• 语言支持广：189种语言和94种样式主题
• Word兼容性好：生成的HTML结构简单，避免复杂选择器
• 自动检测：能智能识别代码语言，减少配置

# 安装依赖 npm install highlight.js vue @vitejs/plugin-vue

2.3 Vue3的组合式API优势

使用Vue3的composition API让我们可以更灵活地组织代码逻辑：

// 使用setup语法糖简化代码 import { ref } from 'vue' import hljs from 'highlight.js' export function useCodeHighlighter() { const code = ref('') const language = ref('javascript') const highlighted = computed(() => { return hljs.highlight(code.value, { language: language.value }).value }) return { code, language, highlighted } }

3. 从零构建Code2Word工具

3.1 项目初始化与配置

首先创建Vite+Vue3项目：

npm create vite@latest code2word --template vue cd code2word

然后配置highlight.js的自动导入：

// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], optimizeDeps: { include: ['highlight.js/lib/core'] } })

3.2 核心功能实现

创建代码高亮组件：

<template> <div class="editor"> <select v-model="language"> <option v-for="lang in languages" :value="lang">{{ lang }}</option> </select> <textarea v-model="code"></textarea> <button @click="copyToClipboard">复制到剪贴板</button> </div> </template> <script setup> import { ref } from 'vue' import hljs from 'highlight.js/lib/core' import javascript from 'highlight.js/lib/languages/javascript' hljs.registerLanguage('javascript', javascript) const languages = ['javascript', 'python', 'html', 'css', 'java'] const language = ref('javascript') const code = ref('') const copyToClipboard = async () => { const highlighted = hljs.highlight(code.value, { language: language.value }).value const html = `<pre style="font-family: Consolas, monospace; background: #f5f5f5; padding: 10px; border-radius: 4px;">${highlighted}</pre>` await navigator.clipboard.write([ new ClipboardItem({ 'text/html': new Blob([html], { type: 'text/html' }), 'text/plain': new Blob([code.value], { type: 'text/plain' }) }) ]) } </script>

3.3 样式优化与Word兼容性技巧

为确保在Word中呈现最佳效果，需要注意：

• 字体选择：优先使用等宽字体如Consolas、Courier New
• 背景处理：使用浅色背景避免打印问题
• 边框设置：1px实线边框提升可读性
• 内边距：至少10px保证代码不贴边

/* Word友好的代码样式 */ pre { font-family: Consolas, monospace; background: #f5f5f5; padding: 10px; border: 1px solid #ddd; border-radius: 4px; white-space: pre-wrap; word-break: break-all; line-height: 1.5; }

4. 高级功能扩展

4.1 添加行号支持

对于教学文档，行号是很有用的功能。我们可以通过CSS计数器实现：

function addLineNumbers(html) { return html.replace(/<span class="line">/g, (match) => { return `${match}<span class="line-number"></span>` }) } // 对应的CSS pre { counter-reset: line; } .line-number::before { counter-increment: line; content: counter(line); display: inline-block; width: 2em; padding-right: 1em; margin-right: 1em; color: #999; text-align: right; border-right: 1px solid #ddd; }

4.2 主题切换功能

不同文档可能需要不同的代码主题，我们可以动态加载highlight.js的样式：

const themes = [ 'github', 'atom-one-dark', 'solarized-light', 'monokai' ] const currentTheme = ref('github') watch(currentTheme, (theme) => { const link = document.getElementById('highlight-theme') if (link) { link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/${theme}.min.css` } else { const style = document.createElement('link') style.id = 'highlight-theme' style.rel = 'stylesheet' style.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/${theme}.min.css` document.head.appendChild(style) } })

4.3 本地存储历史记录

使用localStorage保存用户常用的代码片段：

const history = ref(JSON.parse(localStorage.getItem('codeHistory') || '[]')) const saveToHistory = () => { if (!code.value.trim()) return history.value = [ { code: code.value, language: language.value, timestamp: Date.now() }, ...history.value.slice(0, 9) ] localStorage.setItem('codeHistory', JSON.stringify(history.value)) }

5. 实际应用中的经验分享

在团队内部使用这个工具几个月后，我们发现了一些值得注意的细节：

• Word版本差异：Office 365对HTML的支持最完善，2016版偶尔会丢失背景色
• 长代码处理：超过50行的代码建议分页显示，避免Word渲染性能问题
• 打印优化：深色主题在打印前应切换为浅色，确保可读性
• 安全提示：敏感代码应在复制后立即清空编辑器

一个特别有用的技巧是为不同语言创建快捷键：

// 快速插入语言模板 const templates = { javascript: 'function example() {\n // 你的代码\n}', python: 'def example():\n # 你的代码', html: '<!DOCTYPE html>\n<html>\n<head>\n <title>示例</title>\n</head>\n<body>\n <!-- 你的代码 -->\n</body>\n</html>' } const insertTemplate = () => { code.value = templates[language.value] || '' }

开发过程中最意外的发现是，Word对white-space: pre-wrap的支持比预期要好得多，这让我们可以保留原始缩进同时自动换行，解决了长期困扰的技术文档排版问题。