@tanstack/markdown 0.0.11 → 0.0.13

package/README.md

@@ -42,6 +42,8 @@ export function Article({ source }: { source: string }) @{
 
 TanStack Markdown targets controlled technical content. It supports the Markdown used by blogs and docs, then spends its remaining complexity budget on deterministic output, renderer parity, malformed-input resilience, and small entry points. It is intentionally not a complete CommonMark, GFM, MDX, or general content-processing implementation.
 
+For syntax highlighting, use the tested [TanStack Highlight adapter](./docs/guides/syntax-highlighting.md#tanstack-highlight-adapter). It registers only the languages you choose and returns escaped token markup inside Markdown-owned code containers.
+
 ## Documentation
 
 - [Overview](./docs/overview.md)

package/dist/html.js

@@ -83,7 +83,7 @@ function renderInlines(nodes, options) {
 function renderCodeBlock(node, options) {
     const lang = node.lang ?? 'plaintext';
     const preAttrs = [
-        'class="tm-code"',
+        `class="tm-code${options.codeLineNumbers ? ' tm-code--line-numbers' : ''}"`,
         `data-lang="${escapeAttr(lang)}"`,
         node.title ? `data-code-title="${escapeAttr(node.title)}"` : '',
         node.file ? `data-filename="${escapeAttr(node.file)}"` : '',

package/dist/inline.js

@@ -319,12 +319,20 @@ function findDelimiter(value, start, delimiter, budget) {
             return -1;
         if (value[index - 1] === '\\')
             continue;
+        if (!value.startsWith(delimiter, index))
+            continue;
+        if (value[index + 1] === delimiter) {
+            const close = findDelimiter(value, index + 2, delimiter + delimiter, budget);
+            if (close > index + 2) {
+                index = close + 1;
+                continue;
+            }
+        }
         if (delimiter === '~~' && (value[index - 1] === '~' || value[index + 2] === '~'))
             continue;
         if (delimiter[0] === '_' && !canUseUnderscore(value, index, delimiter.length, false))
             continue;
-        if (value.startsWith(delimiter, index))
-            return index;
+        return index;
     }
     return -1;
 }

package/dist/octane.js

@@ -88,7 +88,7 @@ function renderCodeBlockOctane(node, options, key) {
         }
         : undefined;
     const pre = h(options, 'pre', {
-        className: 'tm-code',
+        className: `tm-code${options.codeLineNumbers ? ' tm-code--line-numbers' : ''}`,
         'data-lang': lang,
         ...(node.title ? { 'data-code-title': node.title } : {}),
         ...(node.file ? { 'data-filename': node.file } : {}),

package/dist/react.d.ts

@@ -1,6 +1,11 @@
-import type { ComponentType, ReactElement, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ComponentType, JSX, ReactElement, ReactNode } from 'react';
 import type { BlockNode, InlineNode, MarkdownInput, RenderOptions } from './types.js';
+type IntrinsicElementName = keyof JSX.IntrinsicElements;
 type ComponentMap = Partial<Record<string, string | ComponentType<any>>>;
+export type MarkdownComponentProps<TagName extends IntrinsicElementName> = ComponentPropsWithoutRef<TagName>;
+export type MarkdownComponents = Partial<{
+    [TagName in IntrinsicElementName]: IntrinsicElementName | ComponentType<MarkdownComponentProps<TagName>>;
+}> & Record<string, string | ComponentType<any> | undefined>;
 export interface MarkdownReactOptions extends RenderOptions {
     components?: ComponentMap;
 }

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAmC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAErI,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAExE,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,UAAU,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,YAAY,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,oBAAyB,GAAG,SAAS,CAGvG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,CA+DhH;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAwC/G"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAElG,OAAO,KAAK,EAAE,SAAS,EAAmC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAErI,KAAK,oBAAoB,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;AACvD,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAExE,MAAM,MAAM,sBAAsB,CAAC,OAAO,SAAS,oBAAoB,IAAI,wBAAwB,CAAC,OAAO,CAAC,CAAA;AAE5G,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;KACtC,OAAO,IAAI,oBAAoB,GAAG,oBAAoB,GAAG,aAAa,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;CACzG,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,CAAA;AAEzD,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,UAAU,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,YAAY,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,oBAAyB,GAAG,SAAS,CAGvG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,CA+DhH;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAwC/G"}

package/dist/react.js

@@ -91,7 +91,7 @@ function renderCodeBlockReact(node, options, key) {
         }
         : undefined;
     const pre = h(options, 'pre', {
-        className: 'tm-code',
+        className: `tm-code${options.codeLineNumbers ? ' tm-code--line-numbers' : ''}`,
         'data-lang': lang,
         ...(node.title ? { 'data-code-title': node.title } : {}),
         ...(node.file ? { 'data-filename': node.file } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/markdown",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "description": "A tiny, fast, deterministic Markdown renderer for blogs and documentation.",
   "license": "MIT",
@@ -86,6 +86,7 @@
     }
   },
   "devDependencies": {
+    "@tanstack/highlight": "0.0.6",
     "@tanstack/intent": "^0.3.6",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
@@ -120,12 +121,15 @@
     "corpus:audit:tanstack": "tsx scripts/audit-tanstack-corpus.ts",
     "corpus:audit:external": "tsx scripts/audit-external-corpus.ts",
     "docs:verify": "node scripts/verify-docs.mjs",
-    "test:skills": "intent validate skills --check",
+    "test:skills": "intent validate skills --check && pnpm run skills:check-version",
+    "skills:check-version": "node scripts/sync-skill-version.mjs --check",
+    "skills:sync-version": "node scripts/sync-skill-version.mjs",
     "skills:stale": "intent stale",
     "conformance": "tsx scripts/conformance.ts",
     "bench": "tsx scripts/bench.ts",
     "size": "tsx scripts/measure-size.ts",
     "research": "pnpm run conformance && pnpm run size && pnpm run bench",
-    "verify": "pnpm test && pnpm run typecheck && pnpm run build && pnpm run docs:verify && pnpm run test:skills && pnpm run research && pnpm pack --dry-run"
+    "verify": "pnpm test && pnpm run typecheck && pnpm run build && pnpm run docs:verify && pnpm run test:skills && pnpm run research && pnpm pack --dry-run",
+    "version": "pnpm run skills:sync-version"
   }
 }

package/skills/custom-extensions/SKILL.md

@@ -7,7 +7,7 @@ description: >
 metadata:
   type: core
   library: '@tanstack/markdown'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 requires:
   - 'render-markdown'
 sources:

package/skills/docs-features/SKILL.md

@@ -9,7 +9,7 @@ description: >
 metadata:
   type: core
   library: '@tanstack/markdown'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 requires:
   - 'render-markdown'
 sources:
@@ -392,11 +392,10 @@ export const html = renderHtml(source)
 Correct:
 
 ````ts
-import {
-  renderNodesToHtml,
-  renderTokens,
-  tokenize,
-} from '@tanstack/highlight'
+import { createHighlighter } from '@tanstack/highlight/core'
+import { plaintext } from '@tanstack/highlight/languages/plaintext'
+import { ts } from '@tanstack/highlight/languages/ts'
+import { createTanStackMarkdownHighlighter } from '@tanstack/highlight/markdown'
 import { renderHtml } from '@tanstack/markdown/html'
 
 const source = `\`\`\`ts file="app.ts" {2}
@@ -404,18 +403,12 @@ const one = 1
 const two = 2
 \`\`\``
 
+const highlighter = createHighlighter({
+  languages: [plaintext, ts],
+})
+
 export const html = renderHtml(source, {
-  highlighter(code, lang, options) {
-    const result = tokenize(code, { lang })
-    return renderNodesToHtml(
-      renderTokens(result.tokens, {
-        decorations: options?.highlightLines?.map((line) => ({
-          lines: line,
-          className: 'is-highlighted',
-        })),
-      }),
-    )
-  },
+  highlighter: createTanStackMarkdownHighlighter(highlighter),
 })
 ````
 

package/skills/octane-rendering/SKILL.md

@@ -9,7 +9,7 @@ metadata:
   type: framework
   library: '@tanstack/markdown'
   framework: 'octane'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 requires:
   - 'render-markdown'
 sources:

package/skills/production-pipelines/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: lifecycle
   library: '@tanstack/markdown'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 requires:
   - 'render-markdown'
 sources:
@@ -58,23 +58,15 @@ Fix: Separate trusted and untrusted entry points, keep trusted callbacks disable
 ### Check: Return trusted code contents only
 
 Expected:
-
 ```ts
 import { renderHtml } from '@tanstack/markdown/html'
-import {
-  renderNodesToHtml,
-  renderTokens,
-  tokenize,
-} from '@tanstack/highlight'
-
-const source = '```ts {1}\nconst answer = 42\n```'
-
-export const html = renderHtml(source, {
-  highlighter(code, lang, options) {
-    const result = tokenize(code, { lang: lang ?? 'plaintext' })
-    const decorations = options?.highlightLines?.map((lines) => ({ lines, className: 'is-highlighted' }))
-    return renderNodesToHtml(renderTokens(result.tokens, { lineNumbers: options?.lineNumbers, decorations }))
-  },
+import { createHighlighter } from '@tanstack/highlight/core'
+import { plaintext } from '@tanstack/highlight/languages/plaintext'
+import { ts } from '@tanstack/highlight/languages/ts'
+import { createTanStackMarkdownHighlighter } from '@tanstack/highlight/markdown'
+const highlighter = createHighlighter({ languages: [plaintext, ts] })
+export const html = renderHtml('```ts {1}\nconst answer = 42\n```', {
+  highlighter: createTanStackMarkdownHighlighter(highlighter),
 })
 ```
 
@@ -135,7 +127,7 @@ import { parseMarkdown } from '@tanstack/markdown/parser'
 const cache = new Map<string, MarkdownDocument>()
 
 export function renderCachedArticle(key: string, source: string): string {
-  const cacheKey = `markdown-0.0.10:${key}`
+  const cacheKey = `markdown-0.0.13:${key}`
   let document = cache.get(cacheKey)
   if (!document) {
     document = parseMarkdown(source, {

package/skills/react-rendering/SKILL.md

@@ -9,7 +9,7 @@ metadata:
   type: framework
   library: '@tanstack/markdown'
   framework: 'react'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 requires:
   - 'render-markdown'
 sources:
@@ -48,31 +48,34 @@ export function Article({ source }: { source: string }) {
 ### Replace emitted links with an application component
 
 ```tsx
-import type { ComponentProps } from 'react'
-import { Markdown } from '@tanstack/markdown/react'
-
-function ArticleLink(props: ComponentProps<'a'>) {
-  const external = props.href?.startsWith('http') ?? false
-
-  return (
-    <a
-      {...props}
-      rel={external ? 'noreferrer' : props.rel}
-      target={external ? '_blank' : props.target}
-    />
-  )
-}
+import {
+  Markdown,
+  type MarkdownComponents,
+} from '@tanstack/markdown/react'
+
+const components = {
+  a(props) {
+    const external = props.href?.startsWith('http') ?? false
+    return (
+      <a
+        {...props}
+        rel={external ? 'nofollow noopener noreferrer' : props.rel}
+        target={external ? '_blank' : props.target}
+      />
+    )
+  },
+} satisfies MarkdownComponents
 
 export function Article({ source }: { source: string }) {
   return (
     <article>
-      <Markdown components={{ a: ArticleLink }}>{source}</Markdown>
+      <Markdown components={components}>{source}</Markdown>
     </article>
   )
 }
 ```
 
-`components` is keyed by emitted intrinsic or custom-element tag names.
+Known intrinsic keys infer their matching React props. Arbitrary extension component tag names remain supported.
 
 ### Parse once before repeated React rendering
 

package/skills/render-markdown/SKILL.md

@@ -9,7 +9,7 @@ description: >
 metadata:
   type: core
   library: '@tanstack/markdown'
-  library_version: '0.0.10'
+  library_version: '0.0.13'
 sources:
   - 'TanStack/markdown:docs/quick-start.md'
   - 'TanStack/markdown:docs/core-concepts/document-model.md'

package/skills/render-markdown/references/ast-and-options.md

@@ -1,6 +1,6 @@
 # AST and Options Reference
 
-This reference targets `@tanstack/markdown@0.0.10`. Shared public types are
+This reference targets `@tanstack/markdown@0.0.13`. Shared public types are
 exported from `@tanstack/markdown`.
 
 ## Entry Points