Missing configuration for prismjs

[zmadel]

Hi,
There is a missing configuration that need to be added to the documentation to get prismjs code highlighting work.
These imports need to be added also to the component TS file before using tag for code highlighting, without it the code highlighting doesn't work for prismjs custom components
import "prismjs/components/prism-typescript";
import "prismjs/components/prism-json";
import "prismjs/components/prism-scss";
import "prismjs/plugins/line-numbers/prism-line-numbers";

[jfcere]

Hi @zmadel,

This is documented in the README.md: https://github.com/jfcere/ngx-markdown#syntax-highlight

The example in the documentation shows how to add those files to scripts section of angular.json file when using Angular-CLI but of course you can also use import statement to do so. The same goes for the CSS files which can be imported in the main index.scss file.

[zmadel]

Hi @jfcere
I know that the doumentation mentioned that it should be added to angular.json
but it should be added also to the angular component that is using the markdown tag to work.

[jfcere]

Adding the Prism files to every component is not necessary, I would suggest you take a look at the ngx-markdown demo folder as a reference.

You won't find any import regarding Prism files elsewhere than in the angular.json file at the root of the repository.

ngx-markdown/angular.json

Lines 46 to 59 in 88b9b44

	"node_modules/prismjs/prism.js",
	"node_modules/prismjs/plugins/highlight-keywords/prism-highlight-keywords.min.js",
	"node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js",
	"node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js",
	"node_modules/prismjs/components/prism-bash.min.js",
	"node_modules/prismjs/components/prism-c.min.js",
	"node_modules/prismjs/components/prism-cpp.min.js",
	"node_modules/prismjs/components/prism-diff.min.js",
	"node_modules/prismjs/components/prism-javascript.min.js",
	"node_modules/prismjs/components/prism-latex.min.js",
	"node_modules/prismjs/components/prism-markup.min.js",
	"node_modules/prismjs/components/prism-markdown.min.js",
	"node_modules/prismjs/components/prism-python.min.js",
	"node_modules/prismjs/components/prism-typescript.min.js",

If you are experiencing any issue in a public repository, please feel free to share it with me and I'll be happy take a look at it to help you find the source of the problem.

[winterle]

Hi all,
i ran into the exact same problem.
It seems like when including "prismjs/components/prism-php.min.js" all other prism lexing fails.
Does commenting that line out solve your problem, @jfcere ?
I will continue to investigate, but it seems to me this is a prism bug, not related to this repository.

[memcardio]

I can confirm that removing the file @winterle mentioned fixes the issue of getting

TypeError: Cannot read property 'tokenizePlaceholders' of undefined

[jfcere]

With a quick search through Prism issues I found this comment: PrismJS/prism#1400 (comment)

Let me know if it fixes your issue.

[jfcere]

I haven't heard from anybody for 3 weeks, since the problem comes from Prism library and the solution has been provided I will close the issue.

If you are still having issues after applying the solution provided by Prism, please feel free to respond and I will reopen if necessary.