如何在SvelteKit的MDSVEX Markdown页面中嵌入CodePen？

核心问题分析 #

你遇到的问题主要来自两个点：

1. MDSVEX默认会过滤Markdown中的原生<script>标签，导致CodePen的异步脚本无法加载；
2. SvelteKit的内容安全策略（CSP）可能限制了iframe或外部脚本的执行权限，只显示边框却加载不了内容。

方案一：用Svelte组件封装CodePen嵌入（推荐） #

这种方式能避开MDSVEX的脚本过滤，同时利用Svelte的生命周期处理异步脚本加载：

1. 创建CodePen.svelte组件

<script>
  export let penId;
  export let height = '400';
  export let theme = 'light';
  export let defaultTab = 'html,result';
  export let user;

  import { onMount } from 'svelte';

  onMount(() => {
    // 客户端动态加载CodePen嵌入脚本
    const script = document.createElement('script');
    script.src = 'https://cpwebassets.codepen.io/assets/embed/ei.js';
    script.async = true;
    document.body.appendChild(script);

    // 组件销毁时清理脚本
    return () => document.body.removeChild(script);
  });
</script>

<div class="codepen" 
     data-height={height} 
     data-theme-id={theme} 
     data-default-tab={defaultTab} 
     data-slug-hash={penId} 
     data-user={user}
     style="height: {height}px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>Embedded Pen by {user} on CodePen.</span>
</div>

2. 在Markdown页面中使用组件
   在你的+page.md中直接导入并使用组件：

---
title: 实验示例
---

<script>
  import CodePen from '$lib/components/CodePen.svelte';
</script>

<CodePen penId="YOUR_PEN_ID" user="YOUR_CODEPEN_USERNAME" height="500" />

3. 配置SvelteKit的CSP
   在svelte.config.js中添加CSP指令，允许CodePen的资源加载：

export default {
  kit: {
    csp: {
      directives: {
        'script-src': ['self', 'https://cpwebassets.codepen.io'],
        'style-src': ['self', 'https://cpwebassets.codepen.io'],
        'frame-src': ['https://codepen.io'],
      },
    },
  },
  // 其他配置...
};

方案二：直接使用iframe（简化版） #

如果不想写组件，调整CSP后直接用iframe也能生效：

<iframe 
  height="400" 
  style="width: 100%;" 
  scrolling="no" 
  title="Embedded CodePen" 
  src="https://codepen.io/YOUR_USERNAME/embed/YOUR_PEN_ID?default-tab=html%2Cresult" 
  frameborder="no" 
  loading="lazy" 
  allowtransparency="true" 
  allowfullscreen="true">
</iframe>

确保CSP的frame-src包含https://codepen.io，否则iframe会被拦截。

关键注意事项 #

• 确保MDSVEX配置正确：在svelte.config.js中注册.md扩展名，让SvelteKit识别Markdown页面；
• 所有外部资源的加载都需要符合SvelteKit的CSP规则，这是很多嵌入失败的核心原因；
• 组件方式更易维护，适合批量嵌入多个CodePen项目。

内容的提问来源于stack exchange，提问作者russellmania