vmware-clarity / Angular4中的代码突出显示不起作用

Question

So I'm trying to use the Code Highlight from the VMware Clarity project in my angular project. But I am having no succes in implementing it succesful.

I added these lines to my index.html as per documentation. But that only gives me errors.

<link rel="stylesheet" href="node_modules/prismjs/themes/prism-solarizedlight.css">
<script src="node_modules/prismjs/prism.js"></script>
<script src="node_modules/prismjs/components/prism-typescript.min.js"></script>

I then tried adding it to the scripts element in the angular.cli. To no avail.

I'm kinda lost on what to do next since documentation and answers are lacking..

[Edit] I do have prismjs installed with npm.

Answer 1

You need to add the stylesheets and the scripts in angular-cli.json

...
"styles": [
    ...
    "../node_modules/clarity-ui/clarity-ui.min.css",
    "../node_modules/prismjs/themes/prism-solarizedlight.css",
    ...
],
"scripts": [
    ...  
    "../node_modules/prismjs/prism.js",
    "../node_modules/prismjs/components/prism-typescript.min.js",
    ...
],
...

Refer to this file for more info: https://github.com/vmware/clarity/blob/new-website/angular-cli.json#L19