在lit网络组件中使用prism.js

Question

我使用lit组件和vite +类型记录模板。现在我正在尝试创建我自己的代码块web组件。为了突出语法，我想要使用棱镜js，所以我去了他们的页面，选择了我最喜欢的语言，下载了css和js文件，并尝试将它们添加到我的went组件中。

我只是把css文件复制到一个css``中，它应该工作得很好。但是我不知道如何添加js文件。

下面是我在使用.js文件时所做的工作：

1. 在"allowJs": true中设置tsconfig.json。
2. import * as prism from '../prism.js'; in myFile.ts，在那里我有我的组件。

但是，即使我只是尝试运行prism.highlightAll()，我也能得到。

Uncaught TypeError: prism.highlightAll is not a function
    at myFile.ts:116:19

对于js/ts生态系统，我仍然是相当新的，所以我们非常感谢任何帮助。

Answer 1

如果有人发现了这一点，我就设法做到了：

1. npm install prismjs -s (v1.28.0)
2. npm install @types/prismjs -d (v1.26.0)
3. 在我使用webcomponent的.ts文件中，请执行以下操作：

import * as Prism from 'prismjs';
import 'prismjs/components/prism-typescript'; // Language
import 'prismjs/components/prism-fsharp'; // Language

1. 按预期使用：Prism.highlight(code, Prism.languages[language], language)
2. 我复制并粘贴到一个点燃的webcomponent css``块中。

我是从这里那里得到这个想法的