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

Question

所以我正在尝试在我的 angular 项目中使用 VMware Clarity 项目中的代码高亮。但是我没有成功实施它。

我根据文档将这些行添加到我的 index.html 中。但这只会给我错误。

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

然后我尝试将它添加到 angular.cli 中的脚本元素。无果。

由于缺少文档和答案，我有点不知道下一步该怎么做..

[编辑] 我用 npm 安装了 prismjs。

Answer 1

您需要在 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",
    ...
],
...

有关详细信息，请参阅此文件： https://github.com/vmware/clarity/blob/new-website/angular-cli.json#L19

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

Code highlight in vmware-clarity/Angular4 not working

angular

vmware-clarity