[Feature request] Configuring Prism inside `@vuepress/plugin-prism` plugin

dhruvkb commented 2 years ago

Feature request

Description

I wanted to customise Prism to change the Bash functions (https://github.com/PrismJS/prism/issues/3361). Prism's recommended solution is to overwrite Prism.languages.bash.function.pattern as follows.

Prism.languages.bash.function.pattern =

To be able to do this I need to access Prism inside the resolveHighlighter function.

https://github.com/vuepress/vuepress-next/blob/6a4733f2fe3acfe72f0d7611d6f604fade44d5dc/packages/%40vuepress/plugin-prismjs/src/node/resolveHighlighter.ts#L1

Proposed Solution

I want to be able to access Prism to tweak some settings before this line where it is used for highlighting code blocks in Markdown.

https://github.com/vuepress/vuepress-next/blob/6a4733f2fe3acfe72f0d7611d6f604fade44d5dc/packages/%40vuepress/plugin-prismjs/src/node/resolveHighlighter.ts#L43

dhruvkb commented 2 years ago

I just realised that adding the following code to config.js does what I intended.

const Prism = require("prismjs");
const loadLanguages = require('prismjs/components/');

loadLanguages(['bash']);
Prism.languages.bash.function.pattern = /.../;

While I think such a function might still be helpful, feel free to close this issue if you see no further use for it.

Mister-Hope commented 2 years ago

Nice catch, just as the plugin does, prism can be modifyed one place and take affect at other places during a node process.

Mister-Hope commented 2 years ago

So pesonally, I don't think adding a function and let the plugin call it in initialization is needed. Any sences that a edit must be made between the 2 lines?

https://github.com/vuepress/vuepress-next/blob/6a4733f2fe3acfe72f0d7611d6f604fade44d5dc/packages/%40vuepress/plugin-prismjs/src/node/prismjsPlugin.ts#L30-L31

If you can list some, we can add an option.

dhruvkb commented 2 years ago

I can't think of any specific thing needed here.

Guyutongxue commented 1 year ago

But I need to manually add prismjs dependencies to package.json for writing import Prism from "prismjs"; in config file. Or vite will complain this:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prismjs' imported from .../vuepress.config.ts.033d829e.mjs
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:783:9)
    at moduleResolve (node:internal/modules/esm/resolve:832:20)
    at defaultResolve (node:internal/modules/esm/resolve:1069:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:305:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:156:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36)
 ELIFECYCLE  Command failed with exit code 1.

(I'm using pnpm.)

With manually added prismjs dependency, I need to keep its version same as @vuepress/plugin-prism's dependency version. (I've met some failure with mismatched version.) So I think it's better to add an "initialization hook" to the plugin options.

Mister-Hope commented 1 year ago

Same problem exisits with vue, vue-router @vueuse/core @vue/shared, vite @vuepress/core and so more. If you meet version mismatch very offen, consider adding pnpm.overrides field. That ensure only the version set in overrides is in the deps tree.

Anyway a re-export prism or welcomed ,as it seems no disadvantages

Guyutongxue commented 1 year ago

Same problem exisits with vue, vue-router @vueuse/core @vue/shared, vite and so more. If you meet version mismatch very offen, consider adding pnpm.overrides field. That ensure only the version set in overrides is in the deps tree.

Thanks for your suggestion!

vuepress / core