Replace customization API

docs/components/CodeBlock.jsx

@@ -0,0 +1,7 @@
+import Highlight from 'react-highlight'
+
+export default ({ children, className }) => (
+  <div className="rounded-lg p-6 bg-gray-800 overflow-x-auto text-gray-400 text-sm">
+    <Highlight className={`language-${className.replace(/language-/, '')}`}>{children}</Highlight>
+  </div>
+)

docs/components/Layout.jsx

@@ -1,6 +1,11 @@
 import '../static/css/tailwind.css'
 import { MDXProvider } from '@mdx-js/react'
 import Head from 'next/head'
+import CodeBlock from './CodeBlock'
+
+const components = {
+  code: CodeBlock,
+}
 
 export default ({ meta, children }) => {
   return (
@@ -9,9 +14,11 @@ export default ({ meta, children }) => {
         <title>{meta.title}</title>
       </Head>
       <div className="max-w-3xl w-full mx-auto px-6 py-12">
-        <div className="markdown">
-          { children }
-        </div>
+        <MDXProvider components={components}>
+          <div className="markdown">
+            { children }
+          </div>
+        </MDXProvider>
       </div>
     </div>
   )