docs/editor-plugins.md

@@ -0,0 +1,11 @@
+# Editor Plugins
+
+*   [vscode][]: VSCode
+*   [vim][]: Vim
+*   [sublime][]: Sublime
+
+[vscode]: https://github.com/silvenon/vscode-mdx
+
+[vim]: https://github.com/jxnblk/vim-mdx-js
+
+[sublime]: https://github.com/jonsuh/mdx-sublime

examples/syntax-highlighting/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+public

examples/syntax-highlighting/gatsby-config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: 'gatsby-mdx',
+      options: {
+        defaultLayouts: {
+          default: require.resolve('./src/components/Layout')
+        }
+      }
+    }
+  ]
+}

examples/syntax-highlighting/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "gatsby",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^0.16.8",
+    "@mdx-js/tag": "^0.16.8",
+    "gatsby": "^2.0.98",
+    "gatsby-mdx": "^0.3.5",
+    "prism-react-renderer": "^0.1.6",
+    "react-live": "^1.12.0",
+    "unified-ui": "^0.0.3"
+  }
+}

examples/syntax-highlighting/readme.md

@@ -0,0 +1,5 @@
+# Gatsby + MDX
+
+```sh
+yarn && yarn start
+```

examples/syntax-highlighting/src/components/CodeBlock.js

@@ -0,0 +1,46 @@
+/* eslint react/jsx-key: 0 */
+
+import React from 'react'
+import Highlight, {defaultProps} from 'prism-react-renderer'
+import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
+
+export default ({children, className, live, render}) => {
+  const language = className.replace(/language-/, '')
+
+  if (live) {
+    return (
+      <div style={{marginTop: '40px'}}>
+        <LiveProvider code={children}>
+          <LivePreview />
+          <LiveEditor />
+          <LiveError />
+        </LiveProvider>
+      </div>
+    )
+  }
+  if (render) {
+    return (
+      <div style={{marginTop: '40px'}}>
+        <LiveProvider code={children}>
+          <LivePreview />
+        </LiveProvider>
+      </div>
+    )
+  }
+
+  return (
+    <Highlight {...defaultProps} code={children} language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={className} style={{...style, padding: '20px'}}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({line, key: i})}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  )
+}

examples/syntax-highlighting/src/components/Layout.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import {MDXProvider} from '@mdx-js/tag'
+import {Container, baseStyles} from 'unified-ui'
+
+import CodeBlock from './CodeBlock'
+
+const Style = ({children}) => (
+  <style
+    dangerouslySetInnerHTML={{
+      __html: children
+    }}
+  />
+)
+
+const components = {
+  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
+  pre: props => <div {...props} />,
+  code: CodeBlock
+}
+
+export default props => (
+  <MDXProvider components={components}>
+    <>
+      <Style>{baseStyles}</Style>
+      <Container {...props} />
+    </>
+  </MDXProvider>
+)

examples/syntax-highlighting/src/pages/index.mdx

@@ -0,0 +1,18 @@
+# Hello, world!
+
+```js
+import React from 'react'
+import Example from './place'
+
+export default () => (
+  <Example />
+)
+```
+
+```js render=true
+<div style={{ backgroundColor: 'rebeccapurple', padding: '20px', marginTop: '20px' }} />
+```
+
+```js live=true
+<div style={{ backgroundColor: 'tomato', padding: '20px' }} />
+```