aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-shared/src/components/markdown_code_block.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-03-13 22:29:12 +0800
committerFabio Berger <me@fabioberger.com>2018-03-13 22:29:12 +0800
commitca25b816fabe15ce1ebc539c0316beba813683b8 (patch)
tree0e28bbc819cfccda1789192628c365ea54328103 /packages/react-shared/src/components/markdown_code_block.tsx
parentdf1968157c13a7bbe2e512cbc924190a414e6738 (diff)
downloaddexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar.gz
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar.bz2
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar.lz
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar.xz
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.tar.zst
dexon-sol-tools-ca25b816fabe15ce1ebc539c0316beba813683b8.zip
move scripts to monorepro-scripts
Diffstat (limited to 'packages/react-shared/src/components/markdown_code_block.tsx')
-rw-r--r--packages/react-shared/src/components/markdown_code_block.tsx25
1 files changed, 25 insertions, 0 deletions
diff --git a/packages/react-shared/src/components/markdown_code_block.tsx b/packages/react-shared/src/components/markdown_code_block.tsx
new file mode 100644
index 000000000..2070bb8e1
--- /dev/null
+++ b/packages/react-shared/src/components/markdown_code_block.tsx
@@ -0,0 +1,25 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as HighLight from 'react-highlight';
+
+export interface MarkdownCodeBlockProps {
+ value: string;
+ language: string;
+}
+
+export interface MarkdownCodeBlockState {}
+
+export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
+ // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
+ // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
+ public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
+ return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
+ }
+ public render() {
+ return (
+ <span style={{ fontSize: 14 }}>
+ <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
+ </span>
+ );
+ }
+}