Add highlighter.js; basic styling for .diff classes; Start of code block in cov

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>