[Fix Accessibility Bug] Refactor code.js to improve syntax highlighting colors (#1305)

## WHAT
This pull request includes changes to improve the syntax highlighting in
the `src/mdx/code.js` file by introducing a color mapping for different
token types and simplifying the code structure.

Improvements to syntax highlighting:

*
[`src/mdx/code.js`](diffhunk://#diff-f3f4e897983cba6337e020c78ef03c356c88f8868bcd19c465eb3c07e8b96625R46-R50):
Added a `colorMap` object to define custom colors for specific token
types such as comments, parameter variables, and functions.

Code simplification:

*
[`src/mdx/code.js`](diffhunk://#diff-f3f4e897983cba6337e020c78ef03c356c88f8868bcd19c465eb3c07e8b96625L116-R128):
Refactored the `Code` component to use the `colorMap` for setting token
colors, simplifying the logic for applying styles to tokens.

## WHY
### BEFORE
<img width="835" alt="screen shot before"
src="https://github.com/user-attachments/assets/5eabe1a8-58f2-4aea-8be2-85c378d47129">
<img width="229" alt="colour red before"
src="https://github.com/user-attachments/assets/6fa14348-e459-4adb-8d40-3b82eeb27fa4">
<img width="229" alt="colour blue before"
src="https://github.com/user-attachments/assets/8875765f-c878-4081-8055-de51c2af162d">


### AFTER
<img width="835" alt="screen shot after"
src="https://github.com/user-attachments/assets/1a9ab2f5-4f65-4f78-840e-b9205e5ca6ca">
<img width="229" alt="colour red after"
src="https://github.com/user-attachments/assets/769626c3-358f-4c97-a474-45c6a313c008">
<img width="229" alt="colour blue after"
src="https://github.com/user-attachments/assets/474b603f-8b72-4c08-994b-26f6986bdb5d">

Author: jpg619

src/mdx/code.js

@@ -43,6 +43,11 @@ export const InlineCode = styled.code`
   background-color: ${themeGet('colors.neutral.muted')};
   border-radius: ${themeGet('radii.2')};
 `
+const colorMap = {
+  'token comment': '#747458',
+  'token function': '#cf3846',
+  'token parameter variable': '#277d7b',
+}
 
 const MonoText = props => <Text sx={{fontFamily: 'mono', fontSize: 1}} {...props} />
 
@@ -113,18 +118,14 @@ function Code({className = '', prompt, children}) {
         <CodeBlock className={highlightClassName} style={style} code={code}>
           {tokens.map((line, i) => (
             <Box key={i} {...getLineProps({line, key: i})}>
-              {line.map((token, key) => (
-                <MonoText
-                  key={key}
-                  {...{
-                    ...getTokenProps({token, key}),
-                    style:
-                      getTokenProps({token, key}).className === 'token comment'
-                        ? {...getTokenProps({token, key}).style, color: '#747458'}
-                        : getTokenProps({token, key}).style,
-                  }}
-                />
-              ))}
+              {line.map((token, key) => {
+                const tokenProps = getTokenProps({token, key})
+                const tokenStyle = colorMap[tokenProps.className]
+                  ? {...tokenProps.style, color: colorMap[tokenProps.className]}
+                  : tokenProps.style
+
+                return <MonoText key={key} {...tokenProps} style={tokenStyle} />
+              })}
             </Box>
           ))}
         </CodeBlock>