From 9e1a94266e775ac52ad8da0d825e6814457bacd4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 29 Nov 2018 11:23:16 -0800 Subject: feat: have basic code syntax highlighting working --- packages/website/ts/pages/instant/code_demo.tsx | 45 ++++++++++++++++++++++ packages/website/ts/pages/instant/configurator.tsx | 7 +++- 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 packages/website/ts/pages/instant/code_demo.tsx (limited to 'packages/website/ts/pages/instant') 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 = props => { + const codeString = ` + + + + +`; + return ( + + {codeString} + + ); +}; 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) => ( - + + + + + ); -- cgit