From 5268ededbbc33021a5a4184030f1404abd69ace6 Mon Sep 17 00:00:00 2001
From: Tom Spielvogel <35257265+IDLe-Engineering@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:28:48 +0200
Subject: [PATCH] Add Syntax Highlighting to Sidebar Code Snippets

---
 .../void/src/sidebar/markdown/BlockCode.tsx   | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx
index f397c580..5da01e10 100644
--- a/extensions/void/src/sidebar/markdown/BlockCode.tsx
+++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx
@@ -1,6 +1,9 @@
 import React, { ReactNode, useCallback, useEffect, useState } from "react"
 import { getVSCodeAPI } from "../getVscodeApi"
 
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
 enum CopyButtonState {
 	Copy = "Copy",
 	Copied = "Copied!",
@@ -12,17 +15,27 @@ const COPY_FEEDBACK_TIMEOUT = 1000
 // code block with toolbar (Apply, Copy, etc) at top
 const BlockCode = ({
 	text,
+	language,
 	toolbar,
 	hideToolbar = false,
 	className,
 }: {
 	text: string
+	language?: string
 	toolbar?: ReactNode
 	hideToolbar?: boolean
 	className?: string
 }) => {
 	const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy)
 
+	const customStyle = {
+		...atomOneDarkReasonable,
+		'code[class*="language-"]': {
+			...atomOneDarkReasonable['code[class*="language-"]'],
+			background: "none",
+		},
+	}
+
 	useEffect(() => {
 		if (copyButtonState !== CopyButtonState.Copy) {
 			setTimeout(() => {
@@ -71,7 +84,14 @@ const BlockCode = ({
 			<div
 				className={`overflow-x-auto rounded-sm text-vscode-editor-fg bg-vscode-editor-bg ${!hideToolbar ? "rounded-tl-none" : ""} ${className}`}
 			>
-				<pre className="p-2">{text}</pre>
+				<SyntaxHighlighter
+					language={language}
+					style={customStyle}
+					className={"rounded-sm"}
+				>
+					{text}
+				</SyntaxHighlighter>
+
 			</div>
 		</div>
 	)