feat(patch): add syntax color with highlight.js

for just the common languages

dynamically loading languages would help keep the package size down

package.json

@@ -66,6 +66,7 @@
     "@nostr-dev-kit/ndk-svelte-components": "^1.3.0",
     "daisyui": "^4.4",
     "dayjs": "^1.11.10",
+    "highlight.js": "^11.9.0",
     "parse-diff": "^0.11.1",
     "ramda": "^0.29.1"
   },

src/lib/components/events/content/Patch.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { NDKTag } from '@nostr-dev-kit/ndk'
   import parseDiff from 'parse-diff'
+  import hljs from 'highlight.js/lib/common'
+  import 'highlight.js/styles/agate.min.css'
   import type { Change, AddChange, DeleteChange } from 'parse-diff'
   import ParsedContent from './ParsedContent.svelte'
   import { extractPatchMessage } from './utils'
@@ -90,12 +92,22 @@
         <div class="border-t-1 border-base-300">
           {#each file.chunks as chunk, index}
             {#if index !== 0}
-              <div class="h-6 bg-base-400"></div>
+              <div class="text-middle h-6 bg-base-200 font-mono text-xs">
+                <div
+                  class="w-8 flex-none select-none pr-2 text-right opacity-50"
+                >
+                  ...
+                </div>
+              </div>
             {/if}
             {#each chunk.changes as change, i}
-              <div class="flex bg-base-300 font-mono text-xs">
+              <div class="flex bg-base-100 font-mono text-xs">
                 <div
-                  class="w-8 flex-none bg-slate-500/20 pr-2 text-right opacity-50"
+                  class="w-8 flex-none select-none {change.type == 'add'
+                    ? 'bg-success/30'
+                    : change.type == 'del'
+                      ? 'bg-error/30'
+                      : 'bg-slate-500/20'} pr-2 text-right opacity-50"
                 >
                   {isAddChange(change) &&
                   i !== 0 &&
@@ -105,14 +117,20 @@
                 </div>
                 <div
                   class="text-wrap flex-grow break-all {change.type == 'add'
-                    ? 'bg-success/20'
+                    ? 'bg-success/10'
                     : change.type == 'del'
-                      ? 'bg-error/20'
+                      ? 'bg-error/10'
                       : ''}"
                 >
-                  {change.type == 'normal'
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html hljs.highlight(
+                    change.type == 'normal'
                       ? change.content
-                    : change.content.substring(1)}
+                      : change.content.substring(1),
+                    {
+                      language: (file.to || file.from)?.split('.').pop() || '',
+                    }
+                  ).value}
                 </div>
               </div>
             {/each}

yarn.lock

@@ -6377,6 +6377,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@^11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"