@lil-el/codepen

⚠️ 注意：此 npm 包仅供个人学习和测试使用，请勿用于任何商业用途。

Guide

基于 vue3 的 代码编辑器 组件。

features

• 代码运行效果页面的 iframe 默认采用 esm 方式加载脚本；
• 支持主题配色，设置主题配色 --codepen-color；
• 默认使用 Service Worker 缓存编译后的资源，当 Service Worker 失败时会降级为 srcdoc 方式；

Usage

为避免 tailwindcss 样式覆盖问题，在你的项目/应用中安装 tailwindcss 并配置；

需要安装 @tailwindcss/vite, tailwindcss;

Install

pnpm i @tailwindcss/vite tailwindcss -D

pnpm i @lil-el/codepen

Vite Config

需要配置 tailwindcss 插件。

同时由于该组件默认使用 Service Worker 缓存编译后的资源，所以需要在 vite.config.js 中配置如下代码来拷贝 sw.js 文件：

import tailwindcss from "@tailwindcss/vite";
import viteCopySw from "@lil-el/codepen/vite-copy-sw";

export default defineConfig({
  plugins: [viteCopySw(), tailwindcss()],
});

Tailwind Config

tailwind.config.js 中的 content 需要配置依赖包的路径。

tailwind.config.js

export default {
  content: ["./node_modules/@lil-el/codepen/dist/**/*.{js}", "./node_modules/@lil-el/ui/dist/**/*.{js}"],
};

Import

在入口的样式文件中，引入 @lil-el/code/css 样式。

不应该在 main.js 中引入 @lil-el/code/css 样式；

style.css:

@import "tailwindcss";
@import "@lil-el/codepen/css";
@config "../tailwind.config.js";

在线编辑器 App

<codepen />

<script setup>
  import { codepen } from "@lil-el/codepen";
</script>

单个代码片段 App

<codepen title="Hello" author="Mino" date="2025-05-30" project="html" :editors="editors" />

<script setup>
  import { codepen } from "@lil-el/codepen";

  const editors = reactive({
    html: {
      id: 1,
      code: "<div id='hello'>Hello world!</div>",
    },
    css: {
      id: 2,
      code: "#hello { color: red; }",
    },
    javascript: {
      id: 3,
      code: `
      function hello() {
        alert('Hello world!');
      }

      const ele = document.getElementById('hello');
      ele.addEventListener('click', hello);
    `,
    },
  });
</script>

codepen

props

• title: String
• author: String
• date: String
• project: "html" | "vue3" | "react"
• editors: Object
  • project: html

    type htmlEditors = {
      html: { id: number; code: string };
      css?: { id: number; code: string };
      javascript?: { id: number; code: string };
    };

  • project: vue3

    type vue3Editors = {
      mainJs: { id: number; code: string };
      appVue: { id: number; code: string };
    };

  • project: react

    type reactEditors = {
      mainJs: { id: number; code: string };
      appJs: { id: number; code: string };
    };