CodePen

在 Markdown 嵌入 CodePen 示例。

示例

See Solar System animation - Pure CSS by kowlor on CodePen.

一个使用用户和 Slug Hash 的案例

<CodePen
  user="kowlor"
  slug-hash="ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Solar System animation - Pure CSS by kowlor on CodePen.

一个使用链接的案例

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See Envelope w/ Hearts by kowlor on CodePen.

一个点击运行的案例

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Envelope w/ Hearts"
  status="clicktorun"
  :theme="$isDarkMode? 'dark': 'light'"
/>

选项

linkstring

CodePen 项目链接。

user必填string

CodePen 用户。未设置 link 时为必填。

slugHash必填string

CodePen 项目 slug hash。未设置 link 时为必填。

titlestring

CodePen 项目标题。

heightnumber

默认值380

以 px 为单位的编辑器高度。

theme"default" | "light" | "dark"

默认值"default"

编辑器主题。

status"autoload" | "preview" | "clicktorun"

默认值"preview"

CodePen 嵌入演示状态。

• "autoload": 页面加载时会加载 demo。
• "preview": 演示的代码会被加载并显示预览按钮。
• "clicktorun": 只有在用户单击“运行代码”按钮后才会加载演示。

defaultTabstring[]

默认值["result"]

编辑器默认打开的选项卡。