Add syntax highlighting for hunks

package.json

@@ -64,6 +64,7 @@
 		"eslint-plugin-import": "^2.27.5",
 		"eslint-plugin-square-svelte-store": "^1.0.0",
 		"eslint-plugin-svelte": "^2.29.0",
+		"highlight.js": "^11.8.0",
 		"histoire": "^0.16.1",
 		"inter-ui": "^3.19.3",
 		"leven": "^4.0.0",

pnpm-lock.yaml

@@ -142,6 +142,9 @@ devDependencies:
   eslint-plugin-svelte:
     specifier: ^2.29.0
     version: 2.29.0(eslint@8.41.0)(svelte@3.55.1)
+  highlight.js:
+    specifier: ^11.8.0
+    version: 11.8.0
   histoire:
     specifier: ^0.16.1
     version: 0.16.1(vite@4.0.4)
@@ -3023,6 +3026,11 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /highlight.js@11.8.0:
+    resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /histoire@0.16.1(vite@4.0.4):
     resolution: {integrity: sha512-TIzJ0Wqe8epfTYMd7yuS0Zcuy86ysJ5t4p6qt0zjHAinoNgEH2M9biHtuKQzd96/QuUy3oc2dcXiFLFSZGdSyw==}
     hasBin: true

src/lib/components/Differ/diff.postcss

@@ -13,6 +13,7 @@
 	--override-addition-background-color: hsl(144deg 55% 49% / 20%);
 
 	background-color: var(--override-addition-background-color);
+	@apply text-black dark:text-white;
 }
 
 .diff-line-marker-deletion,
@@ -20,12 +21,12 @@
 	--override-deletion-background-color: rgba(220, 38, 38, 0.2);
 
 	background-color: var(--override-deletion-background-color);
+	@apply text-black dark:text-white;
 }
 
 .diff-line-addition .inner-diff {
 	--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 60%);
 
-	color: white;
 	background-color: var(--override-addition-inner-diff-background-color);
 }
 

src/routes/repo/[projectId]/+page.svelte

@@ -5,6 +5,22 @@
 	import { getVirtualBranches } from './vbranches';
 	import { Value } from 'svelte-loadable-store';
 
+	import hljs from 'highlight.js/lib/core';
+	import javascript from 'highlight.js/lib/languages/javascript';
+	import css from 'highlight.js/lib/languages/css';
+	import typescript from 'highlight.js/lib/languages/typescript';
+	import http from 'highlight.js/lib/languages/http';
+	import rust from 'highlight.js/lib/languages/rust';
+	import python from 'highlight.js/lib/languages/python';
+
+	hljs.registerLanguage('javascript', javascript);
+	hljs.registerLanguage('css', css);
+	hljs.registerLanguage('typescript', typescript);
+	hljs.registerLanguage('http', http);
+	hljs.registerLanguage('typescript', typescript);
+	hljs.registerLanguage('rust', rust);
+	hljs.registerLanguage('python', python);
+
 	export let data: PageData;
 	let { projectId, project, target, remoteBranches, remoteBranchesData } = data;
 	const virtualBranches = getVirtualBranches(projectId);

src/routes/repo/[projectId]/FileCard.svelte

@@ -53,7 +53,7 @@
 </script>
 
 <div
-	class="changed-file flex w-full flex-col justify-center gap-2 rounded-lg border border-light-300 bg-light-50 text-light-900 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
+	class="changed-file flex w-full flex-col justify-center gap-2 rounded border border-light-300 bg-light-50 text-light-900 dark:border-dark-400 dark:bg-dark-700 dark:text-light-300"
 >
 	<div class="flex items-center px-2 pt-2">
 		<div class="flex-grow overflow-hidden text-ellipsis whitespace-nowrap " title={filepath}>

src/routes/repo/[projectId]/HunkDiffViewer.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import hljs from 'highlight.js/lib/core';
+	import github from 'highlight.js/styles/github.css';
 	import { buildDiffRows, documentMap, RowType, type Row } from '$lib/components/Differ/renderer';
 	import { line, type DiffArray } from '$lib/diff';
 	import { create } from '$lib/components/Differ/CodeHighlighter';
@@ -54,9 +56,7 @@
 			let tokenContent = '';
 
 			doc.highlightRange(pos, pos + token.text.length, (text, classNames) => {
-				const token = classNames
-					? `<span class=${classNames}>${sanitize(text)}</span>`
-					: sanitize(text);
+				const token = classNames ? `<span class=${classNames}>${text}</span>` : text;
 
 				tokenContent += token;
 			});
@@ -79,7 +79,8 @@
 		return element.innerHTML;
 	}
 
-	$: parsedHunk = parseHunk(diff, linesShown);
+	$: highlightedRows = hljs.highlightAuto(diff).value;
+	$: parsedHunk = parseHunk(highlightedRows, linesShown);
 	$: diffRows = parsedHunk.diffRows;
 	$: originalLineNumber = parsedHunk.originalLineNumber;
 	$: currentLineNumber = parsedHunk.currentLineNumber;
@@ -90,6 +91,10 @@
 	$: renderedRows = diffRows.rows.map((row) => ({ ...row, render: renderRowContent(row) }));
 </script>
 
+<svelte:head>
+	{@html github}
+</svelte:head>
+
 <div
 	class="grid h-full w-full flex-auto whitespace-pre font-mono text-sm"
 	style:grid-template-columns="minmax(auto, max-content) minmax(auto, max-content) 1fr"
@@ -115,7 +120,7 @@
 			{curNumber}
 		</span>
 		<span
-			class="pl-1 diff-line-{row.type} overflow-hidden whitespace-nowrap"
+			class="pl-1 diff-line-{row.type} overflow-hidden whitespace-pre"
 			class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
 		>
 			{#each row.render.html as content}