Add fonts and code colorscheme.

1 files changed, 22 insertions, 0 deletions

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
new file mode 100644
index 0000000..d496779
--- /dev/null
+++ b/src/components/CodeBlock.js
@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import {jsx, Styled} from "theme-ui";
+import Highlight, { defaultProps } from "prism-react-renderer";
+import theme from '../codeTheme';
+
+function CodeBlock({code, language}) {
+  return <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+    {({ className, style, tokens, getLineProps, getTokenProps }) => (
+      <Styled.pre className={className} style={style}>
+        {tokens.map((line, i) => (
+          <div {...getLineProps({ line, key: i })}>
+            {line.map((token, key) => (
+              <span {...getTokenProps({ token, key })} />
+            ))}
+          </div>
+        ))}
+      </Styled.pre>
+    )}
+  </Highlight>
+}
+
+export default CodeBlock
\ No newline at end of file