diff options
author | August Skare <post@augustskare.no> | 2018-10-30 16:05:52 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-30 16:05:52 +0800 |
commit | 6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 (patch) | |
tree | aa4ff95ba4427a347de0ca61c54080d34ff9272b /packages/dev-tools-pages | |
parent | 4c8178fc3025fae3f4fec8d89dbb35584c292c6b (diff) | |
download | dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.gz dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.bz2 dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.lz dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.xz dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.zst dexon-0x-contracts-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.zip |
fix code highlighting with ...
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 8 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/components/Header.tsx | 1 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/highlight.tsx | 22 | ||||
-rw-r--r-- | packages/dev-tools-pages/ts/pages/Compiler.tsx | 16 |
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> |