@cryptotaxi247 / documentation-1 / commits / 6ff91a4

[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">

Jithin Prabhakaran Girija committed Oct 9, 2024 at 17:11 UTC 6ff91a415cfc2ed2503e8de639906fc9ed1ac890
1 file changed +13 -12
src/mdx/code.js
+13 -12
@@ -43,6 +43,11 @@ export const InlineCode = styled.code`
43 background-color: ${themeGet('colors.neutral.muted')};
44 border-radius: ${themeGet('radii.2')};
45 `
46 +const colorMap = {
47 + 'token comment': '#747458',
48 + 'token function': '#cf3846',
49 + 'token parameter variable': '#277d7b',
50 +}
51
52 const MonoText = props => <Text sx={{fontFamily: 'mono', fontSize: 1}} {...props} />
53
@@ -113,18 +118,14 @@ function Code({className = '', prompt, children}) {
118 <CodeBlock className={highlightClassName} style={style} code={code}>
119 {tokens.map((line, i) => (
120 <Box key={i} {...getLineProps({line, key: i})}>
116 - {line.map((token, key) => (
117 - <MonoText
118 - key={key}
119 - {...{
120 - ...getTokenProps({token, key}),
121 - style:
122 - getTokenProps({token, key}).className === 'token comment'
123 - ? {...getTokenProps({token, key}).style, color: '#747458'}
124 - : getTokenProps({token, key}).style,
125 - }}
126 - />
127 - ))}
121 + {line.map((token, key) => {
122 + const tokenProps = getTokenProps({token, key})
123 + const tokenStyle = colorMap[tokenProps.className]
124 + ? {...tokenProps.style, color: colorMap[tokenProps.className]}
125 + : tokenProps.style
126 +
127 + return <MonoText key={key} {...tokenProps} style={tokenStyle} />
128 + })}
129 </Box>
130 ))}
131 </CodeBlock>