How to register a highlight language support for shiki?

[MonoLogueChi]

I want to register highlighting support to caddy, now the configuration file is ready.

I read some docs and now have the following idea, but I have some problems.

import { shikiPlugin } from "@vuepress/plugin-shiki";
import { getDirname, path } from "@vuepress/utils";
import { BUNDLED_LANGUAGES } from "shiki";

import type { ILanguageRegistration } from "shiki";

import caddyfile from "./caddyfile.tmLanguage.json" assert { type: "json" };

const __dirname = getDirname(import.meta.url);

const caddyfileLanguage: ILanguageRegistration = {
  id: "Caddyfile",
  scopeName: "source.Caddyfile",
  path: path.resolve(__dirname, "./caddyfile.tmLanguage.json"),
  // grammar: caddyfile,
  aliases: ["caddyfile", "caddy"],
};

BUNDLED_LANGUAGES.push(caddyfileLanguage);

export default shikiPlugin({
  theme: "vitesse-light",
  langs: BUNDLED_LANGUAGES,
});

I have a few questions to ask.

• Is there any mistake in my thinking, if not, the following problems need to be solved.
• BUNDLED_LANGUAGES, can I import from @vuepress/plugin-shiki instead of shiki. Or, is there a way to register a language highlighting support without breaking the configuration of loading all language highlighting by default
• The path parameter, this is the relative directory of node_modules\shiki\languages, how should I fill in the parameters when I want to register my own configuration file. Now reports the error as Error: ENOENT: no such file or directory, open 'D:\Users\mc\Documents\GitHub\blog.xxwhite.com\node_modules\.pnpm\[email protected]\node_modules\shiki\languages\D:\Users\mc\Documents\GitHub\blog.xxwhite.com\docs\.vuepress\config\plugins\shiki\caddyfile.tmLanguage.json'
• How to configure grammar parameters

[MonoLogueChi]

The following configuration seems to be usable

import { shikiPlugin } from "@vuepress/plugin-shiki";
import { BUNDLED_LANGUAGES, } from "shiki";

import caddyfile from "./caddyfile.tmLanguage.json" assert { type: "json" };

const caddyfileLanguage = {
  id: "Caddyfile",
  scopeName: "source.Caddyfile",
  grammar: caddyfile,
  aliases: ["caddyfile", "caddy"],
};

// @ts-ignore
BUNDLED_LANGUAGES.push(caddyfileLanguage);

export default shikiPlugin({
  theme: "vitesse-light",
  langs: BUNDLED_LANGUAGES,
});

but one more question, can I import from @vuepress/plugin-shiki instead of shiki