Add untested code block highlighting

src/Common/CodeBlock.luau

@@ -1,3 +1,4 @@
+local Highlighter = require("@pkg/Highlighter")
 local React = require("@pkg/React")
 local Sift = require("@pkg/Sift")
 
@@ -6,6 +7,8 @@ local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
 local useTheme = require("@root/Common/useTheme")
 
 local useMemo = React.useMemo
+local useRef = React.useRef
+local useEffect = React.useEffect
 
 local function getLineNumbers(str: string): string
 	return Sift.List.reduce(str:split("\n"), function(accumulator, _item, index)
@@ -21,11 +24,20 @@ export type Props = {
 
 local function StoryError(props: Props)
 	local theme = useTheme()
+	local ref = useRef(nil :: TextBox?)
 
 	local sourceColor = useMemo(function()
 		return if props.sourceColor then props.sourceColor else theme.text
 	end, { props.sourceColor })
 
+	useEffect(function()
+		Highlighter.matchStudioSettings()
+
+		Highlighter.highlight({
+			textObject = ref.current,
+		})
+	end, {})
+
 	return React.createElement("Frame", {
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 0.5,
@@ -72,6 +84,7 @@ local function StoryError(props: Props)
 			TextWrapped = false,
 			LineHeight = 1,
 			Font = Enum.Font.RobotoMono,
+			ref = ref,
 		}),
 	})
 end

wally.toml

@@ -13,6 +13,7 @@ ReactRoblox = "jsdotlua/[email protected]"
 ReactSpring = "chriscerie/[email protected]"
 Sift = "csqrl/[email protected]"
 t = "osyrisrblx/[email protected]"
+Highlighter = "boatbomber/[email protected]"
 
 # dev dependencies
 Roact = "roblox/[email protected]"