Search code examples
angularvmware-clarity

Code highlight in vmware-clarity/Angular4 not working


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>

Errors 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.


Solution

  • 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