1.4 KiB
1.4 KiB
title, icon, createTime, permalink
| title | icon | createTime | permalink |
|---|---|---|---|
| Code Pen | mingcute:codepen-line | 2024/04/04 10:41:58 | /guide/code/code-pen/ |
主题支持在 Markdown 文件中嵌入 CodePen。
配置
此功能默认不启用，你可以在配置文件中启用它。
export default defineUserConfig({
theme: plumeTheme({
markdown: {
codepen: true, // [!code highlight]
},
})
})
语法
简单语法：
@[codepen](user/slash)
更多选项支持：
@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)
preview: 是否渲染为预览模式editable: 是否可编辑tab: 默认显示的标签， 默认为result，多个使用,分隔theme: 主题， 可选值dark和lightheight: 容器高度， 默认为400pxwidth: 容器宽度， 默认为100%user: CodePen 用户名slash: CodePen 代码文件名
示例
输入：
@[codepen](leimapapa/RwOZQOW)
输出：
预览模式：
输入：
@[codepen preview](leimapapa/RwOZQOW)
输出：
编辑模式：
输入：
@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
输出：