Using agx files does not respect selected syntax highlighter

[meeroslav]

Please provide the environment you discovered this bug in.

https://github.com/meeroslav/test-analog/tree/agx-missing-packages

To reproduce:

• yarn
• yarn dev
• // analog reports missing marked highlight
• notice vite.config.ts specifying shiki as highlighter
• yarn add marked-highlight
• yarn dev
• // analog reports missing prismjs

Which area/package is the issue in?

vite-plugin-angular

Description

When a basic Blog template-driven Analog repo is created with shiki as a chosen code highlighter it works fine for standard markdown files.

However, using agx format ignores it and reports missing prismjs and marked-highlight, even if there is no code to highlight yet.

Please provide the exception or error you saw

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'marked-highlight' imported from /Users/miro/Dev/private/drum-n-js-slides/node_modules/@analogjs/vite-plugin-angular/src/lib/authoring/marked-setup.service.js
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prismjs' imported from /Users/miro/Dev/private/drum-n-js-slides/node_modules/@analogjs/vite-plugin-angular/src/lib/authoring/marked-setup.service.js
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

### Other information

Installing the two missing packages resolves the situation but it's suboptimal given the vite-defined `shiki` as a code highlighter.

### I would be willing to submit a PR to fix this issue

- [ ] Yes
- [ ] No

[brandonroberts]

That is correct. The highlighter does not apply to agx files yet. It's possible to build your own pipeline to use shiki though. @joshuamorony has done this with remark

[joshuamorony]

@meeroslav I've published it here if you want to use it: https://github.com/joshuamorony/analog-stuff/tree/main/packages/agx-remark-rehype

I'm using rehypePrettyCode for highlighting but, theoretically, you should be able to use any remark/rehype plugin you want

[meeroslav]

Thank you both!

I'm not super religious about shiki, I just wanted to report the error Analog throws when agx files are used.

[brandonroberts]

I see. That is unexpected behavior out of the box. I think it also has to do with yarn because it doesn't install peer dependencies out of the box.