diff options
| -rw-r--r-- | packages/dev-tools-pages/package.json | 1 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 32 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/globals.d.ts | 1 | ||||
| -rw-r--r-- | packages/dev-tools-pages/ts/pages/Cov.tsx | 18 |
4 files changed, 41 insertions, 11 deletions
diff --git a/packages/dev-tools-pages/package.json b/packages/dev-tools-pages/package.json index eb34e3715..c85ff44a6 100644 --- a/packages/dev-tools-pages/package.json +++ b/packages/dev-tools-pages/package.json @@ -18,6 +18,7 @@ "dependencies": { "@0xproject/react-shared": "^1.0.15", "highlight.js": "^9.13.1", + "highlighter": "^0.1.0", "less": "^2.7.2", "polished": "^1.9.2", "react": "^16.5.2", 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) ? ( diff --git a/packages/dev-tools-pages/ts/globals.d.ts b/packages/dev-tools-pages/ts/globals.d.ts index 07871a74b..5c7cbe54c 100644 --- a/packages/dev-tools-pages/ts/globals.d.ts +++ b/packages/dev-tools-pages/ts/globals.d.ts @@ -1,5 +1,6 @@ declare module 'whatwg-fetch'; declare module 'react-document-title'; +declare module 'highlighter'; declare var System: any; diff --git a/packages/dev-tools-pages/ts/pages/Cov.tsx b/packages/dev-tools-pages/ts/pages/Cov.tsx index 8fd1ace43..01966537c 100644 --- a/packages/dev-tools-pages/ts/pages/Cov.tsx +++ b/packages/dev-tools-pages/ts/pages/Cov.tsx @@ -22,11 +22,21 @@ function Cov() { coverage. </IntroLead> <IntroAside> - <Code language="js"> - {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace'; + <Code language="js.diff"> + {`+function executeTransaction(uint transactionId) + public ++notExecuted(transactionId) ++pastTimeLock(transactionId) +{ ++Transaction storage tx = transactions[transactionId] ++tx.executed = true ++if (tx.destination.call.value(tx.value)(tx.data)) ++Execution(transactionId) +else { +-ExecutionFailure(transactionId) -// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in -const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`} + } +}`} </Code> </IntroAside> </Intro> |