@gpt-vis-plugin/markdown-it

A markdown-it plugin that transforms GPT-Vis code blocks into <gpt-vis> Web Components.

Installation

pnpm add @gpt-vis-plugin/markdown-it @antv/gpt-vis markdown-it

Usage

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

import MarkdownIt from 'markdown-it';
import { gptVisMarkdownItPlugin } from '@gpt-vis-plugin/markdown-it';

const md = new MarkdownIt();
md.use(gptVisMarkdownItPlugin);

const html = md.render('# 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 |

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

API

| Export | Description | | ---------------------------------- | -------------------------------------------------------------- | | gptVisMarkdownItPlugin (default) | markdown-it plugin function | | isVisSyntax(text) | Check if a string is valid GPT-Vis syntax | | registerGPTVisElement() | Register the <gpt-vis> Web Component (auto-called on import) |

License

MIT