From 02a1e3d9fcad42e7202781ede55d059fbbd98de2 Mon Sep 17 00:00:00 2001
From: ScottAgirs <scott@ijs.to>
Date: Fri, 7 May 2021 12:25:52 -0400
Subject: [PATCH] docs: Add inline code example

Signed-off-by: ScottAgirs <scott@ijs.to>
---
 README.md | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5a085d5..474a857 100755
--- a/README.md
+++ b/README.md
@@ -81,12 +81,14 @@ yarn add prism-react-renderer
 
 <img src="./.readme/basic.png" width="237" alt="Screenshot showing highlighted code block" />
 
+### Code block
+
 ```jsx
 import React from "react";
 import { render } from "react-dom";
 import Highlight, { defaultProps } from "prism-react-renderer";
 
-const exampleCode = `
+const exampleCodeBlock = `
 (function someDemo() {
   var test = "Hello World!";
   console.log(test);
@@ -96,7 +98,7 @@ return () => <App />;
 `;
 
 render((
-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
+  <Highlight {...defaultProps} code={exampleCodeBlock} language="jsx">
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
       <pre className={className} style={style}>
         {tokens.map((line, i) => (
@@ -123,6 +125,36 @@ It doesn't render anything itself, it just calls the render function and renders
 ["Use a render prop!"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)!
 `<Highlight>{highlight => <pre>/* your JSX here! */</pre>}</Highlight>`
 
+### Inline Code
+> Note: backticks will break the inline code highlighting
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+const exampleInlineCode = `const ohDeerVar = "Stringly"`;
+
+render((
+  <Highlight {...defaultProps} theme={theme} code={exampleInlineCode} language="jsx">
+      {({ className, style, tokens, getLineProps, getTokenProps }) =>
+        tokens.map((line, i) => (
+          <code
+            {...getLineProps({ key: i, line })}
+            style={style}
+            className={className}
+          >
+            {line.map((token, key) => (
+              <span {...getTokenProps({ key, token })} />
+            ))}
+          </code>
+        ))
+      }
+    </Highlight>,
+  document.getElementById('root')
+);
+```
+
 ### Line Numbers
 
 Add line numbers to your highlighted code blocks using the `index` parameter in your `line.map` function: