Skip to content

Commit

Permalink
docs: add solid example to readme (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
cmgriffing authored Oct 14, 2024
1 parent b40d266 commit 52b6974
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 52b6974

Please sign in to comment.