aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Code.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Code.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx32
1 files changed, 25 insertions, 7 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 88cfba7f8..5a03e79ac 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
import { colors } from 'ts/variables';
import BaseButton from './Button';
+var highlight = require('highlighter')();
+
interface CodeProps {
children: React.ReactNode;
language?: string;
@@ -28,11 +30,11 @@ const Button = styled(BaseButton)`
const Base =
styled.div <
- CodeProps >
- `
+ CodeProps >
+ `
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props =>
- props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
+ props.light ? 'rgba(255,255,255,.15)' : props.language === undefined ? colors.black : colors.lightGray};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {
@@ -41,10 +43,25 @@ const Base =
`;
const StyledCode = styled.code`
- padding: 1.5rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
display: block;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
+
+
+ .diff-addition {
+ background-color: #d2e9e0;
+ padding: 0.3125rem;
+ display: inline-block;
+ width: 100%;
+ }
+ .diff-deletion {
+ background-color: #ebdcdc;
+ padding: 0.3125rem;
+ display: inline-block;
+ width: 100%;
+ }
`;
const StyledPre = styled.pre`
@@ -75,7 +92,8 @@ class Code extends React.Component<CodeProps, CodeState> {
if (language !== undefined) {
const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
- const { value: hlCode } = hljs.highlight(language, children as string);
+
+ const hlCode = hljs(children as string, language);
this.setState({ hlCode });
}
}
@@ -105,8 +123,8 @@ class Code extends React.Component<CodeProps, CodeState> {
{this.state.hlCode !== undefined ? (
<StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
) : (
- <StyledCode>{this.props.children}</StyledCode>
- )}
+ <StyledCode>{this.props.children}</StyledCode>
+ )}
</StyledPre>
{navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
{!('clipboard' in navigator) ? (