From 52b69743f16559d6ef1669c6a0cd9f19f5fd8d2d Mon Sep 17 00:00:00 2001
From: Chris Griffing <cmgriffing@gmail.com>
Date: Mon, 14 Oct 2024 02:11:21 -0400
Subject: [PATCH] docs: add solid example to readme (#28)

---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/README.md b/README.md
index 3b961dd..b280ab4 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,54 @@ function App() {
 }
 ```
 
+### Solid
+
+Import `shiki-magic-move/solid`, and pass the highlighter instance to the `ShikiMagicMove` component.
+
+```tsx
+import { getHighlighter, type HighlighterCore } from 'shiki'
+import { ShikiMagicMove } from 'shiki-magic-move/solid'
+import { createResource, createSignal } from 'solid-js'
+
+import 'shiki-magic-move/dist/style.css'
+
+function App() {
+  const [code, setCode] = createSignal(`const hello = 'world'`)
+
+  const [highlighter] = createResource(async () => {
+    const newHighlighter = await createHighlighter({
+      themes: Object.keys(bundledThemes),
+      langs: Object.keys(bundledLanguages),
+    })
+
+    return newHighlighter
+  })
+
+  function animate() {
+    setCode(`let hi = 'hello'`)
+  }
+
+  return (
+    <div>
+      <Show when={highlighter()}>
+        {highlighter => (
+          <>
+            <ShikiMagicMove
+              lang="ts"
+              theme="nord"
+              highlighter={highlighter()}
+              code={code()}
+              options={{ duration: 800, stagger: 0.3, lineNumbers: true }}
+            />
+            <button onClick={animate}>Animate</button>
+          </>
+        )}
+      </Show>
+    </div>
+  )
+}
+```
+
 ### Svelte
 
 Import `shiki-magic-move/svelte`, and pass the highlighter instance to the `ShikiMagicMove` component.