vmware-clarity/Angular4 中的代码高亮显示不起作用答案

【问题标题】：Code highlight in vmware-clarity/Angular4 not workingvmware-clarity/Angular4 中的代码高亮显示不起作用
【发布时间】：2017-10-25 22:57:46
【问题描述】：

因此，我尝试在我的 Angular 项目中使用 VMware Clarity 项目中的 Code Highlight。但我没有成功实施它。

我根据文档将这些行添加到我的 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。

【问题讨论】：

你的 package.json 中是否有 prismjs，你是否安装了所有依赖项？
是的，我有 prismjs 和 @types/prismjs。编辑了问题

标签： angular vmware-clarity

【解决方案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

【讨论】：

不知道为什么以前不起作用。但现在它显示一个黄色框。但是当我定义 (clr-code-highlight="language-javascript") 并且在我有 {{code}} 的代码标签内时，代码不会显示