Use highlight.js (#15)

.github/workflows/deploy-to-spaces.yml

@@ -17,4 +17,4 @@ jobs:
       - name: Push to hub
         env:
           HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
-        run: git push https://mishig:$HF_DEPLOYMENT_TOKEN@huggingface.co/spaces/huggingface-projects/inference-playground main
+        run: git push https://mishig:$HF_DEPLOYMENT_TOKEN@huggingface.co/spaces/huggingface-projects/inference-playground main

package.json

@@ -17,6 +17,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"autoprefixer": "^10.4.19",
+		"highlight.js": "^11.10.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",

pnpm-lock.yaml

@@ -34,6 +34,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
+  highlight.js:
+    specifier: ^11.10.0
+    version: 11.10.0
   postcss:
     specifier: ^8.4.38
     version: 8.4.38
@@ -1067,6 +1070,11 @@ packages:
     dependencies:
       function-bind: 1.1.2
 
+  /highlight.js@11.10.0:
+    resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
     dev: true

src/app.css

@@ -1,3 +1,4 @@
+@import 'highlight.js/styles/atom-one-light';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/lib/components/CodeSnippets.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import { type ChatCompletionInputMessage } from '@huggingface/tasks';
+	import hljs from 'highlight.js/lib/core';
+	import javascript from 'highlight.js/lib/languages/javascript';
+	import python from 'highlight.js/lib/languages/python';
+	import bash from 'highlight.js/lib/languages/bash';
 
 	export let model: string;
 	export let streaming: Boolean;
@@ -7,6 +11,16 @@
 	export let maxTokens: number;
 	export let messages: ChatCompletionInputMessage[];
 
+	type Langauge = 'javascript' | 'python' | 'bash';
+
+	hljs.registerLanguage('javascript', javascript);
+	hljs.registerLanguage('python', python);
+	hljs.registerLanguage('bash', bash);
+
+	function highlight(code: string, language: Langauge) {
+		return hljs.highlight(code, { language }).value;
+	}
+
 	const npmSnippet = `import { HfInference } from '@huggingface/inference'
 
 const hf = new HfInference('your access token')`;
@@ -64,15 +78,19 @@ for await (const chunk of hf.chatCompletionStream({
 		<h2 class="font-semibold">Install and instantiate</h2>
 	</div>
 	<pre
-		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{npmSnippet}</pre>
+		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
+			npmSnippet,
+			'javascript'
+		)}</pre>
 
 	<div class="px-4 pb-4 pt-6">
 		<h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
 	</div>
 
 	<pre
-		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{streaming
-			? streamingSnippet
-			: nonStreamingSnippet}
+		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
+			streaming ? streamingSnippet : nonStreamingSnippet,
+			'javascript'
+		)}
   </pre>
 </div>