diff options
| author | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 03:23:16 +0800 |
|---|---|---|
| committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-30 03:23:16 +0800 |
| commit | ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4 (patch) | |
| tree | c08e304f7d1b496fab7b68faf93d4126f2075b8d /packages/website/ts | |
| parent | 0f01e31cc3826df7000e0ddc35354aa9af515966 (diff) | |
| download | dexon-0x-contracts-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.gz dexon-0x-contracts-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.tar.zst dexon-0x-contracts-ea61c7a5dbf35586e74f6fd1ccb20dffe6e7c8f4.zip | |
feat: have basic code syntax highlighting working
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/pages/documentation/developers_page.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/code_demo.tsx | 45 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 7 |
3 files changed, 55 insertions, 1 deletions
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index a84be7bfe..fcca2b6ad 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -2,6 +2,7 @@ import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/ import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle from 'react-document-title'; +import { Helmet } from 'react-helmet'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; @@ -146,6 +147,9 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop } 50%, ${colors.white} 100%)`} > <DocumentTitle title="0x Docs" /> + <Helmet> + <link rel="stylesheet" href="/css/github-gist.css" /> + </Helmet> <Container className="flex mx-auto" height="100vh"> <Container className="sm-hide xs-hide relative" diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx new file mode 100644 index 000000000..9764227a1 --- /dev/null +++ b/packages/website/ts/pages/instant/code_demo.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { atelierCaveDark } from 'react-syntax-highlighter/styles/hljs'; +import { styled } from 'ts/style/theme'; + +import { Container } from 'ts/components/ui/container'; + +const CustomPre = styled.pre` + code { + background-color: inherit !important; + border-radius: 0px; + font-family: 'Roboto Mono', sans-serif; + border: none; + } +`; + +export interface CodeDemoProps {} + +export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => { + const codeString = `<head> + <script src="http://0x-instant-staging.s3-website-us-east-1.amazonaws.com/main.bundle.js"></script> +</head> +<body> + <script> + zeroExInstant.render({ + liquiditySource: 'https://api.relayer.com/sra/v2/', + affiliateInfo: { + feeRecipient: '0x50ff5828a216170cf224389f1c5b0301a5d0a230', + feePercentage: 0.03 + } + }, 'body'); + </script> +</body>`; + return ( + <SyntaxHighlighter + useInlineStyles={true} + language="html" + style={atelierCaveDark} + showLineNumbers={true} + PreTag={CustomPre} + > + {codeString} + </SyntaxHighlighter> + ); +}; diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx index c836739bb..2314f968f 100644 --- a/packages/website/ts/pages/instant/configurator.tsx +++ b/packages/website/ts/pages/instant/configurator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; +import { CodeDemo } from 'ts/pages/instant/code_demo'; import { colors } from 'ts/style/colors'; export interface ConfiguratorProps { @@ -8,5 +9,9 @@ export interface ConfiguratorProps { } export const Configurator = (props: ConfiguratorProps) => ( - <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground} /> + <Container id={props.hash} height="400px" backgroundColor={colors.instantTertiaryBackground}> + <Container width="50%"> + <CodeDemo /> + </Container> + </Container> ); |