Add code highlighting

docs/index.mdx

@@ -1,6 +1,7 @@
 export { future as theme } from '../src/themes'
-import { Image, Notes, Appear } from '../src'
+import { Image, Notes, Appear, Code } from '../src'
 import Layout from './Layout'
+export highlight from 'react-syntax-highlighter/styles/prism/solarizedlight'
 
 # mdx-deck
 
@@ -25,6 +26,26 @@ import Box from 'superbox'
 - To help make your point
 
 ---
+
+## Code Examples
+
+```elixir
+# Elixir example
+x = 2; y = 3
+x + y
+```
+
+```javascript
+/* JavaScript example */
+const foo = a => a * a;
+
+function bar(a) {
+  return a * a;
+}
+```
+
+---
+
   ### Appear
 
   <ul>

package.json

@@ -35,6 +35,7 @@
     "puppeteer": "^1.6.1",
     "react": "^16.4.1",
     "react-dev-utils": "^5.0.1",
+    "react-syntax-highlighter": "^8.0.1",
     "remark-emoji": "^2.0.1",
     "stringify-object": "^3.2.2",
     "styled-components": ">=3.0.0",

src/Code.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withTheme } from 'styled-components'
+import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/prism-light"
+import defaultTheme from 'react-syntax-highlighter/styles/prism/atom-dark'
+import javascript from 'react-syntax-highlighter/languages/prism/javascript'
+import php from 'react-syntax-highlighter/languages/prism/php'
+import elixir from 'react-syntax-highlighter/languages/prism/elixir'
+
+registerLanguage('javascript', javascript);
+// registerLanguage('php', php);
+registerLanguage('elixir', elixir);
+
+export default withTheme(class Code extends React.Component {
+  static propTypes = {
+    children: PropTypes.string.isRequired,
+    className: PropTypes.string
+  }
+
+  getLangauge = (lang) => {
+    return lang ? lang.replace('language-', '') : 'javascript'
+  }
+
+  render() {
+    const { className, children, theme } = this.props
+    const language = this.getLangauge(className)
+    const style = theme.highlight ? theme.highlight : defaultTheme
+
+    return (
+      <SyntaxHighlighter language={language} style={style}>
+        {children}
+      </SyntaxHighlighter>
+    )
+  }
+})

src/components.js

@@ -8,6 +8,7 @@ import {
 } from 'styled-system'
 import Notes from './Notes'
 import Mono from './Mono'
+import Code from './Code'
 
 const css = key => props => props.theme[key]
 
@@ -155,7 +156,7 @@ const code = props => {
         </Notes>
       )
     default:
-      return <Pre {...props} />
+      return <Code {...props} />
   }
 }
 

src/entry.js

@@ -4,14 +4,14 @@ import SlideDeck from './index'
 
 const mod = require(DOC_FILENAME)
 const slides = mod.default
-const { theme, components, Provider } = mod
+const { theme, highlight, components, Provider } = mod
 
 export default class App extends React.Component {
   render () {
     return (
       <SlideDeck
         slides={slides}
-        theme={theme}
+        theme={{...theme, highlight}}
         components={components}
         Provider={Provider}
       />

src/index.js

@@ -18,6 +18,7 @@ import defaultComponents from './components'
 export { default as Image } from './Image'
 export { default as Notes } from './Notes'
 export { default as Appear } from './Appear'
+export { default as Code } from './Code'
 export { default as components } from './components'
 
 // themes