marked-frontmatter 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

package/README.md

@@ -0,0 +1,126 @@
+# marked-frontmatter
+
+Marked extension for rendering YAML/JSON frontmatter as HTML tree tables.
+
+## Installation
+
+```bash
+npm install marked-frontmatter json-to-frontmatter-html tree-to-html marked
+```
+
+Or install from GitHub:
+
+```json
+{
+  "dependencies": {
+    "marked": "^17.0.0",
+    "marked-frontmatter": "github:iafan/marked-frontmatter",
+    "json-to-frontmatter-html": "github:iafan/json-to-frontmatter-html",
+    "tree-to-html": "github:iafan/tree-to-html"
+  }
+}
+```
+
+## Usage
+
+```typescript
+import { marked } from 'marked'
+import { frontmatterExtension, renderFrontmatterBlocks } from 'marked-frontmatter'
+
+// Register the extension
+marked.use({ extensions: [frontmatterExtension] })
+
+// Parse markdown
+const markdown = `---
+title: My Document
+author:
+  name: John Doe
+  email: john@example.com
+tags:
+  - typescript
+  - markdown
+---
+
+# Content here
+`
+
+const html = marked.parse(markdown)
+document.body.innerHTML = html
+
+// Post-process to render frontmatter
+renderFrontmatterBlocks()
+```
+
+## How It Works
+
+1. The extension detects YAML frontmatter at the start of a document (between `---` delimiters)
+2. During parsing, it outputs a placeholder `<div class="frontmatter-raw">...</div>`
+3. Call `renderFrontmatterBlocks()` after the DOM is ready to convert placeholders to tree tables
+
+The frontmatter is rendered using [json-to-frontmatter-html](https://github.com/iafan/json-to-frontmatter-html), which uses [tree-to-html](https://github.com/iafan/tree-to-html) for consistent styling.
+
+## JSON Frontmatter
+
+The extension also supports JSON frontmatter:
+
+```markdown
+---
+{
+  "title": "My Document",
+  "version": "1.0.0"
+}
+---
+```
+
+If the frontmatter content starts with `{`, it's parsed as JSON; otherwise as YAML.
+
+## API
+
+### `frontmatterExtension`
+
+Marked extension object. Register with `marked.use({ extensions: [frontmatterExtension] })`.
+
+### `renderFrontmatterBlocks(): void`
+
+Post-process the DOM to convert frontmatter placeholders to rendered HTML.
+
+### `parseFrontmatter(content: string)`
+
+Parse frontmatter content string as YAML or JSON. Returns a plain JavaScript object.
+
+## Output HTML Structure
+
+```html
+<div class="frontmatter-container">
+  <div class="tree-container">
+    <table class="tree-table">
+      <!-- Key-value rows -->
+    </table>
+  </div>
+</div>
+```
+
+The outer `.frontmatter-container` allows styling frontmatter separately from regular tree blocks.
+
+## Styling
+
+Uses tree-to-html classes for the tree structure. Add styles for `.frontmatter-container` to customize the frontmatter appearance:
+
+```css
+.frontmatter-container {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #0066cc;
+}
+
+.frontmatter-container .tree-comment {
+  color: #333;
+  font-style: normal;
+}
+```
+
+## License
+
+This is free and unencumbered software released into the public domain (Unlicense).

package/dist/index.cjs

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  frontmatterExtension: () => frontmatterExtension,
+  parseFrontmatter: () => parseFrontmatter,
+  renderFrontmatterBlocks: () => renderFrontmatterBlocks
+});
+module.exports = __toCommonJS(index_exports);
+var import_js_yaml = require("js-yaml");
+var import_json_to_frontmatter_html = require("json-to-frontmatter-html");
+function parseFrontmatter(content) {
+  const trimmed = content.trim();
+  if (trimmed.startsWith("{")) {
+    return JSON.parse(trimmed);
+  }
+  return (0, import_js_yaml.load)(trimmed);
+}
+function renderFrontmatterBlocks() {
+  const containers = document.querySelectorAll(".frontmatter-raw");
+  for (const container of containers) {
+    const content = container.textContent || "";
+    if (!content.trim()) continue;
+    try {
+      const data = parseFrontmatter(content);
+      const html = (0, import_json_to_frontmatter_html.renderJson)(data);
+      container.outerHTML = `<div class="frontmatter-container">${html}</div>`;
+    } catch (error) {
+      console.error("Failed to render frontmatter:", error);
+    }
+  }
+}
+var frontmatterExtension = {
+  name: "frontmatter",
+  level: "block",
+  start(src) {
+    if (src.match(/^---\r?\n/)) {
+      return 0;
+    }
+    return void 0;
+  },
+  tokenizer(src) {
+    const match = src.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+    if (match) {
+      return {
+        type: "frontmatter",
+        raw: match[0],
+        text: match[1]
+      };
+    }
+    return void 0;
+  },
+  renderer(token) {
+    const escaped = token.text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<div class="frontmatter-raw">${escaped}</div>
+`;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  frontmatterExtension,
+  parseFrontmatter,
+  renderFrontmatterBlocks
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { TokenizerExtension, RendererExtension } from 'marked'\nimport { load as parseYaml } from 'js-yaml'\nimport { renderJson, JsonValue } from 'json-to-frontmatter-html'\n\n/**\n * Parse frontmatter content as YAML or JSON.\n * If content starts with '{', parse as JSON; otherwise parse as YAML.\n */\nexport function parseFrontmatter(content: string): JsonValue {\n  const trimmed = content.trim()\n  if (trimmed.startsWith('{')) {\n    return JSON.parse(trimmed)\n  }\n  return parseYaml(trimmed) as JsonValue\n}\n\n/**\n * Post-process rendered HTML to convert frontmatter placeholders to actual HTML.\n * Call this after marked.parse() completes and DOM is ready.\n */\nexport function renderFrontmatterBlocks(): void {\n  const containers = document.querySelectorAll<HTMLElement>('.frontmatter-raw')\n\n  for (const container of containers) {\n    const content = container.textContent || ''\n    if (!content.trim()) continue\n\n    try {\n      const data = parseFrontmatter(content)\n      const html = renderJson(data)\n      // Wrap in frontmatter-specific container for styling\n      container.outerHTML = `<div class=\"frontmatter-container\">${html}</div>`\n    } catch (error) {\n      console.error('Failed to render frontmatter:', error)\n    }\n  }\n}\n\n/**\n * Marked extension that intercepts YAML/JSON frontmatter at the start of documents.\n * Use with: marked.use({ extensions: [frontmatterExtension] })\n */\nexport const frontmatterExtension: TokenizerExtension & RendererExtension = {\n  name: 'frontmatter',\n  level: 'block',\n  start(src: string) {\n    // Only match at the very start of the document\n    if (src.match(/^---\\r?\\n/)) {\n      return 0\n    }\n    return undefined\n  },\n  tokenizer(src: string) {\n    // Match YAML frontmatter: ---\\n...\\n---\n    const match = src.match(/^---\\r?\\n([\\s\\S]*?)\\r?\\n---(?:\\r?\\n|$)/)\n    if (match) {\n      return {\n        type: 'frontmatter',\n        raw: match[0],\n        text: match[1],\n      }\n    }\n    return undefined\n  },\n  renderer(token) {\n    // Escape HTML in the raw content\n    const escaped = token.text\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n    return `<div class=\"frontmatter-raw\">${escaped}</div>\\n`\n  },\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAkC;AAClC,sCAAsC;AAM/B,SAAS,iBAAiB,SAA4B;AAC3D,QAAM,UAAU,QAAQ,KAAK;AAC7B,MAAI,QAAQ,WAAW,GAAG,GAAG;AAC3B,WAAO,KAAK,MAAM,OAAO;AAAA,EAC3B;AACA,aAAO,eAAAA,MAAU,OAAO;AAC1B;AAMO,SAAS,0BAAgC;AAC9C,QAAM,aAAa,SAAS,iBAA8B,kBAAkB;AAE5E,aAAW,aAAa,YAAY;AAClC,UAAM,UAAU,UAAU,eAAe;AACzC,QAAI,CAAC,QAAQ,KAAK,EAAG;AAErB,QAAI;AACF,YAAM,OAAO,iBAAiB,OAAO;AACrC,YAAM,WAAO,4CAAW,IAAI;AAE5B,gBAAU,YAAY,sCAAsC,IAAI;AAAA,IAClE,SAAS,OAAO;AACd,cAAQ,MAAM,iCAAiC,KAAK;AAAA,IACtD;AAAA,EACF;AACF;AAMO,IAAM,uBAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,KAAa;AAEjB,QAAI,IAAI,MAAM,WAAW,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU,KAAa;AAErB,UAAM,QAAQ,IAAI,MAAM,wCAAwC;AAChE,QAAI,OAAO;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,MAAM,CAAC;AAAA,QACZ,MAAM,MAAM,CAAC;AAAA,MACf;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,OAAO;AAEd,UAAM,UAAU,MAAM,KACnB,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AACvB,WAAO,gCAAgC,OAAO;AAAA;AAAA,EAChD;AACF;","names":["parseYaml"]}

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import { TokenizerExtension, RendererExtension } from 'marked';
+import { JsonValue } from 'json-to-frontmatter-html';
+
+/**
+ * Parse frontmatter content as YAML or JSON.
+ * If content starts with '{', parse as JSON; otherwise parse as YAML.
+ */
+declare function parseFrontmatter(content: string): JsonValue;
+/**
+ * Post-process rendered HTML to convert frontmatter placeholders to actual HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+declare function renderFrontmatterBlocks(): void;
+/**
+ * Marked extension that intercepts YAML/JSON frontmatter at the start of documents.
+ * Use with: marked.use({ extensions: [frontmatterExtension] })
+ */
+declare const frontmatterExtension: TokenizerExtension & RendererExtension;
+
+export { frontmatterExtension, parseFrontmatter, renderFrontmatterBlocks };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { TokenizerExtension, RendererExtension } from 'marked';
+import { JsonValue } from 'json-to-frontmatter-html';
+
+/**
+ * Parse frontmatter content as YAML or JSON.
+ * If content starts with '{', parse as JSON; otherwise parse as YAML.
+ */
+declare function parseFrontmatter(content: string): JsonValue;
+/**
+ * Post-process rendered HTML to convert frontmatter placeholders to actual HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+declare function renderFrontmatterBlocks(): void;
+/**
+ * Marked extension that intercepts YAML/JSON frontmatter at the start of documents.
+ * Use with: marked.use({ extensions: [frontmatterExtension] })
+ */
+declare const frontmatterExtension: TokenizerExtension & RendererExtension;
+
+export { frontmatterExtension, parseFrontmatter, renderFrontmatterBlocks };

package/dist/index.js

@@ -0,0 +1,56 @@
+// src/index.ts
+import { load as parseYaml } from "js-yaml";
+import { renderJson } from "json-to-frontmatter-html";
+function parseFrontmatter(content) {
+  const trimmed = content.trim();
+  if (trimmed.startsWith("{")) {
+    return JSON.parse(trimmed);
+  }
+  return parseYaml(trimmed);
+}
+function renderFrontmatterBlocks() {
+  const containers = document.querySelectorAll(".frontmatter-raw");
+  for (const container of containers) {
+    const content = container.textContent || "";
+    if (!content.trim()) continue;
+    try {
+      const data = parseFrontmatter(content);
+      const html = renderJson(data);
+      container.outerHTML = `<div class="frontmatter-container">${html}</div>`;
+    } catch (error) {
+      console.error("Failed to render frontmatter:", error);
+    }
+  }
+}
+var frontmatterExtension = {
+  name: "frontmatter",
+  level: "block",
+  start(src) {
+    if (src.match(/^---\r?\n/)) {
+      return 0;
+    }
+    return void 0;
+  },
+  tokenizer(src) {
+    const match = src.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+    if (match) {
+      return {
+        type: "frontmatter",
+        raw: match[0],
+        text: match[1]
+      };
+    }
+    return void 0;
+  },
+  renderer(token) {
+    const escaped = token.text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<div class="frontmatter-raw">${escaped}</div>
+`;
+  }
+};
+export {
+  frontmatterExtension,
+  parseFrontmatter,
+  renderFrontmatterBlocks
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { TokenizerExtension, RendererExtension } from 'marked'\nimport { load as parseYaml } from 'js-yaml'\nimport { renderJson, JsonValue } from 'json-to-frontmatter-html'\n\n/**\n * Parse frontmatter content as YAML or JSON.\n * If content starts with '{', parse as JSON; otherwise parse as YAML.\n */\nexport function parseFrontmatter(content: string): JsonValue {\n  const trimmed = content.trim()\n  if (trimmed.startsWith('{')) {\n    return JSON.parse(trimmed)\n  }\n  return parseYaml(trimmed) as JsonValue\n}\n\n/**\n * Post-process rendered HTML to convert frontmatter placeholders to actual HTML.\n * Call this after marked.parse() completes and DOM is ready.\n */\nexport function renderFrontmatterBlocks(): void {\n  const containers = document.querySelectorAll<HTMLElement>('.frontmatter-raw')\n\n  for (const container of containers) {\n    const content = container.textContent || ''\n    if (!content.trim()) continue\n\n    try {\n      const data = parseFrontmatter(content)\n      const html = renderJson(data)\n      // Wrap in frontmatter-specific container for styling\n      container.outerHTML = `<div class=\"frontmatter-container\">${html}</div>`\n    } catch (error) {\n      console.error('Failed to render frontmatter:', error)\n    }\n  }\n}\n\n/**\n * Marked extension that intercepts YAML/JSON frontmatter at the start of documents.\n * Use with: marked.use({ extensions: [frontmatterExtension] })\n */\nexport const frontmatterExtension: TokenizerExtension & RendererExtension = {\n  name: 'frontmatter',\n  level: 'block',\n  start(src: string) {\n    // Only match at the very start of the document\n    if (src.match(/^---\\r?\\n/)) {\n      return 0\n    }\n    return undefined\n  },\n  tokenizer(src: string) {\n    // Match YAML frontmatter: ---\\n...\\n---\n    const match = src.match(/^---\\r?\\n([\\s\\S]*?)\\r?\\n---(?:\\r?\\n|$)/)\n    if (match) {\n      return {\n        type: 'frontmatter',\n        raw: match[0],\n        text: match[1],\n      }\n    }\n    return undefined\n  },\n  renderer(token) {\n    // Escape HTML in the raw content\n    const escaped = token.text\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n    return `<div class=\"frontmatter-raw\">${escaped}</div>\\n`\n  },\n}\n\n"],"mappings":";AACA,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAA6B;AAM/B,SAAS,iBAAiB,SAA4B;AAC3D,QAAM,UAAU,QAAQ,KAAK;AAC7B,MAAI,QAAQ,WAAW,GAAG,GAAG;AAC3B,WAAO,KAAK,MAAM,OAAO;AAAA,EAC3B;AACA,SAAO,UAAU,OAAO;AAC1B;AAMO,SAAS,0BAAgC;AAC9C,QAAM,aAAa,SAAS,iBAA8B,kBAAkB;AAE5E,aAAW,aAAa,YAAY;AAClC,UAAM,UAAU,UAAU,eAAe;AACzC,QAAI,CAAC,QAAQ,KAAK,EAAG;AAErB,QAAI;AACF,YAAM,OAAO,iBAAiB,OAAO;AACrC,YAAM,OAAO,WAAW,IAAI;AAE5B,gBAAU,YAAY,sCAAsC,IAAI;AAAA,IAClE,SAAS,OAAO;AACd,cAAQ,MAAM,iCAAiC,KAAK;AAAA,IACtD;AAAA,EACF;AACF;AAMO,IAAM,uBAA+D;AAAA,EAC1E,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,KAAa;AAEjB,QAAI,IAAI,MAAM,WAAW,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU,KAAa;AAErB,UAAM,QAAQ,IAAI,MAAM,wCAAwC;AAChE,QAAI,OAAO;AACT,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,MAAM,CAAC;AAAA,QACZ,MAAM,MAAM,CAAC;AAAA,MACf;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,OAAO;AAEd,UAAM,UAAU,MAAM,KACnB,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AACvB,WAAO,gCAAgC,OAAO;AAAA;AAAA,EAChD;AACF;","names":[]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "marked-frontmatter",
+  "version": "1.0.0",
+  "description": "Marked extension for rendering YAML/JSON frontmatter as HTML tree tables",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "marked",
+    "frontmatter",
+    "yaml",
+    "json",
+    "html",
+    "extension"
+  ],
+  "author": "Igor Afanasyev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iafan/marked-frontmatter.git"
+  },
+  "license": "Unlicense",
+  "dependencies": {
+    "js-yaml": "^4.1.0"
+  },
+  "peerDependencies": {
+    "json-to-frontmatter-html": ">=1.0.0",
+    "marked": ">=4.0.0",
+    "tree-to-html": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "json-to-frontmatter-html": "^1.0.0",
+    "marked": "^17.0.1",
+    "tree-to-html": "^1.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+import type { TokenizerExtension, RendererExtension } from 'marked'
+import { load as parseYaml } from 'js-yaml'
+import { renderJson, JsonValue } from 'json-to-frontmatter-html'
+
+/**
+ * Parse frontmatter content as YAML or JSON.
+ * If content starts with '{', parse as JSON; otherwise parse as YAML.
+ */
+export function parseFrontmatter(content: string): JsonValue {
+  const trimmed = content.trim()
+  if (trimmed.startsWith('{')) {
+    return JSON.parse(trimmed)
+  }
+  return parseYaml(trimmed) as JsonValue
+}
+
+/**
+ * Post-process rendered HTML to convert frontmatter placeholders to actual HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+export function renderFrontmatterBlocks(): void {
+  const containers = document.querySelectorAll<HTMLElement>('.frontmatter-raw')
+
+  for (const container of containers) {
+    const content = container.textContent || ''
+    if (!content.trim()) continue
+
+    try {
+      const data = parseFrontmatter(content)
+      const html = renderJson(data)
+      // Wrap in frontmatter-specific container for styling
+      container.outerHTML = `<div class="frontmatter-container">${html}</div>`
+    } catch (error) {
+      console.error('Failed to render frontmatter:', error)
+    }
+  }
+}
+
+/**
+ * Marked extension that intercepts YAML/JSON frontmatter at the start of documents.
+ * Use with: marked.use({ extensions: [frontmatterExtension] })
+ */
+export const frontmatterExtension: TokenizerExtension & RendererExtension = {
+  name: 'frontmatter',
+  level: 'block',
+  start(src: string) {
+    // Only match at the very start of the document
+    if (src.match(/^---\r?\n/)) {
+      return 0
+    }
+    return undefined
+  },
+  tokenizer(src: string) {
+    // Match YAML frontmatter: ---\n...\n---
+    const match = src.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/)
+    if (match) {
+      return {
+        type: 'frontmatter',
+        raw: match[0],
+        text: match[1],
+      }
+    }
+    return undefined
+  },
+  renderer(token) {
+    // Escape HTML in the raw content
+    const escaped = token.text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+    return `<div class="frontmatter-raw">${escaped}</div>\n`
+  },
+}
+