Weird warning

[beamcode]

[Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance; Or call highlighter.dispose() to release unused instances.

Not sure if this is me or Rpc

[o-az]

@beamcode could you please please share a repro?
either link to code or https://stackblitz.com/

[beamcode]

Yeah happens on my simple personal website https://github.com/beamcode/beamcode.dev/

[b3nk3]

I think it's a react thing...

a simple refactoring sorted it for me:

let highlighterInstance: any = null;

export async function Code({ code }: { code: string }) {
  const highlightedCode = await highlightCode(code);
  return (
    <section
      dangerouslySetInnerHTML={{
        __html: highlightedCode,
      }}
    />
  );
}

async function getHighlighter() {
  if (!highlighterInstance) {
    highlighterInstance = await unified()
      .use(remarkParse)
      .use(remarkRehype)
      .use(rehypePrettyCode, {
        theme: JSON.parse(JSON.stringify(hotlineVice)),
      })
      .use(rehypeStringify);
  }
  return highlighterInstance;
}

async function highlightCode(code: string) {
  const highlighter = await getHighlighter();
  const file = await highlighter.process(code);
  return String(file);
}

[o-az]

I think it's a react thing...

a simple refactoring sorted it for me:

let highlighterInstance: any = null;



export async function Code({ code }: { code: string }) {

  const highlightedCode = await highlightCode(code);

  return (

    <section

      dangerouslySetInnerHTML={{

        __html: highlightedCode,

      }}

    />

  );

}



async function getHighlighter() {

  if (!highlighterInstance) {

    highlighterInstance = await unified()

      .use(remarkParse)

      .use(remarkRehype)

      .use(rehypePrettyCode, {

        theme: JSON.parse(JSON.stringify(hotlineVice)),

      })

      .use(rehypeStringify);

  }

  return highlighterInstance;

}



async function highlightCode(code: string) {

  const highlighter = await getHighlighter();

  const file = await highlighter.process(code);

  return String(file);

}

thanks! PR for this would be appreciated.

[Ianmello10]

I have the same issue with next-mdx-remote :

[Shiki] 160 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code to cache your highlighter instance; Or call `highlighter.dispose()` to release unused instances.

	const { frontmatter, content } = await compileMDX<PostMetadata>({
		source: contentFilePath,
		options: {
			mdxOptions: {
				remarkPlugins: [],
				rehypePlugins: [
					[
						rehypePrettyCode,
						{
							theme: "vitesse-dark",
						},
					],
					[rehypeSlug],
				],
			},

			parseFrontmatter: true,
		},
	});

i made this change in a clone of rehype-pretty-code, installed it in a next js project and the singleton warning disappeared.

import {
  type Highlighter,
  type CodeToHastOptions,
  getSingletonHighlighter as defaultGetHighlighter,
} from 'shiki'; 

getHighlighter is deprecated