From 05585b4c4d98d4100f73540a15c6f33546aca65c Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 2 Oct 2024 11:39:35 -0400 Subject: [PATCH 1/8] Refactor code.js to improve syntax highlighting colors --- src/mdx/code.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index c68a1b2f0e6..7151ea1ed64 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -118,10 +118,15 @@ function Code({className = '', prompt, children}) { key={key} {...{ ...getTokenProps({token, key}), - style: - getTokenProps({token, key}).className === 'token comment' - ? {...getTokenProps({token, key}).style, color: '#747458'} - : getTokenProps({token, key}).style, + style: { + ...getTokenProps({token, key}).style, + color: + getTokenProps({token, key}).className === 'token comment' + ? '#747458' + : getTokenProps({token, key}).className === 'token parameter variable' + ? '#277d7b' + : getTokenProps({token, key}).style.color, + }, }} /> ))} From b19fcc2c5264e48e31292470cb2c66a80f23be3f Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 2 Oct 2024 12:08:00 -0400 Subject: [PATCH 2/8] simplified code --- src/mdx/code.js | 24 +++++++----------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index 7151ea1ed64..423e0f640c1 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -113,23 +113,13 @@ function Code({className = '', prompt, children}) { {tokens.map((line, i) => ( - {line.map((token, key) => ( - - ))} + {line.map((token, key) => { + const tokenProps = getTokenProps({token, key}) + const tokenStyle = + tokenProps.className === 'token comment' ? {...tokenProps.style, color: '#747458'} : tokenProps.style + + return + })} ))} From e6fe620be66e40cf1be21c625af0fc3e99f01c63 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 2 Oct 2024 12:17:59 -0400 Subject: [PATCH 3/8] Refactor code.js to improve syntax highlighting colors --- src/mdx/code.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index 423e0f640c1..a0cb707d6a2 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -91,6 +91,18 @@ const CodeBlock = ({children, code, className, style}) => ( ) +function getCustomTokenStyle(tokenProps) { + const {className, style} = tokenProps + switch (className) { + case 'token comment': + return {...style, color: '#747458'} + case 'token parameter variable': + return {...style, color: '#277d7b'} + default: + return style + } +} + function Code({className = '', prompt, children}) { if (prompt) { return ( @@ -115,9 +127,7 @@ function Code({className = '', prompt, children}) { {line.map((token, key) => { const tokenProps = getTokenProps({token, key}) - const tokenStyle = - tokenProps.className === 'token comment' ? {...tokenProps.style, color: '#747458'} : tokenProps.style - + const tokenStyle = getCustomTokenStyle(tokenProps) return })} From 349e9f90d1468d1d6f0a406e77aad40aa9b9b9d1 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 2 Oct 2024 12:32:33 -0400 Subject: [PATCH 4/8] Refactor code.js to add support for function token color --- src/mdx/code.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/mdx/code.js b/src/mdx/code.js index a0cb707d6a2..351da59c5ff 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -98,6 +98,8 @@ function getCustomTokenStyle(tokenProps) { return {...style, color: '#747458'} case 'token parameter variable': return {...style, color: '#277d7b'} + case 'token function': + return {...style, color: '#cf3846'} default: return style } From 539a92b86d8290e314343c6f397d5867b986bfa3 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 9 Oct 2024 10:45:53 -0400 Subject: [PATCH 5/8] Refactor code.js to add support for custom token colors --- src/mdx/code.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index 351da59c5ff..052e09c24c5 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -93,16 +93,13 @@ const CodeBlock = ({children, code, className, style}) => ( function getCustomTokenStyle(tokenProps) { const {className, style} = tokenProps - switch (className) { - case 'token comment': - return {...style, color: '#747458'} - case 'token parameter variable': - return {...style, color: '#277d7b'} - case 'token function': - return {...style, color: '#cf3846'} - default: - return style + const colorMap = { + 'token comment': '#747458', + 'token parameter variable': '#277d7b', + 'token function': '#cf3846', } + + return className in colorMap ? {...style, color: colorMap[className]} : style } function Code({className = '', prompt, children}) { From c69b0681853fb3f2503a33abf93a661a8e014388 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 9 Oct 2024 11:33:32 -0400 Subject: [PATCH 6/8] Refactor code.js to simplify getCustomTokenStyle function --- src/mdx/code.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index 052e09c24c5..31f4c56cefb 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -91,15 +91,14 @@ const CodeBlock = ({children, code, className, style}) => ( ) -function getCustomTokenStyle(tokenProps) { - const {className, style} = tokenProps +function getCustomTokenStyle({className, style}) { const colorMap = { 'token comment': '#747458', 'token parameter variable': '#277d7b', 'token function': '#cf3846', } - return className in colorMap ? {...style, color: colorMap[className]} : style + return colorMap[className] ? {...style, color: colorMap[className]} : style } function Code({className = '', prompt, children}) { From e6aace8949fe9718d184ae95e74f533243dd41b3 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 9 Oct 2024 12:01:18 -0400 Subject: [PATCH 7/8] Refactor code.js to simplify getCustomTokenStyle function --- src/mdx/code.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index 31f4c56cefb..e1158fc2308 100644 --- a/src/mdx/code.js +++ b/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 parameter variable': '#277d7b', + 'token function': '#cf3846', +} const MonoText = props => @@ -91,16 +96,6 @@ const CodeBlock = ({children, code, className, style}) => ( ) -function getCustomTokenStyle({className, style}) { - const colorMap = { - 'token comment': '#747458', - 'token parameter variable': '#277d7b', - 'token function': '#cf3846', - } - - return colorMap[className] ? {...style, color: colorMap[className]} : style -} - function Code({className = '', prompt, children}) { if (prompt) { return ( @@ -125,7 +120,10 @@ function Code({className = '', prompt, children}) { {line.map((token, key) => { const tokenProps = getTokenProps({token, key}) - const tokenStyle = getCustomTokenStyle(tokenProps) + const tokenStyle = colorMap[tokenProps.className] + ? {...tokenProps.style, color: colorMap[tokenProps.className]} + : tokenProps.style + return })} From 2337cea515df4bf5a4a8a7a7c4796f60496ed021 Mon Sep 17 00:00:00 2001 From: jpg619 Date: Wed, 9 Oct 2024 12:03:16 -0400 Subject: [PATCH 8/8] Refactor code.js to reorder token color definitions --- src/mdx/code.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mdx/code.js b/src/mdx/code.js index e1158fc2308..1cbf73d9f3f 100644 --- a/src/mdx/code.js +++ b/src/mdx/code.js @@ -45,8 +45,8 @@ export const InlineCode = styled.code` ` const colorMap = { 'token comment': '#747458', - 'token parameter variable': '#277d7b', 'token function': '#cf3846', + 'token parameter variable': '#277d7b', } const MonoText = props =>