diff --git a/docs/content/4.plugins/1.built-in/rangi.md b/docs/content/4.plugins/1.built-in/rangi.md
index f656f353..e500615e 100644
--- a/docs/content/4.plugins/1.built-in/rangi.md
+++ b/docs/content/4.plugins/1.built-in/rangi.md
@@ -1,6 +1,6 @@
 ---
 title: Rangi (Highlight)
-description: Lightweight syntax highlighting for code blocks using rangi.
+description: Lightweight syntax highlighting for code blocks and language-tagged inline code using rangi.
 seo:
   title: Syntax Highlighting using Rangi
 navigation:
@@ -146,6 +146,22 @@ const tokens = tokenize(source, {
 
 Rangi ships aliases built-in (`javascript`→`js`, `typescript`→`ts`, `python`→`py`, `yml`→`yaml`, …). Comark passes the fence info string straight through. Unknown languages fall back to plain text (no throw).
 
+### Inline code
+
+Inline code is highlighted when it declares a language with the attributes syntax. `lang` wins over `language`:
+
+```markdown
+The type is `Ref<HTMLInputElement | null>`{lang="ts-type"} and the component is `<UButton />`{lang="vue-html"}.
+```
+
+Two fragment languages ship out of the box: `ts-type` tokenizes through the TypeScript grammar seeded with `let a:`, and `vue-html` through the Vue grammar seeded with `<template>`. Without that seed a bare type or a bare tag can fall through to weaker highlighting.
+
+The `<code>` element gets the same `shj shiki shj-lang-…` class a highlighted `<pre>` gets, so dual-theme CSS hooks shared with the Shiki plugin cover it with no extra rules. Inline code does not wrap lines, so `lineNumbers` and `preStyles` do not apply to it.
+
+Inline code naming a grammar that is not known (bundled, Comark, or custom via `languages`) is left exactly as it was written, with no class and no spans. `lang` is a real HTML attribute for natural language, so `` `Bonjour`{lang="fr"} `` must not be treated as code. A fenced block behaves differently and still falls back to an unhighlighted `.shiki` block, because a `<pre>` is unambiguously code.
+
+Set `inlineCode: false` to turn this off.
+
 ### Line highlighting
 
 Fence info `{2-3,5}` wraps the code in line spans and marks the selected lines with the `.highlight` class — same as the Shiki plugin. No `lineNumbers` option is required.
@@ -173,6 +189,7 @@ Returns a `ComarkPlugin` that enables rangi syntax highlighting.
 | [`classPrefix`](#classprefix) | `string` | `'shj'` | Class prefix on the highlighted `<pre>` |
 | [`languages`](#languages) | `Record<string, grammar>` | — | Extra custom grammars, merged over the Comark ones |
 | [`preStyles`](#prestyles) | `boolean` | `false` | Add inline background/foreground styles to `<pre>` |
+| [`inlineCode`](#inlinecode) | `boolean` | `true` | Highlight inline code that declares a language |
 
 ### `theme`
 
@@ -239,6 +256,16 @@ rangi({ preStyles: true })
 
 **Default:** `false`
 
+### `inlineCode`
+
+Whether to highlight inline code that declares a language, e.g. `` `Ref<T>`{lang="ts-type"} ``. See [Inline code](#inline-code).
+
+```typescript
+rangi({ inlineCode: false })
+```
+
+**Default:** `true`
+
 ---
 
 ## Examples
diff --git a/docs/content/4.plugins/1.built-in/shiki.md b/docs/content/4.plugins/1.built-in/shiki.md
index 9ef4539b..05335972 100644
--- a/docs/content/4.plugins/1.built-in/shiki.md
+++ b/docs/content/4.plugins/1.built-in/shiki.md
@@ -196,6 +196,22 @@ const x: number = 42
 ```
 ````
 
+### Inline code
+
+Inline code is highlighted when it declares a language with the attributes syntax. `lang` wins over `language`:
+
+```markdown
+The type is `Ref<HTMLInputElement | null>`{lang="ts-type"} and the component is `<UButton />`{lang="vue-html"}.
+```
+
+Two fragment languages ship out of the box: `ts-type` tokenizes through the TypeScript grammar seeded with `let a:`, and `vue-html` through the Vue grammar seeded with `<template>`. Without that seed a bare type or a bare tag falls through to plain text.
+
+The `<code>` element gets the same `shiki` class a `<pre>` gets, so the dual-theme CSS in [Styling](#styling) covers it with no extra rules. Inline code uses the fast token path, so `transformers` and `preStyles` do not apply to it.
+
+Inline code naming a grammar that is not registered is left exactly as it was written, with no class and no spans. `lang` is a real HTML attribute for natural language, so `` `Bonjour`{lang="fr"} `` must not be treated as code. A fenced block behaves differently and still falls back to an unhighlighted `.shiki` block, because a `<pre>` is unambiguously code.
+
+Set `inlineCode: false` to turn this off.
+
 ### Line highlighting
 
 Highlight specific lines using `{line-numbers}` syntax:
@@ -304,6 +320,7 @@ Two option types, one per entry:
 | [`languages`](#options-languages) | `Array<LanguageRegistration \| LanguageRegistration[]>` | `undefined` | Extra languages (merged onto the default set) |
 | [`transformers`](#options-transformers) | `ShikiTransformer[]` | `undefined` | Shiki transformers applied to every block |
 | [`preStyles`](#options-prestyles) | `boolean` | `false` | Add inline background/foreground styles to `<pre>` |
+| [`inlineCode`](#options-inlinecode) | `boolean` | `true` | Highlight inline code that declares a language |
 | [`registerDefaultLanguages`](#options-registerdefaultlanguages) | `boolean` | `true` | Register the built-in default language set |
 | [`registerDefaultThemes`](#options-registerdefaultthemes) | `boolean` | `true` | Register the built-in Material themes |
 
@@ -315,6 +332,7 @@ Two option types, one per entry:
 | `languages` | `Array<LanguageRegistration \| LanguageRegistration[]>` | **required** | Languages to register |
 | `transformers` | `ShikiTransformer[]` | `undefined` | Shiki transformers applied to every block |
 | `preStyles` | `boolean` | `false` | Add inline background/foreground styles to `<pre>` |
+| `inlineCode` | `boolean` | `true` | Highlight inline code that declares a language |
 
 ### `themes`
 
@@ -384,6 +402,16 @@ shiki({ preStyles: true })
 
 **Default:** `false`
 
+### `inlineCode`
+
+Whether to highlight inline code that declares a language, e.g. `` `Ref<T>`{lang="ts-type"} ``. See [Inline code](#inline-code).
+
+```typescript
+shiki({ inlineCode: false })
+```
+
+**Default:** `true`
+
 ### `registerDefaultLanguages`
 
 Standard entry only. When `true`, these languages are pre-registered: `vue`, `tsx`, `svelte`, `astro`, `typescript`, `javascript`, `bash`, `json`, `yaml` (plus the built-in Comark/`mdc` grammar). Set to `false` to control the language set entirely via `languages`.
@@ -486,7 +514,7 @@ Browser-side twoslash with CDN-fetched TypeScript types and interactive type pop
 
 ## Styling
 
-Shiki outputs tokens as `<span class="line">` elements inside a `<pre class="shiki">` block.
+Shiki outputs tokens as `<span class="line">` elements inside a `<pre class="shiki">` block. Highlighted inline code gets the same `shiki` class on the `<code>` element, with the token spans directly inside it and no `.line` wrapper.
 
 ### Line highlight
 
diff --git a/packages/comark/SPEC/COMARK/rangi-inline-code-lang.md b/packages/comark/SPEC/COMARK/rangi-inline-code-lang.md
new file mode 100644
index 00000000..dfe0490c
--- /dev/null
+++ b/packages/comark/SPEC/COMARK/rangi-inline-code-lang.md
@@ -0,0 +1,77 @@
+---
+timeout:
+  parse: 500ms
+  html: 5ms
+  markdown: 5ms
+options:
+  plugins:
+    - rangi
+---
+
+## Input
+
+```md
+Use `const a = 1`{lang="ts"} here.
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "p",
+      {},
+      "Use ",
+      [
+        "code",
+        {
+          "lang": "ts",
+          "class": "shj shiki shj-lang-ts"
+        },
+        [
+          "span",
+          {
+            "class": "shj-syn-kwd shj-kwd",
+            "style": "color:#e16;--shiki-dark:#ff7cc6"
+          },
+          "const"
+        ],
+        " a ",
+        [
+          "span",
+          {
+            "class": "shj-syn-oper shj-oper",
+            "style": "color:#5af;--shiki-dark:#80c6ff"
+          },
+          "="
+        ],
+        " ",
+        [
+          "span",
+          {
+            "class": "shj-syn-num shj-num",
+            "style": "color:#f60;--shiki-dark:#b581fd"
+          },
+          "1"
+        ]
+      ],
+      " here."
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<p>Use <code lang="ts" class="shj shiki shj-lang-ts"><span class="shj-syn-kwd shj-kwd" style="color:#e16;--shiki-dark:#ff7cc6">const</span> a <span class="shj-syn-oper shj-oper" style="color:#5af;--shiki-dark:#80c6ff">=</span> <span class="shj-syn-num shj-num" style="color:#f60;--shiki-dark:#b581fd">1</span></code> here.</p>
+```
+
+## Markdown
+
+```md
+Use `const a = 1`{lang="ts"} here.
+```
diff --git a/packages/comark/SPEC/COMARK/shiki-inline-code-lang.md b/packages/comark/SPEC/COMARK/shiki-inline-code-lang.md
new file mode 100644
index 00000000..aa6c067e
--- /dev/null
+++ b/packages/comark/SPEC/COMARK/shiki-inline-code-lang.md
@@ -0,0 +1,80 @@
+---
+timeout:
+  parse: 500ms
+  html: 5ms
+  markdown: 5ms
+options:
+  highlight:
+    themes:
+      light: 'github-dark'
+---
+
+## Input
+
+```md
+Use `Ref<T>`{lang="ts-type"} here.
+```
+
+## AST
+
+```json
+{
+  "frontmatter": {},
+  "meta": {},
+  "nodes": [
+    [
+      "p",
+      {},
+      "Use ",
+      [
+        "code",
+        {
+          "lang": "ts-type",
+          "class": "shiki shiki-themes github-dark dark:github-dark"
+        },
+        [
+          "span",
+          {
+            "style": "color:#B392F0"
+          },
+          "Ref"
+        ],
+        [
+          "span",
+          {
+            "style": "color:#E1E4E8"
+          },
+          "<"
+        ],
+        [
+          "span",
+          {
+            "style": "color:#B392F0"
+          },
+          "T"
+        ],
+        [
+          "span",
+          {
+            "style": "color:#E1E4E8"
+          },
+          ">"
+        ]
+      ],
+      " here."
+    ]
+  ]
+}
+```
+
+## HTML
+
+```html
+<p>Use <code lang="ts-type" class="shiki shiki-themes github-dark dark:github-dark"><span style="color:#B392F0">Ref</span><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">T</span><span style="color:#E1E4E8">&gt;</span></code> here.</p>
+```
+
+## Markdown
+
+```md
+Use `Ref<T>`{lang="ts-type"} here.
+```
diff --git a/packages/comark/src/internal/inline-code-lang.ts b/packages/comark/src/internal/inline-code-lang.ts
new file mode 100644
index 00000000..5e354368
--- /dev/null
+++ b/packages/comark/src/internal/inline-code-lang.ts
@@ -0,0 +1,22 @@
+import type { ElementNodeAttributes } from 'comark'
+
+/**
+ * Fragment languages: a name authors write in `{lang="…"}` mapped onto a real
+ * grammar plus source that seeds the grammar state and is then discarded.
+ * Named after the `@nuxtjs/mdc` conventions so `ts-type` and `vue-html` keep
+ * working for sites migrating off it. Shared by the Shiki and rangi plugins.
+ */
+export const GRAMMAR_CONTEXTS = new Map<string, { lang: string; grammarContextCode: string }>([
+  ['ts-type', { lang: 'typescript', grammarContextCode: 'let a:' }],
+  ['vue-html', { lang: 'vue', grammarContextCode: '<template>' }],
+])
+
+/**
+ * Read the language an inline `<code>` declares. `lang` wins over `language`:
+ * `lang` is what authors type, `language` is what the fence path already uses.
+ */
+export function inlineCodeLanguage(attrs: ElementNodeAttributes): string | undefined {
+  const raw = attrs?.lang ?? attrs?.language
+  if (typeof raw !== 'string') return undefined
+  return raw.trim() || undefined
+}
diff --git a/packages/comark/src/internal/shiki.ts b/packages/comark/src/internal/shiki.ts
index 62ca7d23..1baf61f7 100644
--- a/packages/comark/src/internal/shiki.ts
+++ b/packages/comark/src/internal/shiki.ts
@@ -1,10 +1,11 @@
-import type { LanguageRegistration, ShikiTransformer, ShikiPrimitive, ThemeRegistration } from 'shiki'
+import type { LanguageRegistration, ShikiTransformer, ShikiPrimitive, ThemeRegistration, ThemedToken } from 'shiki'
 import type { ElementNode, Node, MarkdownDocument, ElementNodeAttributes } from 'comark'
 import { defineComarkPlugin } from '../utils/helpers.ts'
 import { createShikiPrimitive } from 'shiki'
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
 import { codeToHast, codeToTokens, getTokenStyleObject, stringifyTokenStyle } from 'shiki/core'
 import comarkLanguages from '../plugins/shiki/language-comark.ts'
+import { GRAMMAR_CONTEXTS, inlineCodeLanguage } from './inline-code-lang.ts'
 
 export interface ShikiCoreOptions {
   /**
@@ -32,6 +33,15 @@ export interface ShikiCoreOptions {
    * @default false
    */
   preStyles?: boolean
+
+  /**
+   * Whether to highlight inline code that declares a language, e.g.
+   * `` `Ref<T>`{lang="ts-type"} ``. `lang` wins over `language`. Inline code
+   * uses the fast token path, so `transformers` and `preStyles` do not apply.
+   *
+   * @default true
+   */
+  inlineCode?: boolean
 }
 
 /**
@@ -230,6 +240,41 @@ function hastToNode(input: any): Node {
   return result as Node
 }
 
+/**
+ * Build `<span style=…>` children for one tokenized line.
+ * Replicates shiki's `mergeWhitespaceTokens`: a pure-whitespace token merges
+ * into the following token unless it is underlined or struck through.
+ */
+function tokensToSpans(line: ThemedToken[]): Node[] {
+  const spanCount = line.length
+  let carry = ''
+  const spans: Node[] = []
+  for (let t = 0; t < spanCount; t++) {
+    const tk = line[t]
+    const canMerge = !((tk.fontStyle && (tk.fontStyle & 8 /* Strikethrough */ || tk.fontStyle & 4)) /* Underline */)
+    if (canMerge && /^\s+$/.test(tk.content) && t + 1 < spanCount) {
+      carry += tk.content
+    } else if (carry) {
+      const style = stringifyTokenStyle(tk.htmlStyle || getTokenStyleObject(tk))
+      if (canMerge) {
+        spans.push(style ? ['span', { style }, carry + tk.content] : ['span', {}, carry + tk.content])
+      } else {
+        spans.push(['span', {}, carry])
+        spans.push(style ? ['span', { style }, tk.content] : ['span', {}, tk.content])
+      }
+      carry = ''
+    } else {
+      const style = stringifyTokenStyle(tk.htmlStyle || getTokenStyleObject(tk))
+      spans.push(style ? ['span', { style }, tk.content] : ['span', {}, tk.content])
+    }
+  }
+  // If trailing whitespace wasn't merged, emit it
+  if (carry) {
+    spans.push(['span', {}, carry])
+  }
+  return spans
+}
+
 /**
  * Apply syntax highlighting to all code blocks in a Comark tree
  * Uses codeToTokens API with batched async operations
@@ -246,7 +291,9 @@ export async function highlightCodeBlocks(
   }
 
   const codeBlocks: CodeBlockRef[] = []
+  const inlineCodes: CodeBlockRef[] = []
   const pathBuf: number[] = []
+  const inlineEnabled = options.inlineCode !== false
 
   // Recursively find <pre><code> blocks, tracking their path via push/pop on a shared buffer
   const walkChildren = (element: ElementNode): void => {
@@ -260,6 +307,13 @@ export async function highlightCodeBlocks(
         if (typeof codeContent === 'string') {
           codeBlocks.push({ node: child, path: pathBuf.slice() })
         }
+      } else if (inlineEnabled && child[0] === 'code' && child.length === 3 && typeof child[2] === 'string') {
+        // A raw-HTML `<code lang="ts">` is authored markup, not Comark inline
+        // code, and replacing it with spans would break its round-trip.
+        const inlineAttrs = child[1] as ElementNodeAttributes
+        if (inlineAttrs?.$?.html !== 1 && inlineCodeLanguage(inlineAttrs)) {
+          inlineCodes.push({ node: child, path: pathBuf.slice() })
+        }
       }
       walkChildren(child as ElementNode)
       pathBuf.pop()
@@ -281,7 +335,7 @@ export async function highlightCodeBlocks(
     walkChildren(node as ElementNode)
   }
 
-  if (codeBlocks.length === 0) return tree
+  if (codeBlocks.length === 0 && inlineCodes.length === 0) return tree
 
   const hl = await getHighlighter(options, defaultThemeLoaders, defaultLanguageLoaders)
   const { themes = { light: 'material-theme-lighter', dark: 'material-theme-palenight' } } = options
@@ -295,8 +349,29 @@ export async function highlightCodeBlocks(
   const hasTransformers = options.transformers && options.transformers.length > 0
   const darkClassSuffix = options.themes?.dark?.name ? ` dark:${options.themes.dark.name}` : ''
 
-  // Build new nodes array, spine-copying only paths to modified <pre> nodes
+  // Build new nodes array, spine-copying only paths to modified nodes
   const newNodes = [...tree.nodes] as Node[]
+
+  // Copy only the spine from root to `path` to preserve immutability. Each
+  // level reads back from `newNodes`, so several replacements under a shared
+  // ancestor compose instead of clobbering each other.
+  const replaceAt = (path: number[], replacement: Node): void => {
+    if (path.length === 1) {
+      newNodes[path[0]] = replacement
+      return
+    }
+    const rootIdx = path[0]
+    let current = [...(newNodes[rootIdx] as ElementNode)] as ElementNode
+    newNodes[rootIdx] = current
+    for (let j = 1; j < path.length - 1; j++) {
+      const childSlot = path[j] + 2
+      const next = [...(current[childSlot] as ElementNode)] as ElementNode
+      current[childSlot] = next
+      current = next
+    }
+    current[path[path.length - 1] + 2] = replacement
+  }
+
   for (let i = 0; i < codeBlocks.length; i++) {
     const { node, path } = codeBlocks[i]
     const code = (node[2] as any)[2] as string
@@ -333,37 +408,7 @@ export async function highlightCodeBlocks(
         const tokenLines = result.tokens
         codeChildren = []
         for (let li = 0; li < tokenLines.length; li++) {
-          const line = tokenLines[li]
-          const spanCount = line.length
-
-          // Merge whitespace tokens inline while building spans
-          let carry = ''
-          const spans: Node[] = []
-          for (let t = 0; t < spanCount; t++) {
-            const tk = line[t]
-            const canMerge = !(
-              (tk.fontStyle && (tk.fontStyle & 8 /* Strikethrough */ || tk.fontStyle & 4)) /* Underline */
-            )
-            if (canMerge && /^\s+$/.test(tk.content) && t + 1 < spanCount) {
-              carry += tk.content
-            } else if (carry) {
-              const style = stringifyTokenStyle(tk.htmlStyle || getTokenStyleObject(tk))
-              if (canMerge) {
-                spans.push(style ? ['span', { style }, carry + tk.content] : ['span', {}, carry + tk.content])
-              } else {
-                spans.push(['span', {}, carry])
-                spans.push(style ? ['span', { style }, tk.content] : ['span', {}, tk.content])
-              }
-              carry = ''
-            } else {
-              const style = stringifyTokenStyle(tk.htmlStyle || getTokenStyleObject(tk))
-              spans.push(style ? ['span', { style }, tk.content] : ['span', {}, tk.content])
-            }
-          }
-          // If trailing whitespace wasn't merged, emit it
-          if (carry) {
-            spans.push(['span', {}, carry])
-          }
+          const spans = tokensToSpans(tokenLines[li])
 
           // eslint-disable-next-line unicorn/no-new-array -- pre-allocated for perf
           const lineNode = new Array(spans.length + 2) as ElementNode
@@ -441,22 +486,48 @@ export async function highlightCodeBlocks(
     for (let j = 0; j < codeChildren.length; j++) codeNode[j + 2] = codeChildren[j]
     const newPreNode: Node = ['pre', newPreAttrs, codeNode]
 
-    if (path.length === 1) {
-      newNodes[path[0]] = newPreNode
-    } else {
-      // Copy only the spine from root to this node to preserve immutability
-      const rootIdx = path[0]
-      let current = [...(newNodes[rootIdx] as ElementNode)] as ElementNode
-      newNodes[rootIdx] = current
-      for (let j = 1; j < path.length - 1; j++) {
-        const childSlot = path[j] + 2
-        const next = [...(current[childSlot] as ElementNode)] as ElementNode
-        current[childSlot] = next
-        current = next
-      }
-      const childSlot = path[path.length - 1] + 2
-      current[childSlot] = newPreNode
+    replaceAt(path, newPreNode)
+  }
+
+  // `getLoadedLanguages()` includes alias names, so a registered alias resolves.
+  const loadedLangs = inlineCodes.length > 0 ? new Set(hl.getLoadedLanguages()) : new Set<string>()
+
+  for (let i = 0; i < inlineCodes.length; i++) {
+    const { node, path } = inlineCodes[i]
+    const el = node as ElementNode
+    const attrs = el[1] as ElementNodeAttributes
+    const code = el[2] as string
+    const written = inlineCodeLanguage(attrs) as string
+    const context = GRAMMAR_CONTEXTS.get(written.toLowerCase())
+    const lang = context?.lang ?? written
+
+    // Unlike a `<pre>`, an inline `<code>` is not unambiguously code, since
+    // `lang` is a real HTML attribute for natural language. Leave
+    // `` `Bonjour`{lang="fr"} `` exactly as it was authored rather than tagging
+    // it `.shiki`. Any other shiki failure is a real one and must surface.
+    if (!loadedLangs.has(lang)) continue
+
+    const result = codeToTokens(hl, code, {
+      lang,
+      grammarContextCode: context?.grammarContextCode,
+      themes: themeOptions,
+    })
+    const spans: Node[] = []
+    for (let li = 0; li < result.tokens.length; li++) {
+      if (li > 0) spans.push('\n')
+      for (const span of tokensToSpans(result.tokens[li])) spans.push(span)
     }
+    if (spans.length === 0) spans.push(code)
+    const classStr = `shiki ${result.themeName || ''}${darkClassSuffix}`
+
+    const userClass = typeof attrs.class === 'string' ? attrs.class.trim() : ''
+    // eslint-disable-next-line unicorn/no-new-array -- pre-allocated for perf
+    const inlineNode = new Array(spans.length + 2) as ElementNode
+    inlineNode[0] = 'code'
+    inlineNode[1] = { ...attrs, class: userClass ? `${classStr} . ${userClass}` : classStr }
+    for (let s = 0; s < spans.length; s++) inlineNode[s + 2] = spans[s]
+
+    replaceAt(path, inlineNode as Node)
   }
 
   return { ...tree, nodes: newNodes }
diff --git a/packages/comark/src/internal/stringify/attributes.ts b/packages/comark/src/internal/stringify/attributes.ts
index 557cf70f..9c7511b6 100644
--- a/packages/comark/src/internal/stringify/attributes.ts
+++ b/packages/comark/src/internal/stringify/attributes.ts
@@ -134,7 +134,8 @@ const IMPLICIT_ATTRS: Record<string, { drop?: string[]; classBlocklist?: string[
   // `style` comes from render-time plugins (e.g. shiki / rangi) and has no
   // markdown form. `class` is handled specially in userBlockAttrs because
   // highlighters merge their injected classes with the user's class — we need
-  // to strip just the highlighter portion.
+  // to strip just the highlighter portion. Highlighted inline `<code>` goes
+  // through the same `class` handling, with no implicit attrs of its own.
   pre: { drop: ['language', 'filename', 'highlights', 'meta', 'style'] },
 }
 
@@ -146,22 +147,25 @@ const IMPLICIT_ATTRS: Record<string, { drop?: string[]; classBlocklist?: string[
  */
 export function userBlockAttrs(tag: string, attributes: Record<string, unknown>): Record<string, unknown> {
   const rule = IMPLICIT_ATTRS[tag]
-  if (!rule) return { ...attributes }
+  // A highlighter takes over the `class` of a fenced block's `<pre>` and of
+  // inline `<code>` alike, so both need the class handling below.
+  const highlighted = tag === 'pre' || tag === 'code'
+  if (!rule && !highlighted) return { ...attributes }
 
   const result: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(attributes)) {
-    if (rule.drop?.includes(key)) continue
-    if (key === 'class' && rule.classBlocklist && typeof value === 'string') {
+    if (rule?.drop?.includes(key)) continue
+    if (key === 'class' && rule?.classBlocklist && typeof value === 'string') {
       const remaining = value
         .split(/\s+/)
-        .filter((c) => c && !rule.classBlocklist!.includes(c))
+        .filter((c) => c && !rule!.classBlocklist!.includes(c))
         .join(' ')
       if (remaining) result[key] = remaining
       continue
     }
     if (
       key === 'class' &&
-      tag === 'pre' &&
+      highlighted &&
       typeof value === 'string' &&
       (value.startsWith('shiki') || value.startsWith('shj'))
     ) {
diff --git a/packages/comark/src/internal/stringify/handlers/code.ts b/packages/comark/src/internal/stringify/handlers/code.ts
index fec315fb..cb306222 100644
--- a/packages/comark/src/internal/stringify/handlers/code.ts
+++ b/packages/comark/src/internal/stringify/handlers/code.ts
@@ -1,10 +1,14 @@
 import type { State } from 'comark/render'
 import type { ElementNode } from 'comark'
-import { comarkAttributes } from '../attributes.ts'
+import { comarkAttributes, userBlockAttrs } from '../attributes.ts'
 import { textContent } from '../../../utils/index.ts'
 
 export function code(node: ElementNode, _state: State) {
-  const [_, attrs] = node
+  const [_, attributes] = node
+  // Highlighters (shiki / rangi) take over the `class` of highlighted inline
+  // code, so strip their portion back off instead of echoing `.shiki` / `.shj`
+  // into the markdown.
+  const attrs = userBlockAttrs('code', attributes as Record<string, unknown>)
   const attrsString = Object.keys(attrs).length > 0 ? comarkAttributes(attrs) : ''
   const content = textContent(node)
   const fence = content.includes('`') ? '``' : '`'
diff --git a/packages/comark/src/plugins/rangi.ts b/packages/comark/src/plugins/rangi.ts
index 2ce91c4b..b4adcb43 100644
--- a/packages/comark/src/plugins/rangi.ts
+++ b/packages/comark/src/plugins/rangi.ts
@@ -1,11 +1,16 @@
-import type { ElementNode, Node, MarkdownDocument } from 'comark'
+import type { ElementNode, ElementNodeAttributes, Node, MarkdownDocument } from 'comark'
 import type { ShjLanguage, ShjLanguages, ShjTheme, ShjThemePair, ShjToken, ShjTokenized } from 'rangi'
 import { tokenize } from 'rangi'
+import { languages as rangiBuiltinLanguages } from 'rangi/languages'
 import { dark as defaultDark, defaultTheme } from 'rangi/themes'
+import { GRAMMAR_CONTEXTS, inlineCodeLanguage } from '../internal/inline-code-lang.ts'
 import { defineComarkPlugin } from '../utils/helpers.ts'
 import { visitAsync } from '../utils/index.ts'
 import { comarkLanguages } from './rangi/language-comark.ts'
 
+/** Bundled rangi language + alias keys, plus plain text fallbacks. */
+const RANGI_KNOWN_LANGS = new Set(Object.keys(rangiBuiltinLanguages))
+
 /**
  * Languages accepted by the plugin.
  *
@@ -75,6 +80,15 @@ export interface RangiOptions {
    * @default false
    */
   preStyles?: boolean
+
+  /**
+   * Whether to highlight inline code that declares a language, e.g.
+   * `` `Ref<T>`{lang="ts-type"} ``. `lang` wins over `language`. Inline code
+   * does not wrap lines, so `lineNumbers` and `preStyles` do not apply to it.
+   *
+   * @default true
+   */
+  inlineCode?: boolean
 }
 
 export interface CodeBlockAttributes {
@@ -122,6 +136,48 @@ export function tokenizeCode(
   })
 }
 
+/**
+ * Whether `lang` is a real highlighter grammar (bundled, Comark, or custom),
+ * as opposed to a natural-language `lang` attribute like `fr`.
+ */
+function isHighlightableLanguage(lang: string, languages?: Record<string, unknown>): boolean {
+  if (languages && Object.prototype.hasOwnProperty.call(languages, lang)) return true
+  if (Object.prototype.hasOwnProperty.call(comarkLanguages, lang)) return true
+  return RANGI_KNOWN_LANGS.has(lang)
+}
+
+/**
+ * Tokenize `code`, optionally after a discarded grammar-context prefix so
+ * fragment languages (`ts-type`, `vue-html`) sit in the right lexer state.
+ */
+function tokenizeInlineCode(
+  code: string,
+  language: RangiLanguage,
+  grammarContextCode: string | undefined,
+  languages?: Record<string, unknown>
+): ShjTokenized[] {
+  if (!grammarContextCode) return tokenizeCode(code, language, languages)
+
+  const tokens = tokenizeCode(grammarContextCode + code, language, languages)
+  let remain = grammarContextCode.length
+  const out: ShjTokenized[] = []
+  for (let i = 0; i < tokens.length; i++) {
+    const tok = tokens[i]
+    if (remain <= 0) {
+      out.push(tok)
+      continue
+    }
+    if (tok.text.length <= remain) {
+      remain -= tok.text.length
+      continue
+    }
+    const text = tok.text.slice(remain)
+    out.push(tok.type ? { type: tok.type, text } : { text })
+    remain = 0
+  }
+  return out
+}
+
 function isThemePair(theme: ShjTheme | ShjThemePair): theme is ShjThemePair {
   return !!(theme as ShjThemePair).light && !!(theme as ShjThemePair).dark
 }
@@ -253,10 +309,19 @@ function buildPreStyle(light?: ShjTheme, dark?: ShjTheme, dual?: boolean): strin
 }
 
 /**
- * Apply rangi syntax highlighting to every `<pre><code>` block.
+ * Apply rangi syntax highlighting to every `<pre><code>` block and, when
+ * enabled, to inline `<code>` that declares a language.
  */
 export async function rangiCodeBlocks(tree: MarkdownDocument, options: RangiOptions = {}): Promise<MarkdownDocument> {
-  const { lineNumbers = false, classPrefix = 'shj', languages, theme, preStyles = false } = options
+  const {
+    lineNumbers = false,
+    classPrefix = 'shj',
+    languages,
+    theme,
+    preStyles = false,
+    inlineCode: inlineCodeOption,
+  } = options
+  const inlineEnabled = inlineCodeOption !== false
 
   let light: ShjTheme
   let dark: ShjTheme
@@ -321,6 +386,61 @@ export async function rangiCodeBlocks(tree: MarkdownDocument, options: RangiOpti
     }
   )
 
+  if (inlineEnabled) {
+    await visitAsync(
+      tree,
+      (node) => {
+        if (!Array.isArray(node) || node[0] !== 'code' || node.length !== 3 || typeof node[2] !== 'string') {
+          return false
+        }
+        // A raw-HTML `<code lang="ts">` is authored markup, not Comark inline
+        // code, and replacing it with spans would break its round-trip. Fenced
+        // `<pre><code>` is already multi-child after the block pass above, so it
+        // no longer matches `length === 3` with a string body.
+        const attrs = (node[1] || {}) as ElementNodeAttributes
+        return attrs?.$?.html !== 1 && !!inlineCodeLanguage(attrs)
+      },
+      async (node) => {
+        const el = node as ElementNode
+        const attrs = (el[1] || {}) as ElementNodeAttributes
+        const code = el[2] as string
+        const written = inlineCodeLanguage(attrs) as string
+        // Fragment names are matched case-insensitively, same as fence languages.
+        const context = GRAMMAR_CONTEXTS.get(written.toLowerCase())
+        const lang = resolveRangiLanguage(context?.lang ?? written)
+
+        // Unlike a `<pre>`, an inline `<code>` is not unambiguously code, since
+        // `lang` is a real HTML attribute for natural language. Leave
+        // `` `Bonjour`{lang="fr"} `` exactly as it was authored rather than tagging
+        // it `.shiki`. Unknown names fall through rangi as plain text; skip them
+        // the same way so we do not invent a highlighter class for them.
+        if (!isHighlightableLanguage(lang, languages)) return
+
+        let children: Node[]
+        try {
+          const tokens = tokenizeInlineCode(code, lang, context?.grammarContextCode, languages)
+          const lines = tokensToLines(tokens, { light, dark, dual })
+          children = buildCodeChildren(lines, undefined, false)
+          if (children.length === 0) children = [code]
+        } catch {
+          children = [code]
+        }
+
+        const userClass = typeof attrs.class === 'string' ? attrs.class.trim() : ''
+        const highlighterClass = `${classPrefix} shiki shj-lang-${lang}`
+        const classStr = userClass ? `${highlighterClass} . ${userClass}` : highlighterClass
+
+        // eslint-disable-next-line unicorn/no-new-array -- pre-allocated for perf
+        const inlineNode = new Array(children.length + 2) as ElementNode
+        inlineNode[0] = 'code'
+        inlineNode[1] = { ...attrs, class: classStr }
+        for (let i = 0; i < children.length; i++) inlineNode[i + 2] = children[i]
+
+        return inlineNode
+      }
+    )
+  }
+
   return tree
 }
 
diff --git a/packages/comark/test/index.test.ts b/packages/comark/test/index.test.ts
index 20819467..e2d16478 100644
--- a/packages/comark/test/index.test.ts
+++ b/packages/comark/test/index.test.ts
@@ -7,6 +7,7 @@ import { renderMarkdown } from 'comark/render'
 import shiki from 'comark/plugins/shiki'
 import type { ShikiOptions } from '../src/plugins/shiki'
 import emoji from '../src/plugins/emoji'
+import rangi from '../src/plugins/rangi'
 import binding, { Binding as MarkdownBinding } from '../src/plugins/binding'
 import type { ComarkPlugin } from 'comark'
 import githubDark from 'shiki/dist/themes/github-dark.mjs'
@@ -19,11 +20,12 @@ import type { ShikiTransformer } from 'shiki'
 import { renderHtmlForTest } from './utils/render-html'
 import { Binding as HTMLBiniding } from '../../comark-html/src/plugins/binding'
 
-type PluginName = 'emoji' | 'binding'
+type PluginName = 'emoji' | 'binding' | 'rangi'
 
 const pluginRegistry: Record<PluginName, () => ComarkPlugin> = {
   emoji,
   binding,
+  rangi,
 }
 
 type TransformerName = 'twoslash'
diff --git a/packages/comark/test/plugins/rangi.test.ts b/packages/comark/test/plugins/rangi.test.ts
index 49e56fc9..b342fc01 100644
--- a/packages/comark/test/plugins/rangi.test.ts
+++ b/packages/comark/test/plugins/rangi.test.ts
@@ -390,3 +390,91 @@ describe('rangi code block round-trip', () => {
     expect(md).toContain('npx install')
   })
 })
+
+describe('rangi inline code', () => {
+  async function inlineCode(source: string, options: Parameters<typeof rangi>[0] = {}): Promise<ElementNode> {
+    const document = await parseMarkdown(source, { plugins: [rangi(options)] })
+    return (document.nodes[0] as ElementNode)[2] as ElementNode
+  }
+
+  /** Collect every `style` on the node's span children, in order. */
+  function styles(node: ElementNode): string[] {
+    return (node.slice(2) as Node[])
+      .filter((child): child is ElementNode => Array.isArray(child))
+      .map((child) => String((child[1] as Record<string, unknown>).style ?? ''))
+  }
+
+  it('highlights inline code carrying a lang attribute', async () => {
+    const code = await inlineCode('`const a = 1`{lang="ts"}')
+
+    expect(String((code[1] as Record<string, unknown>).class)).toMatch(/^shj /)
+    expect(String((code[1] as Record<string, unknown>).class)).toContain('shiki')
+    expect(String((code[1] as Record<string, unknown>).class)).toContain('shj-lang-ts')
+    expect(styles(code).some(Boolean)).toBe(true)
+  })
+
+  it('accepts language as well as lang', async () => {
+    const withLanguage = await inlineCode('`const a = 1`{language="ts"}')
+    const withLang = await inlineCode('`const a = 1`{lang="ts"}')
+
+    expect(String((withLanguage[1] as Record<string, unknown>).class)).toMatch(/^shj /)
+    expect(styles(withLanguage)).toEqual(styles(withLang))
+  })
+
+  it('leaves inline code alone when inlineCode is false but still highlights fences', async () => {
+    const document = await parseMarkdown('`const a = 1`{lang="ts"}\n\n```ts\nconst b = 2\n```', {
+      plugins: [rangi({ inlineCode: false })],
+    })
+    const code = (document.nodes[0] as ElementNode)[2] as ElementNode
+    const pre = document.nodes[1] as ElementNode
+
+    expect(code).toEqual(['code', { lang: 'ts' }, 'const a = 1'])
+    expect(String((pre[1] as Record<string, unknown>).class)).toMatch(/^shj /)
+  })
+
+  it('tokenizes ts-type as a type expression, not a statement', async () => {
+    // `string` alone is bare text under `ts`; the `let a:` seed colors it as a type.
+    const asType = await inlineCode('`string | number`{lang="ts-type"}')
+    const asStatement = await inlineCode('`string | number`{lang="ts"}')
+
+    expect(styles(asType)).not.toEqual(styles(asStatement))
+    expect(String((asType[1] as Record<string, unknown>).class)).toContain('shj-lang-typescript')
+  })
+
+  it('tokenizes vue-html as template markup', async () => {
+    const code = await inlineCode('`<UButton />`{lang="vue-html"}')
+
+    expect(String((code[1] as Record<string, unknown>).class)).toMatch(/^shj /)
+    expect(String((code[1] as Record<string, unknown>).class)).toContain('shj-lang-vue')
+    expect(styles(code).some(Boolean)).toBe(true)
+  })
+
+  it('leaves a natural language alone', async () => {
+    const code = await inlineCode('`Bonjour`{lang="fr"}')
+
+    expect(code).toEqual(['code', { lang: 'fr' }, 'Bonjour'])
+  })
+
+  it('leaves a raw HTML code element alone', async () => {
+    const source = 'A <code lang="ts">const a = 1</code> here'
+    const document = await parseMarkdown(source, { plugins: [rangi()] })
+
+    expect(await renderMarkdown(document)).toBe(source)
+  })
+
+  it('round-trips without the highlighter class', async () => {
+    const source = 'The type is `Ref<T>`{lang="ts-type"}.'
+    const document = await parseMarkdown(source, { plugins: [rangi()] })
+
+    expect(await renderMarkdown(document)).toBe(source)
+  })
+
+  it('highlights a custom grammar passed via languages', async () => {
+    const code = await inlineCode('`hello`{lang="mine"}', {
+      languages: { mine: [[/hello/g, 'num']] },
+    })
+
+    expect(String((code[1] as Record<string, unknown>).class)).toContain('shj-lang-mine')
+    expect(styles(code).some(Boolean)).toBe(true)
+  })
+})
diff --git a/packages/comark/test/plugins/shiki-inline.test.ts b/packages/comark/test/plugins/shiki-inline.test.ts
new file mode 100644
index 00000000..1927eb88
--- /dev/null
+++ b/packages/comark/test/plugins/shiki-inline.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import { parseMarkdown } from '../../src/index'
+import { renderMarkdown } from '../../src/render'
+import type { ElementNode, Node } from '../../src/types'
+import shiki from '../../src/plugins/shiki'
+import type { ShikiOptions } from '../../src/plugins/shiki'
+
+async function inlineCode(source: string, options: ShikiOptions = {}): Promise<ElementNode> {
+  const document = await parseMarkdown(source, { plugins: [shiki(options)] })
+  return (document.nodes[0] as ElementNode)[2] as ElementNode
+}
+
+/** Collect every `style` on the node's span children, in order. */
+function styles(node: ElementNode): string[] {
+  return (node.slice(2) as Node[])
+    .filter((child): child is ElementNode => Array.isArray(child))
+    .map((child) => String((child[1] as Record<string, unknown>).style ?? ''))
+}
+
+describe('shiki inline code', () => {
+  it('highlights inline code carrying a lang attribute', async () => {
+    const code = await inlineCode('`const a = 1`{lang="ts"}')
+
+    expect(String((code[1] as Record<string, unknown>).class)).toMatch(/^shiki /)
+    expect(styles(code).some(Boolean)).toBe(true)
+  })
+
+  it('accepts language as well as lang', async () => {
+    const withLanguage = await inlineCode('`const a = 1`{language="ts"}')
+    const withLang = await inlineCode('`const a = 1`{lang="ts"}')
+
+    expect(String((withLanguage[1] as Record<string, unknown>).class)).toMatch(/^shiki /)
+    expect(styles(withLanguage)).toEqual(styles(withLang))
+  })
+
+  it('leaves inline code alone when inlineCode is false but still highlights fences', async () => {
+    const document = await parseMarkdown('`const a = 1`{lang="ts"}\n\n```ts\nconst b = 2\n```', {
+      plugins: [shiki({ inlineCode: false })],
+    })
+    const code = (document.nodes[0] as ElementNode)[2] as ElementNode
+    const pre = document.nodes[1] as ElementNode
+
+    expect(code).toEqual(['code', { lang: 'ts' }, 'const a = 1'])
+    expect(String((pre[1] as Record<string, unknown>).class)).toMatch(/^shiki /)
+  })
+
+  it('tokenizes ts-type as a type expression, not a statement', async () => {
+    // Without the `let a:` seed, `Ref` falls through to plain text.
+    const asType = await inlineCode('`Ref<T>`{lang="ts-type"}')
+    const asStatement = await inlineCode('`Ref<T>`{lang="ts"}')
+
+    expect(styles(asType)).not.toEqual(styles(asStatement))
+  })
+
+  it('tokenizes vue-html as template markup', async () => {
+    const code = await inlineCode('`<UButton />`{lang="vue-html"}')
+
+    expect(String((code[1] as Record<string, unknown>).class)).toMatch(/^shiki /)
+    expect(styles(code).some(Boolean)).toBe(true)
+  })
+
+  it('leaves a natural language alone', async () => {
+    const code = await inlineCode('`Bonjour`{lang="fr"}')
+
+    expect(code).toEqual(['code', { lang: 'fr' }, 'Bonjour'])
+  })
+
+  it('leaves a raw HTML code element alone', async () => {
+    const source = 'A <code lang="ts">const a = 1</code> here'
+    const document = await parseMarkdown(source, { plugins: [shiki()] })
+
+    expect(await renderMarkdown(document)).toBe(source)
+  })
+
+  it('round-trips without the highlighter class', async () => {
+    const source = 'The type is `Ref<T>`{lang="ts-type"}.'
+    const document = await parseMarkdown(source, { plugins: [shiki()] })
+
+    expect(await renderMarkdown(document)).toBe(source)
+  })
+})
diff --git a/test/bundle.test.ts b/test/bundle.test.ts
index 754cb3ea..e733bd92 100644
--- a/test/bundle.test.ts
+++ b/test/bundle.test.ts
@@ -67,7 +67,7 @@ describe('package bundle size', { timeout: 60_000 }, () => {
         "@comark/react": "37.7k (76 files)",
         "@comark/svelte": "44.9k (84 files)",
         "@comark/vue": "56.0k (80 files)",
-        "comark": "366k (158 files)",
+        "comark": "373k (160 files)",
       }
     `)
   })