diff --git a/package/README.md b/package/README.md
index af0fcfd..bf1621c 100644
--- a/package/README.md
+++ b/package/README.md
@@ -1,40 +1,35 @@
 > [!WARNING]
-> This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a drop in replacement for `react-syntax-highlighter`
+> This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a near-drop-in replacement for `react-syntax-highlighter`
 
 
 # 🎨 [react-shiki](https://react-shiki.vercel.app/)
 
-Syntax highlighting component for react using [Shiki](https://shiki.matsu.io/)
+Syntax highlighting component and hook for react using [Shiki](https://shiki.matsu.io/)
 
 
-See the [demo](https://react-shiki.vercel.app/) page with multiple theme examples and usage instructions!
+[See the demo page for a version of this README with highlighted code blocks showcasing several Shiki themes!](https://react-shiki.vercel.app/)
 
 ## Features
-- No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser` 
-- Provides a `ShikiHighlighter` component for highlighting code as children, as well as a `useShikiHighlighter` hook for users who want more control over the rendering of highlighted code
-- Supports all Shiki languages and themes
-- Includes minimal default styles for code blocks
-- Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
-- `ShikiHighlighter` component displays a language label for each code block when `showLanguage` is set to `true` (default)
-- Users can customize the styling of the generated code blocks by passing a `style` object or a `className` 
+- 🖼️ Provides a `ShikiHighlighter` component for highlighting code as children, as well as a `useShikiHighlighter` hook for more flexibility
+- 🔐 No `dangerouslySetInnerHTML`, output from Shiki is parsed using `html-react-parser` 
+- 📦 Supports all Shiki languages and themes
+- 📚 Includes minimal default styles for code blocks
+- 🚀 Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
+- 🖥️ `ShikiHighlighter` component displays a language label for each code block when `showLanguage` is set to `true` (default)
+- 🎨 Users can customize the styling of the generated code blocks by passing a `style` object or a `className`
 
-## Installation
 
-```bash
-(pnpm|bun|yarn) add react-shiki
-```
-or
+## Installation
 
 ```bash
-npm install react-shiki
+[pnpm|bun|yarn|npm] [add|install] react-shiki
 ```
 
 ## Usage
 
 You can use the `ShikiHighlighter` component, or the `useShikiHighlighter` hook to highlight code.
 
-
-`useShikiHighlighter` is a custom hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements:
+`useShikiHighlighter` is a hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements. It's useful for users who want full control over the rendering of highlighted code.
 ```tsx
 const highlightedCode = useShikiHighlighter(code, language, theme);
 ```
@@ -61,6 +56,25 @@ The component accepts several props in addition to language and theme:
 - `as: string` - The component to be rendered. Defaults to 'pre'.
 - `className: string` - Class name to be passed to the component.
 
+```tsx
+function Houston() {
+  return (
+    <ShikiHighlighter
+      language="jsx"
+      theme="houston"
+      showLanguage={false}
+      addDefaultStyles={true}
+      as="div"
+      style={{
+        textAlign: 'left',
+      }}
+    >
+      {code.trim()}
+    </ShikiHighlighter>
+  );
+}
+```
+
 It can also be used with `react-markdown`:
 ```tsx
 import type { ReactNode } from 'react';
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index 716ee68..8de11b7 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -20,8 +20,16 @@ function App() {
           <img src={shikiLogo} className="logo shiki" alt="Shiki logo" />
         </a>
       </div>
-      <h1>react-shiki testing</h1>
-      <h2>Syntax highlighter component for react using shiki</h2>
+      <h1>
+        🎨{' '}
+        <a href="https://github.com/avgvstvs96/react-shiki">
+          react-shiki
+        </a>
+      </h1>{' '}
+      <h2>
+        Syntax highlighter component for react using{' '}
+        <a href="https://shiki.matsu.io/">Shiki</a>
+      </h2>
       <HighlightCodeBlocks />
       <div style={{ marginBlock: '10rem' }} />
       <footer style={{ opacity: '55%', fontSize: '14px' }}>
diff --git a/playground/src/CodeTest.tsx b/playground/src/CodeTest.tsx
index 1202730..c14c485 100644
--- a/playground/src/CodeTest.tsx
+++ b/playground/src/CodeTest.tsx
@@ -2,56 +2,201 @@ import ShikiHighlighter from 'react-shiki';
 import React from 'react';
 import './App.css';
 
-export const HighlightCodeBlocks = React.memo(() => {
-  function AyuDark() {
-    const code = `
+function MoreExamples() {
+  return (
+    <>
+      {' '}
+      <h2>More Examples</h2>
+      <ShikiHighlighter language="tsx" theme="catppuccin-mocha">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="poimandres">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="snazzy-light">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="vesper">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="vitesse-light">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="synthwave-84">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="catppuccin-latte">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+      <ShikiHighlighter language="tsx" theme="night-owl">
+        {`
+const RenderedMessage = React.memo(({ message }: { message: Message }) => (
+  <div className={cn(messageStyles[message.role])}>
+    <ReactMarkdown components={{ code: CodeHighlight }}>
+      {message.content}
+    </ReactMarkdown>
+  </div>
+));
+
+export const ChatMessages = ({ messages }: { messages: Message[] }) => {
+  return (
+    <div className='space-y-4'>
+      {messages.map((message) => (
+        <RenderedMessage key={message.id} message={message} />
+      ))}
+    </div>
+  );
+};`.trim()}
+      </ShikiHighlighter>
+    </>
+  );
+}
+
 function AyuDark() {
+  const code = `
+function CodeBlock() {
   return (
     <ShikiHighlighter language="jsx" theme="ayu-dark">
       {code.trim()}
     </ShikiHighlighter>
   );
 }
-  `;
-    return (
-      <ShikiHighlighter
-        language="jsx"
-        theme="ayu-dark"
-        as="div"
-        style={{
-          textAlign: 'left',
-        }}
-      >
-        {code.trim()}
-      </ShikiHighlighter>
-    );
-  }
-
-  function CatppuccinMocha() {
-    const code = `
-function CatpuccinMocha() {
+    `;
   return (
-    <ShikiHighlighter language="jsx" theme="catppuccin-mocha">
+    <ShikiHighlighter
+      language="jsx"
+      theme="ayu-dark"
+      as="div"
+      style={{
+        textAlign: 'left',
+      }}
+    >
       {code.trim()}
     </ShikiHighlighter>
   );
 }
-  `;
-    return (
-      <ShikiHighlighter
-        language="jsx"
-        theme="catppuccin-mocha"
-        style={{
-          textAlign: 'left',
-        }}
-      >
-        {code.trim()}
-      </ShikiHighlighter>
-    );
-  }
 
-  function Houston() {
-    const code = `
+function Houston() {
+  const code = `
 function Houston() {
   return (
     <ShikiHighlighter
@@ -68,34 +213,113 @@ function Houston() {
     </ShikiHighlighter>
   );
 }
-  `;
-    return (
-      <ShikiHighlighter
-        language="jsx"
-        theme="houston"
-        showLanguage={false}
+    `;
+  return (
+    <ShikiHighlighter
+      language="jsx"
+      theme="houston"
+      showLanguage={false}
+      style={{
+        textAlign: 'left',
+      }}
+    >
+      {code.trim()}
+    </ShikiHighlighter>
+  );
+}
+
+export const HighlightCodeBlocks = React.memo(() => {
+  return (
+    <div style={{ textAlign: 'left', maxWidth: '65ch' }}>
+      <div
         style={{
-          textAlign: 'left',
+          backgroundColor: '#fff3cd',
+          border: '1px solid #ffeeba',
+          color: '#856404',
+          padding: '15px',
+          borderRadius: '5px',
+          marginBottom: '20px',
         }}
       >
-        {code.trim()}
+        <strong>WARNING:</strong> This package is still a work in
+        progress, it is not yet recommended for production use.
+        Contributions are welcome! My goal is to eventually build this out
+        as a near-drop-in replacement for{' '}
+        <code>react-syntax-highlighter</code>
+      </div>
+
+      <p>
+        See the{'  '}
+        <a href="https://github.com/avgvstvs96/react-shiki">
+          GitHub repository
+        </a>{' '}
+        for source code and more information!
+      </p>
+
+      <h2>Features</h2>
+      <ul>
+        <li>
+          🖼️ Provides a <code>ShikiHighlighter</code> component for
+          highlighting code as children, as well as a{' '}
+          <code>useShikiHighlighter</code> hook for more flexibility
+        </li>
+        <li>
+          🔐 No <code>dangerouslySetInnerHTML</code>, output from Shiki is
+          parsed using <code>html-react-parser</code>
+        </li>
+        <li>📦 Supports all Shiki languages and themes</li>
+        <li>📚 Includes minimal default styles for code blocks</li>
+        <li>
+          🚀 Shiki dynamically imports only the languages and themes used
+          on a page, optimizing for performance
+        </li>
+        <li>
+          🖥️ <code>ShikiHighlighter</code> component displays a language
+          label for each code block when <code>showLanguage</code> is set
+          to <code>true</code> (default)
+        </li>
+        <li>
+          🎨 Users can customize the styling of the generated code blocks
+          by passing a <code>style</code> object or a{' '}
+          <code>className</code>
+        </li>
+      </ul>
+
+      <h2>Installation</h2>
+      <ShikiHighlighter language="bash" theme="tokyo-night">
+        {'[pnpm|bun|yarn|npm] [add|install] react-shiki'}
       </ShikiHighlighter>
-    );
-  }
 
-  return (
-    <div style={{ textAlign: 'left', maxWidth: '65ch' }}>
-      <h3>Usage</h3>
-      <AyuDark />
-      <p style={{ marginTop: '1.5rem' }}>
-        The ShikiHighlighter is imported in your project and used as a
-        component, with code to be highlighted passed as children.
+      <h2>Usage</h2>
+      <p>
+        You can use the <code>ShikiHighlighter</code> component, or the{' '}
+        <code>useShikiHighlighter</code> hook to highlight code.
       </p>
-      <p style={{ marginBottom: '1.5rem' }}>
-        Shiki handles dynamically imports only the languages and themes
-        used on the page.
+
+      <p>
+        <code>useShikiHighlighter</code> is a hook that takes in the code
+        to be highlighted, the language, and the theme, and returns the
+        highlighted code as React elements. It's useful for users who want
+        full control over the rendering of highlighted code.
+      </p>
+      <ShikiHighlighter language="tsx" theme="andromeeda">
+        {
+          'const highlightedCode = useShikiHighlighter(code, language, theme);'
+        }
+      </ShikiHighlighter>
+
+      <p>
+        The <code>ShikiHighlighter</code> component is imported in your
+        project, with the code to be highlighted passed as its children.
       </p>
-      <CatppuccinMocha />
+
+      <p>
+        Shiki automatically handles dynamically importing only the
+        languages and themes used on the page.
+      </p>
+
+      <AyuDark />
+
       <p style={{ marginTop: '1.5rem', marginBottom: '-0.5rem' }}>
         The component accepts several props in addition to language and
         theme:
@@ -120,10 +344,11 @@ function Houston() {
       </ul>
       <Houston />
       <p>
-        It can also be used with <code>react-markdown</code>
+        It can also be used with <code>react-markdown</code>:
       </p>
-      <ShikiHighlighter language="jsx" theme="vitesse-black">
-        {`import type { ReactNode } from 'react';
+      <ShikiHighlighter language="tsx" theme="vitesse-black">
+        {`
+import type { ReactNode } from 'react';
 import type { BundledLanguage } from 'shiki';
 import ShikiHighlighter, { isInlineCode, type Element } from 'react-shiki';
 
@@ -139,7 +364,7 @@ export const CodeHighlight = ({
   node,
   ...props
 }: CodeHighlightProps): JSX.Element => {
-  const match = className?.match(/language-(\w+)/);
+  const match = className?.match(/language-(\\w+)/);
   // TODO: remove need for consumer use of BundledLanguage from shiki
   const language = match ? (match[1] as BundledLanguage) : undefined;
 
@@ -157,26 +382,31 @@ export const CodeHighlight = ({
       {children}
     </code>
   );
-};`}
+};`.trim()}
       </ShikiHighlighter>
       <p>
         Pass CodeHighlight to <code>react-markdown</code> as a code
-        component
+        component:
       </p>
-      <ShikiHighlighter language="jsx" theme="rose-pine-moon">
-        {`import ReactMarkdown from 'react-markdown';
+      <ShikiHighlighter language="tsx" theme="rose-pine-moon">
+        {`
+import ReactMarkdown from 'react-markdown';
 import { CodeHighlight } from './CodeHighlight';
 
-<ReactMarkdown components={{ code: CodeHighlight }}>
+<ReactMarkdown
+  components={{
+    code: CodeHighlight,
+  }}
+>
   {markdown}
-</ReactMarkdown>`}
+</ReactMarkdown>`.trim()}
       </ShikiHighlighter>
       <p>
         This works great for highlighting in realtime on the client, I use
         it for an LLM chatbot UI, it renders markdown and highlights code
         in memoized chat messages:
       </p>
-      <ShikiHighlighter language="jsx" theme="material-theme-ocean">
+      <ShikiHighlighter language="tsx" theme="material-theme-ocean">
         {`const RenderedMessage = React.memo(({ message }: { message: Message }) => (
   <div className={cn(messageStyles[message.role])}>
     <ReactMarkdown components={{ code: CodeHighlight }}>
@@ -193,8 +423,9 @@ export const ChatMessages = ({ messages }: { messages: Message[] }) => {
       ))}
     </div>
   );
-};`}
+};`.trim()}
       </ShikiHighlighter>
+      <MoreExamples />
     </div>
   );
 });