@gpt-vis-plugin/marked

A Marked extension that transforms GPT-Vis code blocks into <gpt-vis> Web Components.

Installation

pnpm add @gpt-vis-plugin/marked @antv/gpt-vis marked

Usage

Note: The extension must be registered before any syntax highlighting extension, otherwise the highlighter may alter code block structure and cause parsing failures.

import { Marked } from 'marked';
import { markedGPTVis } from '@gpt-vis-plugin/marked';

const marked = new Marked();
marked.use(markedGPTVis());

const html = await marked.parse('# Hello\n\n```GPT-Vis\nvis line\ndata ...\n```');

Options

| Option | Type | Default | Description | | -------------- | --------------------------------------------- | ----------- | ------------------------------------------------ | | tagName | string | 'gpt-vis' | Custom container tag name | | keepOriginal | boolean | false | Keep the original code block as fallback content | | width | number | undefined | Default chart width (px) | | height | number | undefined | Default chart height (px) | | theme | 'default' \| 'light' \| 'dark' \| 'academy' | 'default' | Default chart theme | | wrapper | boolean | false | Enable the wrapper container |

marked.use(
  markedGPTVis({
    tagName: 'vis-chart',
    keepOriginal: true,
    wrapper: true,
    theme: 'dark',
    width: 800,
    height: 400,
  }),
);

API

| Export | Description | | ------------------------- | -------------------------------------------------------------- | | markedGPTVis (default) | Marked extension factory (() => MarkedExtension) | | isVisSyntax(text) | Check if a string is valid GPT-Vis syntax | | registerGPTVisElement() | Register the <gpt-vis> Web Component (auto-called on import) |

License

MIT