最近在写word文档时，需要插入一些示例代码。就想到了上学时收藏的两个美化word文档代码的工具。无奈的是，一个停止服务，另一个没人维护，由https降级到http了，感觉也岌岌可危的样子。

突然觉得这种冷门工具本来就少，还靠第三方服务，太不稳定了。有人会说vscode、idea都支持高亮复制，我的直观感觉是不灵活、也不方便。

于是就自己手撕了一个。

一、成品

源码meethigher/code2word: Code2Word - 让高亮的代码完美呈现至 Word

环境

vue3+vite+pinia
node16.16.0

代码高亮使用highlight.js，实际效果预览图，若感兴趣可直接点击访问。

二、原理

首先，需要了解两个点。

剪贴板支持多种格式的内容复制，也支持一次复制多种格式内容。包括纯文本、HTML、RTF富文本、图标等。
Word支持通过HTML/RTF来渲染带有样式的内容。

对于码农来说，使用HTML实现该工具就很简单。下面给出一个最简单的整体流程示例。

1.) 使用js一次复制多种格式内容，代码示例

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script>
    function copy(content) {
        try {
            navigator.clipboard.write([
                new ClipboardItem({
                    "text/html": new Blob([content], {type: "text/html"}),
                    "text/plain": new Blob([content], {type: "text/plain"}),
                }),
            ]);
            alert("已复制");
        } catch (err) {
            console.error("Failed to copy: ", err);
            alert("复制失败");
        }
    }

    copy("<div style=\"background-color: skyblue;border:1px solid black\">hello world</div>");

</script>
</body>
</html>

2.) 查看剪贴板内容，可以使用开源工具CopyQ。

3.) 将该内容按照源格式粘贴到word，就会发现样式自动代入了。

4.) 开发过程中注意事项

Word在带有序号按行渲染时，同时还要保留自动换行，使用ol>li、ul>li比较友好，原生支持行渲染。
Word只支持渲染简单的样式，样式越简单越好。这个也是我选用highlight.js、弃用prism.js的原因。
注意浏览器与Word渲染的差异。就比如既保留空格，又允许换行的white-space: pre-wrap。
Word渲染时使用内联样式，而鼠标选择复制时，浏览器会自动将其转为内联样式(虽然我在开发时直接就使用内联样式开发的，但是该结论我也验证过了)

Code2Word-在Word里优雅的插入代码

一、成品

二、原理