multiple instances when using markdown-it as a plugin

[xarthurx]

Similar issue here: #714

I'm developing a website with the nuxt3 framework, but using markdown-it instead of the default markdown processor.

I defined markdown-it as a plugin and can be called in my multiple component:

import MarkdownIt from "markdown-it";
import mdAnchor from "markdown-it-anchor";
import mdShiki from "@shikijs/markdown-it";

export default defineNuxtPlugin(async () => {
  const highlighter = await mdShiki({
				themes: {
					light: "snazzy-light",
					dark: "nord",
				},
			})

	const renderer = MarkdownIt({
		linkify: true,
		html: true,
	})
		.use(footnote)
		.use(highlighter)

	return {
		provide: {
			md: renderer,
		},
	};
});

And I often get warnings:

[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

when running the development server.

Try to find an answer on the Internet, but failed.

Anyone knows what is the proper way of use Shiki in my case?

[ericarthurc]

Move your highlight instance out off the NuxtPlugin object like:

  const highlighter = await mdShiki({
				themes: {
					light: "snazzy-light",
					dark: "nord",
				},
			})
			

export default defineNuxtPlugin(async () => {
	const renderer = MarkdownIt({
		linkify: true,
		html: true,
	})
		.use(footnote)
		.use(highlighter)

	return {
		provide: {
			md: renderer,
		},
	};
});

Keeping it in the NuxtPlugin means its going to get called over and over, just move it up to a constant at the top of the file and it will only be created once (singleton).