Use npm version of prism (#1981)

package.json

@@ -90,6 +90,7 @@
     "@size-limit/esbuild-why": "^8.2.6",
     "@size-limit/preset-small-lib": "^8.2.6",
     "@types/jest": "^29.0.0",
+    "@types/prismjs": "^1.26.3",
     "@types/react": "17.0.11",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
@@ -119,6 +120,7 @@
     "next-sitemap": "4.2.3",
     "npm-run-all": "4.1.5",
     "prettier": "2.3.2",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "2.7.1",

website/src/static/markdown.ts

@@ -1,6 +1,6 @@
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
-import { Prism as prism } from './prism';
+import prism from 'prismjs';
 import type { TypeDefs, CallSignature, TypeDefinition } from '../TypeDefs';
 
 export type MarkdownContext = {
@@ -23,15 +23,16 @@ export function markdown(content: string, context: MarkdownContext): string {
 
   const defs = context.defs;
 
-  // functions come before keywords
+  // functions comsidee before keywords
+  // the two following `insertBefore` do change the classes of the tokens, but is this still used? (visual output is the same)
   prism.languages.insertBefore('javascript', 'keyword', {
     var: /\b(this)\b/g,
     'block-keyword': /\b(if|else|while|for|function)\b/g,
     primitive: /\b(true|false|null|undefined)\b/g,
-    function: prism.languages.function,
+    function: prism.languages.javascript.function,
   });
 
-  prism.languages.insertBefore('javascript', {
+  prism.languages.insertBefore('javascript', 'keyword', {
     qualifier: /\b[A-Z][a-z0-9_]+/g,
   });