From 1b8647c2f38fe3dc8c7ea22b3e929fb134db1eb5 Mon Sep 17 00:00:00 2001
From: katamartin <katasm@gmail.com>
Date: Tue, 1 Nov 2022 16:02:50 -0700
Subject: [PATCH] Update README

---
 README.md | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index f7dae30..e5de5bf 100644
--- a/README.md
+++ b/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 (