Syntax highlight does not work properly

[jannikbuscha]

Since the latest update I now have the problem that the syntax highlighting no longer works properly.

The syntax highlightning only works if you import 'highlight.js/lib/core' and the corresponding language:

This is the result of working with 'highlight.js/lib/common':

[joshgoebel]

Is there some error in console? Need more specifics.

Since the latest update

Clarify what is the "latest update" and what version you are running?

[jannikbuscha]

Is there some error in console? Need more specifics.

Since the latest update

Clarify what is the "latest update" and what version you are running?

I have now set up a completely new project and implemented everything as described. I also get no error displayed in the console:

[jannikbuscha]

Is there some error in console? Need more specifics.

Since the latest update

Clarify what is the "latest update" and what version you are running?

I have now set up a completely new project and implemented everything as described. I also get no error displayed in the console:

With correct style import*

[joshgoebel]

Can you push your sample project to GitHub with build/run script?

[jannikbuscha]

Can you push your sample project to GitHub with build/run script?

https://github.com/jannikbuscha/highlightjs-vue3-ts

[joshgoebel]

This also pulls in Highlight.js 10.7 via "cli-highlight"... that's been known to cause potential problems just to point out one thing.

[Trinovantes]

This is actually expected behavior

By default, only highlight.js/lib/core is imported by this plugin which means no language is supported

Using import hljs from 'highlight.js/lib/common'; will actually not do anything with modern bundlers since they'll see this as unused import and automatically remove it. Instead use import 'highlight.js/lib/common'; as this will indicate that this import is a side effect and should not be optimized out

- import hljs from "highlight.js/lib/common";
+ import "highlight.js/lib/common";

The README should be updated https://github.com/highlightjs/vue-plugin/blob/main/README.md?plain=1#L62

[joshgoebel]

@Trinovantes Thanks for jumping in here!

[jannikbuscha]

This is actually expected behavior

By default, only highlight.js/lib/core is imported by this plugin which means no language is supported

Using import hljs from 'highlight.js/lib/common'; will actually not do anything with modern bundlers since they'll see this as unused import and automatically remove it. Instead use import 'highlight.js/lib/common'; as this will indicate that this import is a side effect and should not be optimized out

- import hljs from "highlight.js/lib/common";
+ import "highlight.js/lib/common";

The README should be updated https://github.com/highlightjs/vue-plugin/blob/main/README.md?plain=1#L62

Thank you very much!

[joshgoebel]

I'd suggest modern builders perhaps have poor defaults though? If this was my project I'd want at least a warning if an import was being entirely removed.

[Trinovantes]

Linters like eslint-plugin-unused-imports would warn about this case