aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-30 16:05:52 +0800
committerAugust Skare <post@augustskare.no>2018-10-30 16:05:52 +0800
commit6b11ca6c1dc2a81abb17e85204f708f1ad68dec9 (patch)
treeaa4ff95ba4427a347de0ca61c54080d34ff9272b /packages/dev-tools-pages/ts
parent4c8178fc3025fae3f4fec8d89dbb35584c292c6b (diff)
downloaddexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.gz
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.bz2
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.lz
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.xz
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.tar.zst
dexon-sol-tools-6b11ca6c1dc2a81abb17e85204f708f1ad68dec9.zip
fix code highlighting with ...
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx8
-rw-r--r--packages/dev-tools-pages/ts/components/Header.tsx1
-rw-r--r--packages/dev-tools-pages/ts/highlight.tsx22
-rw-r--r--packages/dev-tools-pages/ts/pages/Compiler.tsx16
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>