vuepress-theme-plume/en/guide/code/jsfiddle/index.md

url

url
/en/guide/code/jsfiddle/index.md

The theme supports embedding JS Fiddle in Markdown files.

Configuration

This feature is disabled by default. You can enable it in the configuration file.

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      jsfiddle: true, // [!code highlight]
    },
  })
})

Syntax

Basic Syntax

@[jsfiddle](user/id)

Extended Options

@[jsfiddle theme="dark" tab="js,css,html,result" height="500px"](user/id)

• user: Username
• id: JS Fiddle identifier
• theme: Theme mode, options: "light" | "dark"
• tab: Active tabs, options: "js" | "css" | "html" | "result", multiple values separated by ",". The order determines tab arrangement, defaults to js,css,html,result
• height: Container height

Examples

Input:

@[jsfiddle](pengzhanbo/1xbwz2p9)

Output:

@jsfiddle

Input:

@[jsfiddle tab="result,js,css,html"](pengzhanbo/1xbwz2p9)

Output:

@jsfiddle tab="result,js,css,html"