1

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:

  1. Set "allowJs": true in the tsconfig.json.
  2. 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.

Kevin Frey
  • 59
  • 5

1 Answers1

1

In case anyone finds this, i somewhat managed to do it:

  1. npm install prismjs -s (v1.28.0)
  2. npm install @types/prismjs -d (v1.26.0)
  3. In my .ts file with the webcomponent do:
import * as Prism from 'prismjs';
import 'prismjs/components/prism-typescript'; // Language
import 'prismjs/components/prism-fsharp'; // Language
  1. Use it as expected: Prism.highlight(code, Prism.languages[language], language)
  2. I copy&pasted the css into an lit webcomponent css`` block.

I got the idea from here

Kevin Frey
  • 59
  • 5