Update README

README.md

@@ -42,15 +42,16 @@ When using the `LiveCode` component you must specify the `live` flag to include
 
 ## usage with MDX
 
-Import the component(s) you want and pass to an `MDXProvider`.
+In order to use markdown meta props like `live` and `theme` discussed below, note that you will need to use [`remark-mdx-code-meta`]O(https://github.com/remcohaszing/remark-mdx-code-meta) or [another solution for syntax highlighting with the meta field](https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field).
+
+Once enabled, import the component(s) you want and pass to an `MDXProvider`.
 
 ```jsx
 import { MDXProvider } from '@mdx-js/react'
-import { LiveCode, Pre } from '@carbonplan/prism'
+import { LiveCode } from '@carbonplan/prism'
 
 const components = {
-  code: LiveCode,
-  pre: Pre,
+  pre: LiveCode,
 }
 
 return (
@@ -102,15 +103,14 @@ Both the `Code` and `LiveCode` components take an optional `theme` property whic
 
 <img width="669" alt="CleanShot 2021-06-19 at 10 01 08@2x" src="https://user-images.githubusercontent.com/3387500/122650023-6ffef480-d0e5-11eb-9587-f179f711f231.png">
 
-You can set the `theme` once when definining the component, like this.
+You can set the `theme` once when defining the component, like this.
 
 ```jsx
 import { MDXProvider } from '@mdx-js/react'
-import { Code, Pre } from '@carbonplan/prism'
+import { Code } from '@carbonplan/prism'
 
 const components = {
-  code: ({ ...props }) => <Code theme='polychrome' {...props}/>,
-  pre: Pre,
+  pre: ({ ...props }) => <Code theme='polychrome' {...props}/>,
 }
 
 return (
@@ -149,7 +149,7 @@ As an example, the following ensures that all code is interpreted as a React fra
 ```jsx
 import { useState } from 'react'
 import { MDXProvider } from '@mdx-js/react'
-import { LiveCode, Pre } from '@carbonplan/prism'
+import { LiveCode } from '@carbonplan/prism'
 
 const transform = (src) => {
   if (!src.startsWith('()')) {
@@ -164,8 +164,7 @@ const scope = {
 }
 
 const components = {
-  code: ({...props}) => <LiveCode transform={transform} scope={scope} {...props}/>,
-  pre: Pre,
+  pre: ({...props}) => <LiveCode transform={transform} scope={scope} {...props}/>,
 }
 
 return (