code block highlight js

package.json

@@ -35,8 +35,6 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.25.1",
 		"@sveltejs/package": "^2.0.0",
-		"@types/prismjs": "^1.26.1",
-		"prismjs": "^1.29.0",
 		"publint": "^0.1.9",
 		"sass": "^1.68.0",
 		"svelte": "^4.0.5",
@@ -50,7 +48,8 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^0.0.2"
+		"@hyvor/icons": "^0.0.2",
+		"highlight.js": "^11.9.0"
 	},
 	"publishConfig": {
 		"access": "public"

src/lib/components/CodeBlock/CodeBlock.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
 
-    import './prism.scss';
+    //import './prism.scss';
+    import './hljs.scss';
 
-    type InputLanguage = 'html' | 'ts' | 'css' | 'svelte' | 'jsx';
+    type InputLanguage = 
+        'html' |
+        'css' |
+        'js' |
+        'ts' |
+        
+        'svelte' |
+        'jsx';
 
     export let code: string;
     export let language: InputLanguage = 'html';
 
     const languagesMap : Partial<Record<InputLanguage, Language>> = {
-        svelte: 'tsx',
+        svelte: 'html',
+        jsx: 'js'
     }
     const languageCode = (languagesMap[language] || language) as Language;
 
-    import getCode, { type Language } from './prism.js';
+    import getCode, { type Language } from './getCode.js';
 
 </script>
 
-<pre class="language-{languageCode}"><code>{@html getCode(code, languageCode)}</code></pre>
+<pre class="language-{languageCode} hljs"><code>{@html getCode(code, languageCode)}</code></pre>

src/lib/components/CodeBlock/prism.ts → src/lib/components/CodeBlock/getCode.ts

@@ -1,19 +1,15 @@
-import Prism from 'prismjs';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import ts from 'highlight.js/lib/languages/typescript';
 
-/**
- * This is to prevent Prism not defined error in development
- * in SvelteKit
- */
-if (typeof window !== 'undefined') {
-    // @ts-ignore
-    window.Prism = Prism;
-}
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('ts', ts);
 
-import 'prismjs/components/prism-typescript.js';
-import 'prismjs/components/prism-jsx.js';
-import 'prismjs/components/prism-tsx.js';
-
-export type Language = 'html' | 'css' | 'js' | 'ts' | 'jsx' | 'tsx';
+export type Language = 'html' | 'css' | 'js' | 'ts';
 
 export default function getCode(code: string, language: Language) {
 
@@ -46,6 +42,6 @@ export default function getCode(code: string, language: Language) {
 
     ret = lines.join("\n");
 
-    return Prism.highlight(ret, Prism.languages[language], language);
+    return hljs.highlight(ret, { language }).value;
 
 }