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

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) ? (