mishig HF staff commited on
Commit
877b369
1 Parent(s): 3d94876

Use highlight.js (#15)

Browse files
.github/workflows/deploy-to-spaces.yml CHANGED
@@ -17,4 +17,4 @@ jobs:
17
  - name: Push to hub
18
  env:
19
  HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
20
- run: git push https://mishig:[email protected]/spaces/huggingface-projects/inference-playground main
 
17
  - name: Push to hub
18
  env:
19
  HF_DEPLOYMENT_TOKEN: ${{ secrets.HF_DEPLOYMENT_TOKEN }}
20
+ run: git push https://mishig:[email protected]/spaces/huggingface-projects/inference-playground main
package.json CHANGED
@@ -17,6 +17,7 @@
17
  "@sveltejs/kit": "^2.0.0",
18
  "@sveltejs/vite-plugin-svelte": "^3.0.0",
19
  "autoprefixer": "^10.4.19",
 
20
  "postcss": "^8.4.38",
21
  "prettier": "^3.1.1",
22
  "prettier-plugin-svelte": "^3.1.2",
 
17
  "@sveltejs/kit": "^2.0.0",
18
  "@sveltejs/vite-plugin-svelte": "^3.0.0",
19
  "autoprefixer": "^10.4.19",
20
+ "highlight.js": "^11.10.0",
21
  "postcss": "^8.4.38",
22
  "prettier": "^3.1.1",
23
  "prettier-plugin-svelte": "^3.1.2",
pnpm-lock.yaml CHANGED
@@ -34,6 +34,9 @@ devDependencies:
34
  autoprefixer:
35
  specifier: ^10.4.19
36
  version: 10.4.19([email protected])
 
 
 
37
  postcss:
38
  specifier: ^8.4.38
39
  version: 8.4.38
@@ -1067,6 +1070,11 @@ packages:
1067
  dependencies:
1068
  function-bind: 1.1.2
1069
 
 
 
 
 
 
1070
1071
  resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
1072
  dev: true
 
34
  autoprefixer:
35
  specifier: ^10.4.19
36
  version: 10.4.19([email protected])
37
+ highlight.js:
38
+ specifier: ^11.10.0
39
+ version: 11.10.0
40
  postcss:
41
  specifier: ^8.4.38
42
  version: 8.4.38
 
1070
  dependencies:
1071
  function-bind: 1.1.2
1072
 
1073
1074
+ resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
1075
+ engines: {node: '>=12.0.0'}
1076
+ dev: true
1077
+
1078
1079
  resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
1080
  dev: true
src/app.css CHANGED
@@ -1,3 +1,4 @@
 
1
  @tailwind base;
2
  @tailwind components;
3
  @tailwind utilities;
 
1
+ @import 'highlight.js/styles/atom-one-light';
2
  @tailwind base;
3
  @tailwind components;
4
  @tailwind utilities;
src/lib/components/CodeSnippets.svelte CHANGED
@@ -1,5 +1,9 @@
1
  <script lang="ts">
2
  import { type ChatCompletionInputMessage } from '@huggingface/tasks';
 
 
 
 
3
 
4
  export let model: string;
5
  export let streaming: Boolean;
@@ -7,6 +11,16 @@
7
  export let maxTokens: number;
8
  export let messages: ChatCompletionInputMessage[];
9
 
 
 
 
 
 
 
 
 
 
 
10
  const npmSnippet = `import { HfInference } from '@huggingface/inference'
11
 
12
  const hf = new HfInference('your access token')`;
@@ -64,15 +78,19 @@ for await (const chunk of hf.chatCompletionStream({
64
  <h2 class="font-semibold">Install and instantiate</h2>
65
  </div>
66
  <pre
67
- 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>
 
 
 
68
 
69
  <div class="px-4 pb-4 pt-6">
70
  <h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
71
  </div>
72
 
73
  <pre
74
- 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
75
- ? streamingSnippet
76
- : nonStreamingSnippet}
 
77
  </pre>
78
  </div>
 
1
  <script lang="ts">
2
  import { type ChatCompletionInputMessage } from '@huggingface/tasks';
3
+ import hljs from 'highlight.js/lib/core';
4
+ import javascript from 'highlight.js/lib/languages/javascript';
5
+ import python from 'highlight.js/lib/languages/python';
6
+ import bash from 'highlight.js/lib/languages/bash';
7
 
8
  export let model: string;
9
  export let streaming: Boolean;
 
11
  export let maxTokens: number;
12
  export let messages: ChatCompletionInputMessage[];
13
 
14
+ type Langauge = 'javascript' | 'python' | 'bash';
15
+
16
+ hljs.registerLanguage('javascript', javascript);
17
+ hljs.registerLanguage('python', python);
18
+ hljs.registerLanguage('bash', bash);
19
+
20
+ function highlight(code: string, language: Langauge) {
21
+ return hljs.highlight(code, { language }).value;
22
+ }
23
+
24
  const npmSnippet = `import { HfInference } from '@huggingface/inference'
25
 
26
  const hf = new HfInference('your access token')`;
 
78
  <h2 class="font-semibold">Install and instantiate</h2>
79
  </div>
80
  <pre
81
+ 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(
82
+ npmSnippet,
83
+ 'javascript'
84
+ )}</pre>
85
 
86
  <div class="px-4 pb-4 pt-6">
87
  <h2 class="font-semibold">{streaming ? 'Streaming API' : 'Non-Streaming API'}</h2>
88
  </div>
89
 
90
  <pre
91
+ 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(
92
+ streaming ? streamingSnippet : nonStreamingSnippet,
93
+ 'javascript'
94
+ )}
95
  </pre>
96
  </div>