Updates for shared code component
Luke Karrys committed
Oct 18, 2023 at 06:33 UTC
c6cfc41219cf65c21785be88d7b608cadad9a3a9
3 files changed
+17
-17
src/mdx/code.js
+15
-7
@@ -1,6 +1,7 @@
1
import React from 'react'
2
-import {Box, Text, Button, Octicon} from '@primer/react'
2
+import {Box, Text, Button, Octicon, themeGet} from '@primer/react'
3
import {Highlight, themes} from 'prism-react-renderer'
4
+import styled from 'styled-components'
5
import {CheckIcon, CopyIcon} from '@primer/octicons-react'
6
import copy from 'copy-to-clipboard'
7
import {announce} from '../util/aria-live'
@@ -33,14 +34,21 @@ function ClipboardCopy({value, ...props}) {
34
)
35
}
36
36
-// export default ClipboardCopy
37
+export const InlineCode = styled.code`
38
+ padding: 0.2em 0.4em;
39
+ font-family: ${themeGet('fonts.mono')};
40
+ font-size: 85%;
41
+ background-color: ${themeGet('colors.neutral.muted')};
42
+ border-radius: ${themeGet('radii.2')};
43
+`
44
38
-function Code({className, children}) {
39
- const language = className ? className.replace(/language-/, '') : ''
40
- const code = children.trim()
45
+function Code({className = '', children, ...props}) {
46
+ if (!className.startsWith('language-')) {
47
+ return <InlineCode {...props}>{children}</InlineCode>
48
+ }
49
50
return (
43
- <Highlight code={code} language={language} theme={themes.github}>
51
+ <Highlight code={children} language={className.replace(/language-/, '')} theme={themes.github}>
52
{({className, style, tokens, getLineProps, getTokenProps}) => (
53
<Box
54
sx={{
@@ -65,7 +73,7 @@ function Code({className, children}) {
73
}}
74
>
75
<ClipboardCopy
68
- value={code}
76
+ value={children.toString().trim()}
77
sx={{
78
borderRadius: 0,
79
borderStyle: 'solid',
src/mdx/index.js
-8
@@ -154,14 +154,6 @@ export const HorizontalRule = styled.hr`
154
border: 0;
155
`
156
157
-export const InlineCode = styled.code`
158
- padding: 0.2em 0.4em;
159
- font-family: ${themeGet('fonts.mono')};
160
- font-size: 85%;
161
- background-color: ${themeGet('colors.neutral.muted')};
162
- border-radius: ${themeGet('radii.2')};
163
-`
164
-
157
export const UnorderedList = styled.ul`
158
padding-left: 2em;
159
src/root.js
+2
-2
@@ -29,8 +29,8 @@ const npmTheme = deepmerge(theme, {
29
30
const components = {
31
a: Components.Link,
32
- pre: Components.Code,
33
- code: Components.InlineCode,
32
+ pre: ({children}) => children,
33
+ code: Components.Code,
34
table: Components.Table,
35
img: Components.Image,
36
p: Components.Paragraph,