Agent skill
shiki
Shiki 3+ syntax highlighting. Use when highlighting code blocks, MDX content, or building code editors.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/shiki-tirtza-weinfeld-hippocampx
SKILL.md
Shiki 3+
Create highlighter — v3 pattern
ts
import { createHighlighter } from 'shiki'
const highlighter = await createHighlighter({
themes: ['nord', 'github-dark'],
langs: ['typescript', 'python'],
})
const html = highlighter.codeToHtml('const x = 1', {
lang: 'typescript',
theme: 'nord',
})
// NOT getHighlighter — that's v1
Shorthand functions — no highlighter needed
ts
import { codeToHtml, codeToTokens, codeToHast } from 'shiki'
// Direct usage (creates internal highlighter)
const html = await codeToHtml('const x = 1', {
lang: 'typescript',
theme: 'github-dark',
})
const { tokens } = await codeToTokens(code, { lang: 'ts', theme: 'nord' })
const hast = await codeToHast(code, { lang: 'css', theme: 'min-dark' })
Rehype integration — @shikijs/rehype
ts
import rehypeShiki from '@shikijs/rehype'
import remarkRehype from 'remark-rehype'
import { unified } from 'unified'
const processor = unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeShiki, {
themes: {
light: 'github-light',
dark: 'github-dark',
},
// Inline code: `code{:lang}`
inline: 'tailing-curly-colon',
})
Transformers — hook into rendering
ts
import { transformerNotationHighlight } from '@shikijs/transformers'
const html = await codeToHtml(code, {
lang: 'ts',
theme: 'nord',
transformers: [
transformerNotationHighlight(), // [!code highlight]
{
// Custom transformer
line(node, line) {
node.properties['data-line'] = line
},
code(node) {
this.addClassToHast(node, 'my-code-block')
},
},
],
})
Fine-grained bundles — v3 engine system
ts
import { createHighlighterCore } from 'shiki/core'
import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
const highlighter = await createHighlighterCore({
themes: [import('@shikijs/themes/nord')],
langs: [import('@shikijs/langs/typescript')],
engine: createOnigurumaEngine(() => import('shiki/wasm')),
})
// NOT loadWasm from 'shiki' — that's v1/v2
Avoid
getHighlighter()→createHighlighter()loadWasmfrom'shiki'→createOnigurumaEnginefrom'shiki/engine/oniguruma'@shikijs/compat→ discontinued, use main packagepostprocesshook in rehype → doesn't run, useroothook insteadcreatedBundledHighlighter(fn, fn)→ single object argument in v3
Didn't find tool you were looking for?