fix code highlighting with ...

4 files changed, 31 insertions, 16 deletions

diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index a6971fc84..6675422ef 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -18,6 +18,7 @@ interface CodeProps {
     gutter?: Array<number>;
     gutterLength?: number;
     copy?: boolean;
+    etc?: boolean;
 }
 
 interface CodeState {
@@ -134,15 +135,16 @@ class Code extends React.Component<CodeProps, CodeState> {
     }
 
     async componentDidMount() {
-        const { language, children, diff, gutter } = this.props;
+        const { language, children, diff, gutter, etc } = this.props;
 
         const code = children as string;
 
         if (language !== undefined) {
+            /* console.log(code); */
             const { default: highlight } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
 
             this.setState({
-                hlCode: highlight(language, code, diff, gutter),
+                hlCode: highlight({ language, code, diff, gutter, etc }),
             });
         }
     }
@@ -174,6 +176,8 @@ class Code extends React.Component<CodeProps, CodeState> {
             Code = StyledCodeDiff as any;
         }
 
+        /* console.log(hlCode); */
+
         return (
             <Container>
                 <Base language={language} diff={diff} light={light}>
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index 01ef944f4..b561a5d91 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -33,6 +33,7 @@ const StyledHeader = styled.header`
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 2;
     ${Container} {
         display: flex;
         justify-content: space-between;
diff --git a/packages/dev-tools-pages/ts/highlight.tsx b/packages/dev-tools-pages/ts/highlight.tsx
index 8dff4c9e9..64c5f9a17 100644
--- a/packages/dev-tools-pages/ts/highlight.tsx
+++ b/packages/dev-tools-pages/ts/highlight.tsx
@@ -38,12 +38,30 @@ function diffHighlight(language: string, code: any, gutter: any) {
         .join('\n');
 }
 
-function highlight(language: string, code: string, diff: boolean, gutter: any) {
+interface highlightProps {
+    language: string;
+    code: string;
+    diff?: boolean;
+    gutter?: boolean;
+    etc?: boolean;
+}
+
+function highlight({ language, code, diff, gutter, etc }: highlightProps) {
     if (diff) {
         return diffHighlight(language, code, gutter);
     }
 
-    return hljs.highlight(language, code).value;
+    let hlCode = hljs.highlight(language, code).value;
+
+    if (!etc) {
+        return hlCode;
+    }
+
+    var hc = hlCode.split(/\r?\n/g);
+    hc.splice(1, 0, '    ...');
+    hc.splice(hc.length - 1, 0, '    ...');
+
+    return hc.join('\n');
 }
 
 export default highlight;
diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 2cb232c8c..11c8c4a17 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -70,9 +70,8 @@ function Compiler() {
                         define which parts of the artifact you need.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -80,18 +79,15 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
     },
-    ...
 }`}
                         </Code>
                     </Breakout>
@@ -102,9 +98,8 @@ function Compiler() {
                         artifact.
                     </p>
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerSettings": {
         "outputSelection": {
             "*": {
@@ -118,15 +113,13 @@ function Compiler() {
             }
         }
     }
-    ...
 }`}
                         </Code>
                     </Breakout>
 
                     <Breakout>
-                        <Code light language="json">
+                        <Code light language="json" etc>
                             {`{
-    ...
     "compilerOutput": {
         "abi": [...],
         "evm": {
@@ -145,7 +138,6 @@ function Compiler() {
             "id": 0
         }
     },
-    ...
 }`}
                         </Code>
                     </Breakout>