38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
/**
|
|
* @[jsfiddle](user/id)
|
|
* @[jsfiddle theme="dark" tab="js,css,html,result"](user/id)
|
|
*/
|
|
import type { PluginWithOptions } from 'markdown-it'
|
|
import { resolveAttrs } from '../utils/resolveAttrs.js'
|
|
import { parseRect } from '../utils/parseRect.js'
|
|
import type { JSFiddleTokenMeta } from '../../shared/jsfiddle.js'
|
|
import { createRuleBlock } from '../utils/createRuleBlock.js'
|
|
|
|
export const jsfiddlePlugin: PluginWithOptions<never> = (md) => {
|
|
createRuleBlock<JSFiddleTokenMeta>(md, {
|
|
type: 'jsfiddle',
|
|
syntaxPattern: /^@\[jsfiddle([^\]]*)\]\(([^)]*)\)/,
|
|
meta([, info = '', source]) {
|
|
const { attrs } = resolveAttrs(info)
|
|
const [user, id] = source.split('/')
|
|
|
|
return {
|
|
width: attrs.width ? parseRect(attrs.width) : '100%',
|
|
height: attrs.height ? parseRect(attrs.height) : '400px',
|
|
user,
|
|
id,
|
|
title: attrs.title || 'JS Fiddle',
|
|
tab: attrs.tab?.replace(/\s+/g, '') || 'js,css,html,result',
|
|
theme: attrs.theme || 'dark',
|
|
}
|
|
},
|
|
content: ({ title = 'JS Fiddle', height, width, user, id, tab, theme }) => {
|
|
theme = theme === 'dark' ? '/dark/' : ''
|
|
|
|
const link = `https://jsfiddle.net/${user}/${id}/embedded/${tab}${theme}`
|
|
const style = `width:${width};height:${height};margin:16px auto;border:none;border-radius:5px;`
|
|
return `<iframe class="js-fiddle-iframe-wrapper" style="${style}" title="${title}" src="${link}" allowfullscreen="true" allowpaymentrequest="true"></iframe>`
|
|
},
|
|
})
|
|
}
|