feat: using svelte highlight library for code snippets

packages/frontend/package.json

@@ -36,6 +36,7 @@
     "postcss-load-config": "^5.0.3",
     "svelte": "4.2.12",
     "svelte-fa": "^4.0.2",
+    "svelte-highlight": "^7.6.0",
     "svelte-markdown": "^0.4.1",
     "svelte-preprocess": "^5.1.3",
     "tailwindcss": "^3.4.3",

packages/frontend/src/lib/code/CodeHighlight.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { HighlightAuto, LineNumbers } from 'svelte-highlight';
+import githubDark from 'svelte-highlight/styles/github-dark';
+
+export let code: string;
+</script>
+
+<svelte:head>
+  <style>
+  .hljs {
+    background: #0f0f11 !important;
+  }
+  </style>
+  {@html githubDark}
+</svelte:head>
+
+<HighlightAuto code="{code}" let:highlighted>
+  <LineNumbers highlighted="{highlighted}" --langtag-background="#0f0f11" wrapLines />
+</HighlightAuto>

packages/frontend/src/lib/code/CodeHightlight.spec.ts

@@ -0,0 +1,34 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import CodeHighlight from '/@/lib/code/CodeHighlight.svelte';
+
+test('code should be visible', async () => {
+  render(CodeHighlight, {
+    code: 'print("Hello world")',
+  });
+
+  const print = screen.getByText('print');
+  expect(print).toBeDefined();
+
+  const str = screen.getByText('"Hello world"');
+  expect(str).toBeDefined();
+});

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -11,6 +11,7 @@ import type { LanguageVariant } from 'postman-code-generators';
 import { studioClient } from '/@/utils/client';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
+import CodeHighlight from '/@/lib/code/CodeHighlight.svelte';
 
 export let containerId: string | undefined = undefined;
 
@@ -184,9 +185,7 @@ onMount(() => {
 
               {#if snippet !== undefined}
                 <div class="bg-charcoal-900 rounded-md w-full p-4 mt-2">
-                  <code class="whitespace-break-spaces text-sm">
-                    {snippet}
-                  </code>
+                  <CodeHighlight code="{snippet}" />
                 </div>
               {/if}
             </div>

yarn.lock

@@ -2542,6 +2542,11 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+[email protected]:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 html-encoding-sniffer@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448"
@@ -4436,6 +4441,13 @@ svelte-fa@^4.0.2:
   resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-4.0.2.tgz#f73aab661bf1758d726f06db321f0ffb8e2f40d6"
   integrity sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==
 
+svelte-highlight@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/svelte-highlight/-/svelte-highlight-7.6.0.tgz#b811f72c3530fab12f8babeca2363b3fac53f725"
+  integrity sha512-J9X1d07iMIKZMAqNAhlkjLX/FS+7R2lPrqVul7i+EleVZIOYvBhtx7ES62bc661a70nKNOS05yr9JAvyQPPOIA==
+  dependencies:
+    highlight.js "11.9.0"
+
 svelte-hmr@^0.15.3:
   version "0.15.3"
   resolved "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz"