mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
/**
|
|
* @[jsfiddle](user/id)
|
|
* @[jsfiddle theme="dark" tab="js,css,html,result"](user/id)
|
|
*/
|
|
import type { PluginWithOptions } from 'markdown-it'
|
|
import type { JSFiddleTokenMeta } from '../../../shared/index.js'
|
|
import { parseRect } from '../../utils/parseRect.js'
|
|
import { resolveAttrs } from '../../utils/resolveAttrs.js'
|
|
import { stringifyAttrs } from '../../utils/stringifyAttrs.js'
|
|
import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
|
|
|
|
export const jsfiddlePlugin: PluginWithOptions<never> = (md) => {
|
|
createEmbedRuleBlock<JSFiddleTokenMeta>(md, {
|
|
type: 'jsfiddle',
|
|
syntaxPattern: /^@\[jsfiddle([^\]]*)\]\(([^)]*)\)/,
|
|
meta([, info, source]) {
|
|
const { width, height, title, tab, theme } = resolveAttrs<JSFiddleTokenMeta>(info).attrs
|
|
|
|
return {
|
|
width: width ? parseRect(width) : '100%',
|
|
height: height ? parseRect(height) : '400px',
|
|
source,
|
|
title: title || 'JS Fiddle',
|
|
tab: tab?.replace(/\s+/g, '') || 'js,css,html,result',
|
|
theme,
|
|
}
|
|
},
|
|
content: meta => `<JSFiddleViewer${stringifyAttrs(meta)} />`,
|
|
})
|
|
}
|