npm.io
0.0.8 • Published 4d ago

@gpt-vis-plugin/rehype

Licence
MIT
Version
0.0.8
Deps
1
Size
6 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

rehype-gpt-vis

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

npm

Installation

pnpm add rehype-gpt-vis @antv/gpt-vis

Usage

Note: The plugin must run before syntax highlighters (e.g., rehype-highlight), otherwise the highlighter may alter code block structure and cause parsing failures.

import { rehypeGPTVis } from 'rehype-gpt-vis';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeGPTVis)
  .use(rehypeStringify)
  .process('# Hello\n\n```GPT-Vis\nvis line\ndata ...\n```');

console.log(String(html));

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 
.use(rehypeGPTVis, {
  tagName: 'vis-chart',
  keepOriginal: true,
  wrapper: true,
  theme: 'dark',
  width: 800,
  height: 400,
})

API

Export Description
rehypeGPTVis (default) Rehype 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

Keywords

rehypeunifiedplugingpt-visantvvisualizationhastmarkdownLLM