@raspberrypifoundation/rpf-markdown-core 0.1.1 → 0.1.2

package/dist/index.cjs

@@ -45,12 +45,16 @@ function escapeHtml(value) {
 }
 
 // src/block_renderers.ts
+var parseMarkdown = (input) => import_marked.marked.parse(input);
+function setMarkdownParser(parse) {
+  parseMarkdown = parse;
+}
 var CALLOUT_HEADINGS = {
   debug: "Debugging",
   tip: "Tip"
 };
 function renderMarkdown(input) {
-  return import_marked.marked.parse(input);
+  return parseMarkdown(input);
 }
 function renderAccordion({
   modifier,
@@ -408,7 +412,8 @@ function getOrCreateScratchblocksRenderer() {
   return rendererCache;
 }
 function parseScratchblocksBlock(fencedBlock) {
-  const fenceMatch = fencedBlock.match(SCRATCHBLOCKS_FENCED_BLOCK_REGEX);
+  const normalizedBlock = fencedBlock.replace(/\r\n/g, "\n").trimEnd();
+  const fenceMatch = normalizedBlock.match(SCRATCHBLOCKS_FENCED_BLOCK_REGEX);
   if (!fenceMatch) {
     throw new Error(SCRATCHBLOCKS_PARSE_ERROR);
   }
@@ -416,14 +421,14 @@ function parseScratchblocksBlock(fencedBlock) {
   const code = fenceMatch[3] ?? "";
   const style = mapFenceInfoToStyle(infoString);
   try {
-    const renderer = getOrCreateScratchblocksRenderer();
-    const doc = renderer.api.parse(code, { languages: ["en"] });
-    const svgElement = renderer.api.render(doc, {
+    const renderer2 = getOrCreateScratchblocksRenderer();
+    const doc = renderer2.api.parse(code, { languages: ["en"] });
+    const svgElement = renderer2.api.render(doc, {
       style,
       languages: ["en"],
       scale: 1
     });
-    const svg = embedStylesIntoSvg(svgElement.outerHTML, renderer.stylesHtml);
+    const svg = embedStylesIntoSvg(svgElement.outerHTML, renderer2.stylesHtml);
     const html = `<div class="c-project-scratchblocks" data-style="${style}">${svg}</div>`;
     return { html, style, svg };
   } catch (error) {
@@ -976,268 +981,313 @@ function createLegacyBlockExtension(name, blockName, render, appendNewline = tru
     }
   };
 }
-function canUseHtmlRenderer(content) {
-  return /^\s*(?:<!doctype\b|<!--|<(?:article|aside|blockquote|br|code|details|div|dl|figure|footer|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)\b)/i.test(
-    content
-  );
-}
-function serializeHtmlRendererNode(node) {
-  if ("outerHTML" in node && typeof node.outerHTML === "string") {
-    return node.outerHTML;
+var RAW_HTML_BLOCK_TAGS = "article|aside|blockquote|body|details|dialog|div|dl|fieldset|figure|footer|form|h[1-6]|head|header|hr|html|iframe|main|nav|ol|p|pre|script|section|style|svg|table|ul|video";
+var RAW_HTML_VOID_TAGS = /* @__PURE__ */ new Set(["hr", "br", "img", "input", "wbr", "col"]);
+var RAW_HTML_BLOCK_AT_START = new RegExp(
+  `^[ \\t]*(?:<!--|<!doctype\\b|<(?:${RAW_HTML_BLOCK_TAGS})(?=[\\s/>]))`,
+  "i"
+);
+var RAW_HTML_BLOCK_SEARCH = new RegExp(RAW_HTML_BLOCK_AT_START.source, "im");
+function consumeTrailingNewline(src, end) {
+  const after = /^[ \t]*\r?\n/.exec(src.slice(end));
+  return src.slice(0, end + (after?.[0].length ?? 0));
+}
+function matchRawHtmlBlock(src) {
+  if (!RAW_HTML_BLOCK_AT_START.test(src)) return void 0;
+  const leading = /^[ \t]*/.exec(src)?.[0].length ?? 0;
+  const rest = src.slice(leading);
+  if (rest.startsWith("<!--")) {
+    const end = rest.indexOf("-->");
+    if (end === -1) return void 0;
+    return consumeTrailingNewline(src, leading + end + 3);
   }
-  if (node.nodeType === 8) {
-    return `<!--${node.textContent ?? ""}-->`;
+  const doctype = /^<!doctype\b[^>]*>/i.exec(rest);
+  if (doctype) {
+    return consumeTrailingNewline(src, leading + doctype[0].length);
   }
-  return node.textContent ?? "";
-}
-function serializeHtmlRendererOutput(fragment) {
-  return Array.from(fragment.childNodes).map(serializeHtmlRendererNode).join("");
-}
-function processHtmlContent(content) {
-  if (typeof document === "undefined") {
-    return applyInlineCodeClasses(content);
+  const open = /^<([a-z][a-z0-9]*)(?=[\s/>])[^>]*>/i.exec(rest);
+  if (!open) return void 0;
+  const tag = (open[1] ?? "").toLowerCase();
+  if (open[0].endsWith("/>") || RAW_HTML_VOID_TAGS.has(tag)) {
+    return consumeTrailingNewline(src, leading + open[0].length);
   }
-  const template = document.createElement("template");
-  template.innerHTML = content;
-  return applyInlineCodeClasses(serializeHtmlRendererOutput(template.content));
-}
-function processEditorProject(content) {
-  if (canUseHtmlRenderer(content)) {
-    return processHtmlContent(content);
+  const tagRe = new RegExp(`<(/?)${tag}(?=[\\s/>])[^>]*>`, "ig");
+  tagRe.lastIndex = leading;
+  let depth = 0;
+  let match;
+  while ((match = tagRe.exec(src)) !== null) {
+    if (match[1] === "/") {
+      depth--;
+    } else if (!match[0].endsWith("/>")) {
+      depth++;
+    }
+    if (depth === 0) {
+      return consumeTrailingNewline(src, tagRe.lastIndex);
+    }
   }
-  import_marked2.marked.use(markedSmartypantsLite());
-  import_marked2.marked.use({
-    extensions: [
-      {
-        name: "htmlLineBreak",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/m);
-        },
-        tokenizer(src) {
-          const match = /^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/.exec(src);
-          if (match) {
-            return { type: "htmlLineBreak", raw: match[0] };
-          }
-        },
-        renderer() {
-          return "<div class=page-break></div>\n";
+  return void 0;
+}
+var renderer = new import_marked2.Marked();
+renderer.use(markedSmartypantsLite());
+renderer.use({
+  extensions: [
+    // Generic raw HTML passthrough. marked registers extension tokenizers by
+    // unshifting, so dispatch order is the reverse of this array — placing
+    // this first means it is tried LAST, letting the specific HTML
+    // transformers below (callouts, output, wrapped code) take precedence.
+    // Any other top-level HTML element is captured whole and emitted verbatim
+    // so its interior is never re-parsed as markdown.
+    {
+      name: "rawHtmlBlock",
+      level: "block",
+      start(src) {
+        const index = src.search(RAW_HTML_BLOCK_SEARCH);
+        return index < 0 ? void 0 : index;
+      },
+      tokenizer(src) {
+        const raw = matchRawHtmlBlock(src);
+        if (raw) {
+          return { type: "rawHtmlBlock", raw, text: raw };
         }
       },
-      {
-        name: "preservedFence",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*(`{3,}|~{3,})/m);
-        },
-        tokenizer(src) {
-          const match = src.match(
-            /^[ \t]*(`{3,}|~{3,})([^\r\n]*)\r?\n([\s\S]*?)\r?\n[ \t]*\1[ \t]*(?:\n|$)/
-          );
-          if (!match) return;
-          return {
-            type: "preservedFence",
-            raw: match[0],
-            text: match[3] ?? "",
-            info: (match[2] ?? "").trim()
-          };
-        },
-        renderer(token) {
-          return renderMarkedCodeToken(token, token.raw);
+      renderer(token) {
+        return token.text;
+      }
+    },
+    {
+      name: "htmlLineBreak",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/m);
+      },
+      tokenizer(src) {
+        const match = /^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/.exec(src);
+        if (match) {
+          return { type: "htmlLineBreak", raw: match[0] };
         }
       },
-      // RFM alert blocks: > [!TASK], > [!ACCORDION], etc.
-      {
-        name: "rfmBlock",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*>+[ \t]?\[!/m);
-        },
-        tokenizer(src) {
-          const raw = matchRfmBlock(src);
-          if (raw !== void 0) {
-            return { type: "rfmBlock", raw, text: raw };
-          }
-        },
-        renderer(token) {
-          const raw = token.text;
-          const hintBlocks = splitTopLevelRfmHintBlocks(raw);
-          if (hintBlocks.length > 1) {
-            return `${renderHintsPanel(hintBlocks.map(getRfmHintBody))}
-`;
-          }
-          return `${parseRfmBlock(raw).html}
-`;
+      renderer() {
+        return "<div class=page-break></div>\n";
+      }
+    },
+    {
+      name: "preservedFence",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*(`{3,}|~{3,})/m);
+      },
+      tokenizer(src) {
+        const match = src.match(
+          /^[ \t]*(`{3,}|~{3,})([^\r\n]*)\r?\n([\s\S]*?)\r?\n[ \t]*\1[ \t]*(?:\n|$)/
+        );
+        if (!match) return;
+        return {
+          type: "preservedFence",
+          raw: match[0],
+          text: match[3] ?? "",
+          info: (match[2] ?? "").trim()
+        };
+      },
+      renderer(token) {
+        return renderMarkedCodeToken(token, token.raw);
+      }
+    },
+    // RFM alert blocks: > [!TASK], > [!ACCORDION], etc.
+    {
+      name: "rfmBlock",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*>+[ \t]?\[!/m);
+      },
+      tokenizer(src) {
+        const raw = matchRfmBlock(src);
+        if (raw !== void 0) {
+          return { type: "rfmBlock", raw, text: raw };
         }
       },
-      // RPF callout blocks: <div class="c-project-callout c-project-callout--{type}">
-      {
-        name: "rpfCallout",
-        level: "block",
-        start(src) {
-          return src.search(
-            /<div\s+class="c-project-callout\s+c-project-callout--/
-          );
-        },
-        tokenizer(src) {
-          const match = /^<div\s+class="c-project-callout\s+c-project-callout--[a-z0-9-]+">[\s\S]*?<\/div>/.exec(
-            src
-          );
-          if (match) {
-            return { type: "rpfCallout", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseCalloutBlock(token.text).html}
+      renderer(token) {
+        const raw = token.text;
+        const hintBlocks = splitTopLevelRfmHintBlocks(raw);
+        if (hintBlocks.length > 1) {
+          return `${renderHintsPanel(hintBlocks.map(getRfmHintBody))}
 `;
         }
-      },
-      // RPF task blocks: --- task --- ... --- /task ---
-      {
-        name: "rpfTask",
-        level: "block",
-        start(src) {
-          return src.search(/^--- task ---$/m);
-        },
-        tokenizer(src) {
-          const match = /^--- task ---\n[\s\S]*?\n--- \/task ---/.exec(src);
-          if (match) {
-            return { type: "rpfTask", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseTaskBlock(token.text).html}
+        return `${parseRfmBlock(raw).html}
 `;
+      }
+    },
+    // RPF callout blocks: <div class="c-project-callout c-project-callout--{type}">
+    {
+      name: "rpfCallout",
+      level: "block",
+      start(src) {
+        return src.search(
+          /<div\s+class="c-project-callout\s+c-project-callout--/
+        );
+      },
+      tokenizer(src) {
+        const match = /^<div\s+class="c-project-callout\s+c-project-callout--[a-z0-9-]+">[\s\S]*?<\/div>/.exec(
+          src
+        );
+        if (match) {
+          return { type: "rpfCallout", raw: match[0], text: match[0] };
         }
       },
-      // RPF collapse blocks: --- collapse --- ... --- /collapse ---
-      createLegacyBlockExtension("rpfCollapse", "collapse", parseCollapseBlock),
-      // RPF hints blocks: --- hints --- ... --- /hints ---
-      createLegacyBlockExtension("rpfHints", "hints", parseHintsBlock),
-      // RPF hint blocks: --- hint --- ... --- /hint ---
-      createLegacyBlockExtension("rpfHint", "hint", parseHintBlock),
-      // RPF challenge blocks: --- challenge --- ... --- /challenge ---
-      createLegacyBlockExtension(
-        "rpfChallenge",
-        "challenge",
-        parseChallengeBlock,
-        false
-      ),
-      // RPF print visibility blocks.
-      createLegacyBlockExtension("rpfNoPrint", "no-print", parseNoPrintBlock),
-      createLegacyBlockExtension(
-        "rpfPrintOnly",
-        "print-only",
-        parsePrintOnlyBlock
-      ),
-      // RPF save block: --- save ---
-      {
-        name: "rpfSave",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*--- save ---$/m);
-        },
-        tokenizer(src) {
-          const match = /^[ \t]*---\s+save\s+---[ \t]*(?:\n|$)/.exec(src);
-          if (match) {
-            return { type: "rpfSave", raw: match[0], text: match[0] };
-          }
-        },
-        renderer() {
-          return `${parseSaveBlock()}
+      renderer(token) {
+        return `${parseCalloutBlock(token.text).html}
 `;
+      }
+    },
+    // RPF task blocks: --- task --- ... --- /task ---
+    {
+      name: "rpfTask",
+      level: "block",
+      start(src) {
+        return src.search(/^--- task ---$/m);
+      },
+      tokenizer(src) {
+        const match = /^--- task ---\n[\s\S]*?\n--- \/task ---/.exec(src);
+        if (match) {
+          return { type: "rpfTask", raw: match[0], text: match[0] };
         }
       },
-      // RPF code blocks: --- code --- ... --- /code ---
-      // Also handles the wrapped form: <div class="c-project-code">\n--- code ---\n...\n--- /code ---\n</div>
-      {
-        name: "rpfCode",
-        level: "block",
-        start(src) {
-          const bare = src.search(/^--- code ---$/m);
-          const wrapped = src.search(/^<div class="c-project-code">/m);
-          if (bare === -1) return wrapped;
-          if (wrapped === -1) return bare;
-          return Math.min(bare, wrapped);
-        },
-        tokenizer(src) {
-          const wrappedMatch = /^<div class="c-project-code">\n(--- code ---\n[\s\S]*?\n--- \/code ---)\n\s*<\/div>/.exec(
-            src
-          );
-          if (wrappedMatch) {
-            return {
-              type: "rpfCode",
-              raw: wrappedMatch[0],
-              text: wrappedMatch[1]
-            };
-          }
-          const match = /^--- code ---\n[\s\S]*?\n--- \/code ---/.exec(src);
-          if (match) {
-            return { type: "rpfCode", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseRpfCodeBlock(token.text).html}
+      renderer(token) {
+        return `${parseTaskBlock(token.text).html}
 `;
+      }
+    },
+    // RPF collapse blocks: --- collapse --- ... --- /collapse ---
+    createLegacyBlockExtension("rpfCollapse", "collapse", parseCollapseBlock),
+    // RPF hints blocks: --- hints --- ... --- /hints ---
+    createLegacyBlockExtension("rpfHints", "hints", parseHintsBlock),
+    // RPF hint blocks: --- hint --- ... --- /hint ---
+    createLegacyBlockExtension("rpfHint", "hint", parseHintBlock),
+    // RPF challenge blocks: --- challenge --- ... --- /challenge ---
+    createLegacyBlockExtension(
+      "rpfChallenge",
+      "challenge",
+      parseChallengeBlock,
+      false
+    ),
+    // RPF print visibility blocks.
+    createLegacyBlockExtension("rpfNoPrint", "no-print", parseNoPrintBlock),
+    createLegacyBlockExtension(
+      "rpfPrintOnly",
+      "print-only",
+      parsePrintOnlyBlock
+    ),
+    // RPF save block: --- save ---
+    {
+      name: "rpfSave",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*--- save ---$/m);
+      },
+      tokenizer(src) {
+        const match = /^[ \t]*---\s+save\s+---[ \t]*(?:\n|$)/.exec(src);
+        if (match) {
+          return { type: "rpfSave", raw: match[0], text: match[0] };
         }
       },
-      // RPF output blocks: <div class="c-project-output"> ... </div>
-      {
-        name: "rpfOutput",
-        level: "block",
-        start(src) {
-          return src.search(/^<div\s+class="c-project-output">\s*$/m);
-        },
-        tokenizer(src) {
-          const match = /^<div\s+class="c-project-output">\s[\s\S]*?<\/div>/.exec(src);
-          if (match) {
-            return { type: "rpfOutput", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseOutputBlock(token.text)}
+      renderer() {
+        return `${parseSaveBlock()}
 `;
+      }
+    },
+    // RPF code blocks: --- code --- ... --- /code ---
+    // Also handles the wrapped form: <div class="c-project-code">\n--- code ---\n...\n--- /code ---\n</div>
+    {
+      name: "rpfCode",
+      level: "block",
+      start(src) {
+        const bare = src.search(/^--- code ---$/m);
+        const wrapped = src.search(/^<div class="c-project-code">/m);
+        if (bare === -1) return wrapped;
+        if (wrapped === -1) return bare;
+        return Math.min(bare, wrapped);
+      },
+      tokenizer(src) {
+        const wrappedMatch = /^<div class="c-project-code">\n(--- code ---\n[\s\S]*?\n--- \/code ---)\n\s*<\/div>/.exec(
+          src
+        );
+        if (wrappedMatch) {
+          return {
+            type: "rpfCode",
+            raw: wrappedMatch[0],
+            text: wrappedMatch[1]
+          };
+        }
+        const match = /^--- code ---\n[\s\S]*?\n--- \/code ---/.exec(src);
+        if (match) {
+          return { type: "rpfCode", raw: match[0], text: match[0] };
         }
+      },
+      renderer(token) {
+        return `${parseRpfCodeBlock(token.text).html}
+`;
       }
-    ],
-    renderer: {
-      // Override fenced code blocks to use Prism with our custom options.
-      code(token) {
-        return renderMarkedCodeToken(token);
+    },
+    // RPF output blocks: <div class="c-project-output"> ... </div>
+    {
+      name: "rpfOutput",
+      level: "block",
+      start(src) {
+        return src.search(/^<div\s+class="c-project-output">\s*$/m);
       },
-      listitem(item) {
-        const itemTokens = Array.isArray(item.tokens) ? item.tokens : [];
-        const raw = typeof item.raw === "string" ? item.raw : "";
-        const rawFenceBlocks = extractListItemFenceBlocks(raw);
-        let rawFenceIndex = 0;
-        const firstNewline = raw.indexOf("\n");
-        const hasBlankLineAfterMarker = firstNewline !== -1 && /^\n[ \t]*\n/.test(raw.slice(firstNewline));
-        let body = "";
-        for (let index = 0; index < itemTokens.length; index++) {
-          const token = itemTokens[index];
-          if (index === 0 && !item.task && !hasBlankLineAfterMarker && itemTokens.length > 1 && token?.type === "paragraph") {
-            body += this.parser.parseInline(token.tokens ?? []);
-            continue;
-          }
-          if (token?.type === "code" || token?.type === "preservedFence") {
-            body += renderMarkedCodeToken(token, rawFenceBlocks[rawFenceIndex]);
-            rawFenceIndex++;
-            continue;
-          }
-          body += this.parser.parse([token]).trimStart();
+      tokenizer(src) {
+        const match = /^<div\s+class="c-project-output">\s[\s\S]*?<\/div>/.exec(
+          src
+        );
+        if (match) {
+          return { type: "rpfOutput", raw: match[0], text: match[0] };
         }
-        return `<li>${body}</li>
+      },
+      renderer(token) {
+        return `${parseOutputBlock(token.text)}
 `;
       }
+    }
+  ],
+  renderer: {
+    // Override fenced code blocks to use Prism with our custom options.
+    code(token) {
+      return renderMarkedCodeToken(token);
     },
-    hooks: {
-      postprocess(html) {
-        return applyInlineCodeClasses(html);
+    listitem(item) {
+      const itemTokens = Array.isArray(item.tokens) ? item.tokens : [];
+      const raw = typeof item.raw === "string" ? item.raw : "";
+      const rawFenceBlocks = extractListItemFenceBlocks(raw);
+      let rawFenceIndex = 0;
+      const firstNewline = raw.indexOf("\n");
+      const hasBlankLineAfterMarker = firstNewline !== -1 && /^\n[ \t]*\n/.test(raw.slice(firstNewline));
+      let body = "";
+      for (let index = 0; index < itemTokens.length; index++) {
+        const token = itemTokens[index];
+        if (index === 0 && !item.task && !hasBlankLineAfterMarker && itemTokens.length > 1 && token?.type === "paragraph") {
+          body += this.parser.parseInline(token.tokens ?? []);
+          continue;
+        }
+        if (token?.type === "code" || token?.type === "preservedFence") {
+          body += renderMarkedCodeToken(token, rawFenceBlocks[rawFenceIndex]);
+          rawFenceIndex++;
+          continue;
+        }
+        body += this.parser.parse([token]).trimStart();
       }
+      return `<li>${body}</li>
+`;
     }
-  });
-  import_marked2.marked.use((0, import_marked_gfm_heading_id.gfmHeadingId)({ prefix: "" }));
-  return import_marked2.marked.parse(content);
+  },
+  hooks: {
+    postprocess(html) {
+      return applyInlineCodeClasses(html);
+    }
+  }
+});
+renderer.use((0, import_marked_gfm_heading_id.gfmHeadingId)({ prefix: "" }));
+setMarkdownParser((input) => renderer.parse(input));
+function processEditorProject(content) {
+  return renderer.parse(content);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { marked as marked2 } from "marked";
+import { Marked } from "marked";
 import { gfmHeadingId } from "marked-gfm-heading-id";
 
 // src/block_renderers.ts
@@ -11,12 +11,16 @@ function escapeHtml(value) {
 }
 
 // src/block_renderers.ts
+var parseMarkdown = (input) => marked.parse(input);
+function setMarkdownParser(parse) {
+  parseMarkdown = parse;
+}
 var CALLOUT_HEADINGS = {
   debug: "Debugging",
   tip: "Tip"
 };
 function renderMarkdown(input) {
-  return marked.parse(input);
+  return parseMarkdown(input);
 }
 function renderAccordion({
   modifier,
@@ -373,7 +377,8 @@ function getOrCreateScratchblocksRenderer() {
   return rendererCache;
 }
 function parseScratchblocksBlock(fencedBlock) {
-  const fenceMatch = fencedBlock.match(SCRATCHBLOCKS_FENCED_BLOCK_REGEX);
+  const normalizedBlock = fencedBlock.replace(/\r\n/g, "\n").trimEnd();
+  const fenceMatch = normalizedBlock.match(SCRATCHBLOCKS_FENCED_BLOCK_REGEX);
   if (!fenceMatch) {
     throw new Error(SCRATCHBLOCKS_PARSE_ERROR);
   }
@@ -381,14 +386,14 @@ function parseScratchblocksBlock(fencedBlock) {
   const code = fenceMatch[3] ?? "";
   const style = mapFenceInfoToStyle(infoString);
   try {
-    const renderer = getOrCreateScratchblocksRenderer();
-    const doc = renderer.api.parse(code, { languages: ["en"] });
-    const svgElement = renderer.api.render(doc, {
+    const renderer2 = getOrCreateScratchblocksRenderer();
+    const doc = renderer2.api.parse(code, { languages: ["en"] });
+    const svgElement = renderer2.api.render(doc, {
       style,
       languages: ["en"],
       scale: 1
     });
-    const svg = embedStylesIntoSvg(svgElement.outerHTML, renderer.stylesHtml);
+    const svg = embedStylesIntoSvg(svgElement.outerHTML, renderer2.stylesHtml);
     const html = `<div class="c-project-scratchblocks" data-style="${style}">${svg}</div>`;
     return { html, style, svg };
   } catch (error) {
@@ -941,268 +946,313 @@ function createLegacyBlockExtension(name, blockName, render, appendNewline = tru
     }
   };
 }
-function canUseHtmlRenderer(content) {
-  return /^\s*(?:<!doctype\b|<!--|<(?:article|aside|blockquote|br|code|details|div|dl|figure|footer|h[1-6]|header|hr|main|nav|ol|p|pre|section|table|ul)\b)/i.test(
-    content
-  );
-}
-function serializeHtmlRendererNode(node) {
-  if ("outerHTML" in node && typeof node.outerHTML === "string") {
-    return node.outerHTML;
+var RAW_HTML_BLOCK_TAGS = "article|aside|blockquote|body|details|dialog|div|dl|fieldset|figure|footer|form|h[1-6]|head|header|hr|html|iframe|main|nav|ol|p|pre|script|section|style|svg|table|ul|video";
+var RAW_HTML_VOID_TAGS = /* @__PURE__ */ new Set(["hr", "br", "img", "input", "wbr", "col"]);
+var RAW_HTML_BLOCK_AT_START = new RegExp(
+  `^[ \\t]*(?:<!--|<!doctype\\b|<(?:${RAW_HTML_BLOCK_TAGS})(?=[\\s/>]))`,
+  "i"
+);
+var RAW_HTML_BLOCK_SEARCH = new RegExp(RAW_HTML_BLOCK_AT_START.source, "im");
+function consumeTrailingNewline(src, end) {
+  const after = /^[ \t]*\r?\n/.exec(src.slice(end));
+  return src.slice(0, end + (after?.[0].length ?? 0));
+}
+function matchRawHtmlBlock(src) {
+  if (!RAW_HTML_BLOCK_AT_START.test(src)) return void 0;
+  const leading = /^[ \t]*/.exec(src)?.[0].length ?? 0;
+  const rest = src.slice(leading);
+  if (rest.startsWith("<!--")) {
+    const end = rest.indexOf("-->");
+    if (end === -1) return void 0;
+    return consumeTrailingNewline(src, leading + end + 3);
   }
-  if (node.nodeType === 8) {
-    return `<!--${node.textContent ?? ""}-->`;
+  const doctype = /^<!doctype\b[^>]*>/i.exec(rest);
+  if (doctype) {
+    return consumeTrailingNewline(src, leading + doctype[0].length);
   }
-  return node.textContent ?? "";
-}
-function serializeHtmlRendererOutput(fragment) {
-  return Array.from(fragment.childNodes).map(serializeHtmlRendererNode).join("");
-}
-function processHtmlContent(content) {
-  if (typeof document === "undefined") {
-    return applyInlineCodeClasses(content);
+  const open = /^<([a-z][a-z0-9]*)(?=[\s/>])[^>]*>/i.exec(rest);
+  if (!open) return void 0;
+  const tag = (open[1] ?? "").toLowerCase();
+  if (open[0].endsWith("/>") || RAW_HTML_VOID_TAGS.has(tag)) {
+    return consumeTrailingNewline(src, leading + open[0].length);
   }
-  const template = document.createElement("template");
-  template.innerHTML = content;
-  return applyInlineCodeClasses(serializeHtmlRendererOutput(template.content));
-}
-function processEditorProject(content) {
-  if (canUseHtmlRenderer(content)) {
-    return processHtmlContent(content);
+  const tagRe = new RegExp(`<(/?)${tag}(?=[\\s/>])[^>]*>`, "ig");
+  tagRe.lastIndex = leading;
+  let depth = 0;
+  let match;
+  while ((match = tagRe.exec(src)) !== null) {
+    if (match[1] === "/") {
+      depth--;
+    } else if (!match[0].endsWith("/>")) {
+      depth++;
+    }
+    if (depth === 0) {
+      return consumeTrailingNewline(src, tagRe.lastIndex);
+    }
   }
-  marked2.use(markedSmartypantsLite());
-  marked2.use({
-    extensions: [
-      {
-        name: "htmlLineBreak",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/m);
-        },
-        tokenizer(src) {
-          const match = /^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/.exec(src);
-          if (match) {
-            return { type: "htmlLineBreak", raw: match[0] };
-          }
-        },
-        renderer() {
-          return "<div class=page-break></div>\n";
+  return void 0;
+}
+var renderer = new Marked();
+renderer.use(markedSmartypantsLite());
+renderer.use({
+  extensions: [
+    // Generic raw HTML passthrough. marked registers extension tokenizers by
+    // unshifting, so dispatch order is the reverse of this array — placing
+    // this first means it is tried LAST, letting the specific HTML
+    // transformers below (callouts, output, wrapped code) take precedence.
+    // Any other top-level HTML element is captured whole and emitted verbatim
+    // so its interior is never re-parsed as markdown.
+    {
+      name: "rawHtmlBlock",
+      level: "block",
+      start(src) {
+        const index = src.search(RAW_HTML_BLOCK_SEARCH);
+        return index < 0 ? void 0 : index;
+      },
+      tokenizer(src) {
+        const raw = matchRawHtmlBlock(src);
+        if (raw) {
+          return { type: "rawHtmlBlock", raw, text: raw };
         }
       },
-      {
-        name: "preservedFence",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*(`{3,}|~{3,})/m);
-        },
-        tokenizer(src) {
-          const match = src.match(
-            /^[ \t]*(`{3,}|~{3,})([^\r\n]*)\r?\n([\s\S]*?)\r?\n[ \t]*\1[ \t]*(?:\n|$)/
-          );
-          if (!match) return;
-          return {
-            type: "preservedFence",
-            raw: match[0],
-            text: match[3] ?? "",
-            info: (match[2] ?? "").trim()
-          };
-        },
-        renderer(token) {
-          return renderMarkedCodeToken(token, token.raw);
+      renderer(token) {
+        return token.text;
+      }
+    },
+    {
+      name: "htmlLineBreak",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/m);
+      },
+      tokenizer(src) {
+        const match = /^[ \t]*\{\.page-break\}[ \t]*(?:\n|$)/.exec(src);
+        if (match) {
+          return { type: "htmlLineBreak", raw: match[0] };
         }
       },
-      // RFM alert blocks: > [!TASK], > [!ACCORDION], etc.
-      {
-        name: "rfmBlock",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*>+[ \t]?\[!/m);
-        },
-        tokenizer(src) {
-          const raw = matchRfmBlock(src);
-          if (raw !== void 0) {
-            return { type: "rfmBlock", raw, text: raw };
-          }
-        },
-        renderer(token) {
-          const raw = token.text;
-          const hintBlocks = splitTopLevelRfmHintBlocks(raw);
-          if (hintBlocks.length > 1) {
-            return `${renderHintsPanel(hintBlocks.map(getRfmHintBody))}
-`;
-          }
-          return `${parseRfmBlock(raw).html}
-`;
+      renderer() {
+        return "<div class=page-break></div>\n";
+      }
+    },
+    {
+      name: "preservedFence",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*(`{3,}|~{3,})/m);
+      },
+      tokenizer(src) {
+        const match = src.match(
+          /^[ \t]*(`{3,}|~{3,})([^\r\n]*)\r?\n([\s\S]*?)\r?\n[ \t]*\1[ \t]*(?:\n|$)/
+        );
+        if (!match) return;
+        return {
+          type: "preservedFence",
+          raw: match[0],
+          text: match[3] ?? "",
+          info: (match[2] ?? "").trim()
+        };
+      },
+      renderer(token) {
+        return renderMarkedCodeToken(token, token.raw);
+      }
+    },
+    // RFM alert blocks: > [!TASK], > [!ACCORDION], etc.
+    {
+      name: "rfmBlock",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*>+[ \t]?\[!/m);
+      },
+      tokenizer(src) {
+        const raw = matchRfmBlock(src);
+        if (raw !== void 0) {
+          return { type: "rfmBlock", raw, text: raw };
         }
       },
-      // RPF callout blocks: <div class="c-project-callout c-project-callout--{type}">
-      {
-        name: "rpfCallout",
-        level: "block",
-        start(src) {
-          return src.search(
-            /<div\s+class="c-project-callout\s+c-project-callout--/
-          );
-        },
-        tokenizer(src) {
-          const match = /^<div\s+class="c-project-callout\s+c-project-callout--[a-z0-9-]+">[\s\S]*?<\/div>/.exec(
-            src
-          );
-          if (match) {
-            return { type: "rpfCallout", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseCalloutBlock(token.text).html}
+      renderer(token) {
+        const raw = token.text;
+        const hintBlocks = splitTopLevelRfmHintBlocks(raw);
+        if (hintBlocks.length > 1) {
+          return `${renderHintsPanel(hintBlocks.map(getRfmHintBody))}
 `;
         }
-      },
-      // RPF task blocks: --- task --- ... --- /task ---
-      {
-        name: "rpfTask",
-        level: "block",
-        start(src) {
-          return src.search(/^--- task ---$/m);
-        },
-        tokenizer(src) {
-          const match = /^--- task ---\n[\s\S]*?\n--- \/task ---/.exec(src);
-          if (match) {
-            return { type: "rpfTask", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseTaskBlock(token.text).html}
+        return `${parseRfmBlock(raw).html}
 `;
+      }
+    },
+    // RPF callout blocks: <div class="c-project-callout c-project-callout--{type}">
+    {
+      name: "rpfCallout",
+      level: "block",
+      start(src) {
+        return src.search(
+          /<div\s+class="c-project-callout\s+c-project-callout--/
+        );
+      },
+      tokenizer(src) {
+        const match = /^<div\s+class="c-project-callout\s+c-project-callout--[a-z0-9-]+">[\s\S]*?<\/div>/.exec(
+          src
+        );
+        if (match) {
+          return { type: "rpfCallout", raw: match[0], text: match[0] };
         }
       },
-      // RPF collapse blocks: --- collapse --- ... --- /collapse ---
-      createLegacyBlockExtension("rpfCollapse", "collapse", parseCollapseBlock),
-      // RPF hints blocks: --- hints --- ... --- /hints ---
-      createLegacyBlockExtension("rpfHints", "hints", parseHintsBlock),
-      // RPF hint blocks: --- hint --- ... --- /hint ---
-      createLegacyBlockExtension("rpfHint", "hint", parseHintBlock),
-      // RPF challenge blocks: --- challenge --- ... --- /challenge ---
-      createLegacyBlockExtension(
-        "rpfChallenge",
-        "challenge",
-        parseChallengeBlock,
-        false
-      ),
-      // RPF print visibility blocks.
-      createLegacyBlockExtension("rpfNoPrint", "no-print", parseNoPrintBlock),
-      createLegacyBlockExtension(
-        "rpfPrintOnly",
-        "print-only",
-        parsePrintOnlyBlock
-      ),
-      // RPF save block: --- save ---
-      {
-        name: "rpfSave",
-        level: "block",
-        start(src) {
-          return src.search(/^[ \t]*--- save ---$/m);
-        },
-        tokenizer(src) {
-          const match = /^[ \t]*---\s+save\s+---[ \t]*(?:\n|$)/.exec(src);
-          if (match) {
-            return { type: "rpfSave", raw: match[0], text: match[0] };
-          }
-        },
-        renderer() {
-          return `${parseSaveBlock()}
+      renderer(token) {
+        return `${parseCalloutBlock(token.text).html}
 `;
+      }
+    },
+    // RPF task blocks: --- task --- ... --- /task ---
+    {
+      name: "rpfTask",
+      level: "block",
+      start(src) {
+        return src.search(/^--- task ---$/m);
+      },
+      tokenizer(src) {
+        const match = /^--- task ---\n[\s\S]*?\n--- \/task ---/.exec(src);
+        if (match) {
+          return { type: "rpfTask", raw: match[0], text: match[0] };
         }
       },
-      // RPF code blocks: --- code --- ... --- /code ---
-      // Also handles the wrapped form: <div class="c-project-code">\n--- code ---\n...\n--- /code ---\n</div>
-      {
-        name: "rpfCode",
-        level: "block",
-        start(src) {
-          const bare = src.search(/^--- code ---$/m);
-          const wrapped = src.search(/^<div class="c-project-code">/m);
-          if (bare === -1) return wrapped;
-          if (wrapped === -1) return bare;
-          return Math.min(bare, wrapped);
-        },
-        tokenizer(src) {
-          const wrappedMatch = /^<div class="c-project-code">\n(--- code ---\n[\s\S]*?\n--- \/code ---)\n\s*<\/div>/.exec(
-            src
-          );
-          if (wrappedMatch) {
-            return {
-              type: "rpfCode",
-              raw: wrappedMatch[0],
-              text: wrappedMatch[1]
-            };
-          }
-          const match = /^--- code ---\n[\s\S]*?\n--- \/code ---/.exec(src);
-          if (match) {
-            return { type: "rpfCode", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseRpfCodeBlock(token.text).html}
+      renderer(token) {
+        return `${parseTaskBlock(token.text).html}
 `;
+      }
+    },
+    // RPF collapse blocks: --- collapse --- ... --- /collapse ---
+    createLegacyBlockExtension("rpfCollapse", "collapse", parseCollapseBlock),
+    // RPF hints blocks: --- hints --- ... --- /hints ---
+    createLegacyBlockExtension("rpfHints", "hints", parseHintsBlock),
+    // RPF hint blocks: --- hint --- ... --- /hint ---
+    createLegacyBlockExtension("rpfHint", "hint", parseHintBlock),
+    // RPF challenge blocks: --- challenge --- ... --- /challenge ---
+    createLegacyBlockExtension(
+      "rpfChallenge",
+      "challenge",
+      parseChallengeBlock,
+      false
+    ),
+    // RPF print visibility blocks.
+    createLegacyBlockExtension("rpfNoPrint", "no-print", parseNoPrintBlock),
+    createLegacyBlockExtension(
+      "rpfPrintOnly",
+      "print-only",
+      parsePrintOnlyBlock
+    ),
+    // RPF save block: --- save ---
+    {
+      name: "rpfSave",
+      level: "block",
+      start(src) {
+        return src.search(/^[ \t]*--- save ---$/m);
+      },
+      tokenizer(src) {
+        const match = /^[ \t]*---\s+save\s+---[ \t]*(?:\n|$)/.exec(src);
+        if (match) {
+          return { type: "rpfSave", raw: match[0], text: match[0] };
         }
       },
-      // RPF output blocks: <div class="c-project-output"> ... </div>
-      {
-        name: "rpfOutput",
-        level: "block",
-        start(src) {
-          return src.search(/^<div\s+class="c-project-output">\s*$/m);
-        },
-        tokenizer(src) {
-          const match = /^<div\s+class="c-project-output">\s[\s\S]*?<\/div>/.exec(src);
-          if (match) {
-            return { type: "rpfOutput", raw: match[0], text: match[0] };
-          }
-        },
-        renderer(token) {
-          return `${parseOutputBlock(token.text)}
+      renderer() {
+        return `${parseSaveBlock()}
 `;
+      }
+    },
+    // RPF code blocks: --- code --- ... --- /code ---
+    // Also handles the wrapped form: <div class="c-project-code">\n--- code ---\n...\n--- /code ---\n</div>
+    {
+      name: "rpfCode",
+      level: "block",
+      start(src) {
+        const bare = src.search(/^--- code ---$/m);
+        const wrapped = src.search(/^<div class="c-project-code">/m);
+        if (bare === -1) return wrapped;
+        if (wrapped === -1) return bare;
+        return Math.min(bare, wrapped);
+      },
+      tokenizer(src) {
+        const wrappedMatch = /^<div class="c-project-code">\n(--- code ---\n[\s\S]*?\n--- \/code ---)\n\s*<\/div>/.exec(
+          src
+        );
+        if (wrappedMatch) {
+          return {
+            type: "rpfCode",
+            raw: wrappedMatch[0],
+            text: wrappedMatch[1]
+          };
         }
+        const match = /^--- code ---\n[\s\S]*?\n--- \/code ---/.exec(src);
+        if (match) {
+          return { type: "rpfCode", raw: match[0], text: match[0] };
+        }
+      },
+      renderer(token) {
+        return `${parseRpfCodeBlock(token.text).html}
+`;
       }
-    ],
-    renderer: {
-      // Override fenced code blocks to use Prism with our custom options.
-      code(token) {
-        return renderMarkedCodeToken(token);
+    },
+    // RPF output blocks: <div class="c-project-output"> ... </div>
+    {
+      name: "rpfOutput",
+      level: "block",
+      start(src) {
+        return src.search(/^<div\s+class="c-project-output">\s*$/m);
       },
-      listitem(item) {
-        const itemTokens = Array.isArray(item.tokens) ? item.tokens : [];
-        const raw = typeof item.raw === "string" ? item.raw : "";
-        const rawFenceBlocks = extractListItemFenceBlocks(raw);
-        let rawFenceIndex = 0;
-        const firstNewline = raw.indexOf("\n");
-        const hasBlankLineAfterMarker = firstNewline !== -1 && /^\n[ \t]*\n/.test(raw.slice(firstNewline));
-        let body = "";
-        for (let index = 0; index < itemTokens.length; index++) {
-          const token = itemTokens[index];
-          if (index === 0 && !item.task && !hasBlankLineAfterMarker && itemTokens.length > 1 && token?.type === "paragraph") {
-            body += this.parser.parseInline(token.tokens ?? []);
-            continue;
-          }
-          if (token?.type === "code" || token?.type === "preservedFence") {
-            body += renderMarkedCodeToken(token, rawFenceBlocks[rawFenceIndex]);
-            rawFenceIndex++;
-            continue;
-          }
-          body += this.parser.parse([token]).trimStart();
+      tokenizer(src) {
+        const match = /^<div\s+class="c-project-output">\s[\s\S]*?<\/div>/.exec(
+          src
+        );
+        if (match) {
+          return { type: "rpfOutput", raw: match[0], text: match[0] };
         }
-        return `<li>${body}</li>
+      },
+      renderer(token) {
+        return `${parseOutputBlock(token.text)}
 `;
       }
+    }
+  ],
+  renderer: {
+    // Override fenced code blocks to use Prism with our custom options.
+    code(token) {
+      return renderMarkedCodeToken(token);
     },
-    hooks: {
-      postprocess(html) {
-        return applyInlineCodeClasses(html);
+    listitem(item) {
+      const itemTokens = Array.isArray(item.tokens) ? item.tokens : [];
+      const raw = typeof item.raw === "string" ? item.raw : "";
+      const rawFenceBlocks = extractListItemFenceBlocks(raw);
+      let rawFenceIndex = 0;
+      const firstNewline = raw.indexOf("\n");
+      const hasBlankLineAfterMarker = firstNewline !== -1 && /^\n[ \t]*\n/.test(raw.slice(firstNewline));
+      let body = "";
+      for (let index = 0; index < itemTokens.length; index++) {
+        const token = itemTokens[index];
+        if (index === 0 && !item.task && !hasBlankLineAfterMarker && itemTokens.length > 1 && token?.type === "paragraph") {
+          body += this.parser.parseInline(token.tokens ?? []);
+          continue;
+        }
+        if (token?.type === "code" || token?.type === "preservedFence") {
+          body += renderMarkedCodeToken(token, rawFenceBlocks[rawFenceIndex]);
+          rawFenceIndex++;
+          continue;
+        }
+        body += this.parser.parse([token]).trimStart();
       }
+      return `<li>${body}</li>
+`;
     }
-  });
-  marked2.use(gfmHeadingId({ prefix: "" }));
-  return marked2.parse(content);
+  },
+  hooks: {
+    postprocess(html) {
+      return applyInlineCodeClasses(html);
+    }
+  }
+});
+renderer.use(gfmHeadingId({ prefix: "" }));
+setMarkdownParser((input) => renderer.parse(input));
+function processEditorProject(content) {
+  return renderer.parse(content);
 }
 export {
   processEditorProject

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/rpf-markdown-core",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",