fix(code-highlighter): ensure HTML formatted code is correctly copied

src/tools/code-highlighter/code-highlighter.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { bundledLanguagesInfo, createHighlighter } from 'shiki/bundle/full';
 import { bundledThemesInfo } from 'shiki/themes';
+import { useMessage } from 'naive-ui';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
-import { useCopy, useCopyClipboardItems } from '@/composable/copy';
+import { useCopy } from '@/composable/copy';
 
 const { t } = useI18n();
 
@@ -38,6 +39,7 @@ const currentTheme = useQueryParamOrStorage({ name: 'theme', storageName: 'code-
 const currentLang = useQueryParamOrStorage({ name: 'lang', storageName: 'code-highlighter:lang', defaultValue: 'typescript' });
 
 const showLineNumbers = ref(false);
+const transparentBackground = ref(false);
 
 const formattedCodeHtml = computedAsync(async () => {
   const currentThemeValue = currentTheme.value;
@@ -75,12 +77,55 @@ const formattedCodeHtml = computedAsync(async () => {
     ],
   });
 });
-const htmlClipboardItems = computed(() => [{
-  mime: 'text/html',
-  content: formattedCodeHtml.value,
-}]);
-const { copy: copyHtml } = useCopyClipboardItems({ source: htmlClipboardItems });
 const { copy: copyText } = useCopy({ source: code });
+
+// Transform HTML to be Outlook-compatible (Outlook ignores styles on pre/code tags)
+function makeOutlookCompatible(html: string, useTransparentBg: boolean): string {
+  return html
+    // Replace <pre> with a styled <div> (Outlook handles divs better)
+    .replace(/<pre[^>]*style="([^"]*)"[^>]*>/g, (_, style) => {
+      // Remove background-color if transparent is requested
+      const finalStyle = useTransparentBg
+        ? style.replace(/background-color:\s*[^;]+;?/g, '')
+        : style;
+      return `<div style="${finalStyle}; font-family: Consolas, Monaco, 'Courier New', monospace; padding: 16px; border-radius: 4px;">`;
+    })
+    .replace(/<\/pre>/g, '</div>')
+    // Replace <code> with <div>
+    .replace(/<code>/g, '<div>')
+    .replace(/<\/code>/g, '</div>')
+    // Replace line spans with divs and add explicit background
+    .replace(/<span class="line">/g, '<div style="font-family: Consolas, Monaco, \'Courier New\', monospace; white-space: pre;">')
+    .replace(/<span class="line([^"]*)"/g, '<div style="font-family: Consolas, Monaco, \'Courier New\', monospace; white-space: pre;" class="line$1"')
+    // Close line divs properly (lines end with </span> for the line wrapper)
+    .replace(/(<div style="font-family: Consolas[^"]*"[^>]*>.*?)(<\/span>)(\s*<div style="font-family: Consolas|$)/g, '$1</div>$3')
+    // Add monospace font to all colored spans
+    .replace(/<span style="color:/g, '<span style="font-family: Consolas, Monaco, \'Courier New\', monospace; color:');
+}
+
+// Copy with both MIME types: text/html for Word/Outlook, text/plain for code editors
+const message = useMessage();
+async function copyHtml() {
+  if (!formattedCodeHtml.value) {
+    return;
+  }
+
+  const outlookHtml = makeOutlookCompatible(formattedCodeHtml.value, transparentBackground.value);
+
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        'text/html': new Blob([outlookHtml], { type: 'text/html' }),
+        'text/plain': new Blob([formattedCodeHtml.value], { type: 'text/plain' }),
+      }),
+    ]);
+    message.success(t('tools.code-highlighter.texts.tag-copy-html-formatted'));
+  }
+  catch (err) {
+    console.error('Clipboard error:', err);
+    message.error('Failed to copy to clipboard');
+  }
+}
 </script>
 
 <template>
@@ -113,10 +158,18 @@ const { copy: copyText } = useCopy({ source: code });
       mb-3
     />
 
-    <div flex justify-center gap-2>
+    <div flex flex-wrap justify-center gap-2>
       <n-form-item :label="t('tools.code-highlighter.texts.label-show-line-numbers')" label-placement="left">
         <n-switch v-model:value="showLineNumbers" />
       </n-form-item>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-form-item label="Transparent background" label-placement="left">
+            <n-switch v-model:value="transparentBackground" />
+          </n-form-item>
+        </template>
+        Removes the background color for better readability when pasting into Outlook or other email clients
+      </n-tooltip>
       <c-button @click="copyHtml()">
         {{ t('tools.code-highlighter.texts.tag-copy-html-formatted') }}
       </c-button>