aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx23
1 files changed, 11 insertions, 12 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 753965568..e9a503f0b 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -63,13 +63,10 @@ const Base =
-webkit-overflow-scrolling: touch;
`;
-const StyledCodeDiff =
- styled.code <
- any >
- `
+const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)`
::before {
content: '';
- width: calc(.75rem + ${props => props.gutterLength}ch);
+ width: calc(0.75rem + ${props => props.gutterLength}ch);
background-color: #e2e5e6;
position: absolute;
top: 0;
@@ -87,8 +84,8 @@ const StyledCodeDiff =
content: attr(data-test);
font-size: 0.875rem;
width: ${props => props.gutterLength};
- padding-left: .375rem;
- padding-right: .375rem;
+ padding-left: 0.375rem;
+ padding-right: 0.375rem;
position: absolute;
top: 50%;
left: 0;
@@ -162,16 +159,18 @@ class Code extends React.Component<CodeProps, CodeState> {
const { language, light, diff, children, gutterLength } = this.props;
const { hlCode } = this.state;
- const Code = diff ? StyledCodeDiff : 'code';
+ let Code = 'code';
+ let codeProps = {};
+ if (diff) {
+ codeProps = { gutterLength };
+ Code = StyledCodeDiff as any;
+ }
return (
<Container>
<Base language={language} diff={diff} light={light}>
<StyledPre>
- <Code
- gutterLength={gutterLength}
- dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
- >
+ <Code {...codeProps} dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}>
{hlCode === undefined ? children : null}
</Code>
</StyledPre>