diff --git a/src/lib/components/search/RenderedSearchResult.svelte b/src/lib/components/search/RenderedSearchResult.svelte
index dd41c77c8..710014398 100644
--- a/src/lib/components/search/RenderedSearchResult.svelte
+++ b/src/lib/components/search/RenderedSearchResult.svelte
@@ -31,7 +31,8 @@
 										: line.operation === 'remove'
 										? 'bg-[#FF0000]/20'
 										: ''}
-												">{@html line.content}</pre>
+												">{line.contentBeforeHit}<span class="rounded-sm bg-[#AC8F2F]">{line.contentAtHit}</span
+									>{line.contentAfterHit}</pre>
 							</div>
 						{:else}
 							<!-- <span>hidden</span> -->
diff --git a/src/lib/components/search/index.ts b/src/lib/components/search/index.ts
index cda085802..f5c242c43 100644
--- a/src/lib/components/search/index.ts
+++ b/src/lib/components/search/index.ts
@@ -4,7 +4,9 @@ import type { SearchResult } from '$lib/search';
 
 export type ProcessedSearchResultLine = {
 	hidden: boolean;
-	content: string;
+	contentBeforeHit: string;
+	contentAtHit: string;
+	contentAfterHit: string;
 	operation: string;
 	lineNumber: number | undefined;
 	hasKeyword: boolean;
diff --git a/src/lib/components/search/process.ts b/src/lib/components/search/process.ts
index 2cac62b7f..45d1aa630 100644
--- a/src/lib/components/search/process.ts
+++ b/src/lib/components/search/process.ts
@@ -84,23 +84,24 @@ const processHunkLines = (lines: string[], newStart: number, query: string) => {
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
 
-		let content = '';
+		let contentBeforeHit = '';
+		let querySubstring = '';
+		let contentAfterHit = '';
 		if (!line.includes(query)) {
-			content = line.slice(1);
+			contentBeforeHit = line.slice(1);
 		} else {
 			const firstCharIndex = line.indexOf(query);
 			const lastCharIndex = firstCharIndex + query.length - 1;
-			const beforeQuery = line.slice(1, firstCharIndex);
-			const querySubstring = line.slice(firstCharIndex, lastCharIndex + 1);
-			const afterQuery = line.slice(lastCharIndex + 1);
-
-			content =
-				beforeQuery + `<span class="bg-[#AC8F2F] rounded-sm">${querySubstring}</span>` + afterQuery;
+			contentBeforeHit = line.slice(1, firstCharIndex);
+			querySubstring = line.slice(firstCharIndex, lastCharIndex + 1);
+			contentAfterHit = line.slice(lastCharIndex + 1);
 		}
 
 		outLines.push({
 			hidden: false,
-			content: content,
+			contentBeforeHit: contentBeforeHit,
+			contentAtHit: querySubstring,
+			contentAfterHit: contentAfterHit,
 			operation: line.startsWith('+') ? 'add' : line.startsWith('-') ? 'remove' : 'unmodified',
 			lineNumber: !line.startsWith('-') ? lineNumber : undefined,
 			hasKeyword: line.includes(query)