feat(highlight): highlight inline code both with Shiki and Rangi

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

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
 

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.
+```

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.
+```

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
+}