diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 32 |
1 files changed, 25 insertions, 7 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 88cfba7f8..5a03e79ac 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -4,6 +4,8 @@ import styled from 'styled-components'; import { colors } from 'ts/variables'; import BaseButton from './Button'; +var highlight = require('highlighter')(); + interface CodeProps { children: React.ReactNode; language?: string; @@ -28,11 +30,11 @@ const Button = styled(BaseButton)` const Base = styled.div < - CodeProps > - ` + CodeProps > + ` color: ${props => (props.language === undefined ? colors.white : 'inherit')}; background-color: ${props => - props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray}; + props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray}; white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; position: relative; &:hover ${Button} { @@ -41,10 +43,25 @@ const Base = `; const StyledCode = styled.code` - padding: 1.5rem; + padding-top: 1.5rem; + padding-bottom: 1.5rem; display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch; + + + .diff-addition { + background-color: #d2e9e0; + padding: 0.3125rem; + display: inline-block; + width: 100%; + } + .diff-deletion { + background-color: #ebdcdc; + padding: 0.3125rem; + display: inline-block; + width: 100%; + } `; const StyledPre = styled.pre` @@ -75,7 +92,8 @@ class Code extends React.Component<CodeProps, CodeState> { if (language !== undefined) { const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight'); - const { value: hlCode } = hljs.highlight(language, children as string); + + const hlCode = hljs(children as string, language); this.setState({ hlCode }); } } @@ -105,8 +123,8 @@ class Code extends React.Component<CodeProps, CodeState> { {this.state.hlCode !== undefined ? ( <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} /> ) : ( - <StyledCode>{this.props.children}</StyledCode> - )} + <StyledCode>{this.props.children}</StyledCode> + )} </StyledPre> {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null} {!('clipboard' in navigator) ? ( |