在LIT WebComponent中使用Prism.js
我将点亮的WebComponents与Vite +打字订阅模板一起使用。现在，我正在尝试创建自己的代码块Web-Component。对于语法突出显示，我想使用 prism js ，所以我去了他们的页面，选择了我最喜欢的语言，，选择了我最喜欢的语言，下载了CSS和JS文件，并尝试将它们添加到我的WebComponent中。
我只是将CSS文件复制到css``中，这应该很好。但是我对如何添加JS文件感到迷失。
使用的.js file：
- 这是我在tsconfig.json中
- set
“ allowjs”：true。import *作为从'../ prism.js'';in myfile.ts中的prism import *。
但是，即使我只是尝试运行prism.highlightall（）我得到。
Uncaught TypeError: prism.highlightAll is not a function
at myFile.ts:116:19
我仍然是JS/TS生态系统的新手，因此对任何帮助都非常感谢。
I use lit webcomponents with the vite + typescript template. Now i am trying to create my own code block web-component. For syntax highlighting I wanted to use prism js, so i went to their page, selected my favorite languages, downloaded both css and js file and tried adding them to my webcomponent.
I just copy-pasted the css file into an css``, which should work just fine. But i am rather lost on how to add the js file.
Here is what i did to use the .js file:
- Set
"allowJs": truein the tsconfig.json. import * as prism from '../prism.js';in myFile.ts, where i have my component.
But even if i just try to run prism.highlightAll() I get.
Uncaught TypeError: prism.highlightAll is not a function
at myFile.ts:116:19
I am still rather new to the js/ts ecosystem so any help is greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果有人找到了这个，我有点设法这样做：
npm install prismjs -s（v1.28.0）npm install @types/prismjs -d（v1.26.0）prism.highlight（code，prism.languages [语言]，语言）我从在这里
In case anyone finds this, i somewhat managed to do it:
npm install prismjs -s(v1.28.0)npm install @types/prismjs -d(v1.26.0)Prism.highlight(code, Prism.languages[language], language)css``block.I got the idea from here