comark 0.3.2 → 0.4.0

package/dist/internal/parse/auto-close/index.js

@@ -19,10 +19,33 @@ export function autoCloseMarkdown(markdown) {
     let inFrontmatter = false;
     let inBlockMath = false;
     let tableStart = -1;
+    // Tag name when inside a raw-text HTML element (`<style>`, `<script>`,
+    // `<pre>`, `<textarea>`). Their bodies must be passed through verbatim —
+    // any `::root`/`**` markers there are CSS/JS/text, not Comark/markdown.
+    let inRawTextElement = null;
+    const RAW_TEXT_OPEN_RE = /^<(script|pre|style|textarea)(\s|>|$)/i;
     const componentStack = [];
     for (let idx = 0; idx < n; idx++) {
         const line = lines[idx];
         const trimmed = line.trim();
+        // Raw-text HTML element: skip all line-level processing inside its body,
+        // and update the open/close state. Open and close can sit on the same
+        // line (e.g. `<style>body { ... }</style>` inline).
+        if (inRawTextElement) {
+            const closeRe = new RegExp(`</${inRawTextElement}\\s*>`, 'i');
+            if (closeRe.test(line))
+                inRawTextElement = null;
+            continue;
+        }
+        const rawTextMatch = trimmed.match(RAW_TEXT_OPEN_RE);
+        if (rawTextMatch) {
+            const tag = rawTextMatch[1].toLowerCase();
+            // Stay "inside" only if the close tag isn't already on this line.
+            const closeRe = new RegExp(`</${tag}\\s*>`, 'i');
+            if (!closeRe.test(line))
+                inRawTextElement = tag;
+            continue;
+        }
         // Frontmatter: only starts at document line 0
         if (idx === 0 && trimmed === '---') {
             inFrontmatter = true;
@@ -190,7 +213,8 @@ function closeInlineMarkersLinear(line) {
     // Count markers by scanning
     let asteriskCount = 0;
     let underscoreCount = 0;
-    let tildeCount = 0; // Count individual tildes
+    let doubleTildeCount = 0; // Count ~~ occurrences (GFM strikethrough delimiter)
+    let singleTildeCount = 0; // Count standalone ~ (not part of ~~)
     let backtickCount = 0;
     let dollarCount = 0; // Count $ for math
     let dollarPairCount = 0; // Count $$ pairs for block math
@@ -280,7 +304,13 @@ function closeInlineMarkersLinear(line) {
             }
         }
         else if (ch === '~') {
-            tildeCount++;
+            if (i + 1 < len && line[i + 1] === '~') {
+                doubleTildeCount++;
+                i++; // Skip second tilde since we counted the pair
+            }
+            else {
+                singleTildeCount++;
+            }
         }
         else if (ch === '`') {
             backtickCount++;
@@ -450,22 +480,18 @@ function closeInlineMarkersLinear(line) {
             }
         }
     }
-    // Check ~~ (strikethrough)
-    if (!closingSuffix && tildeCount >= 2) {
-        const remainder = tildeCount % 4;
-        if (remainder === 2) {
-            // Two tildes unclosed, close with ~~
-            closingSuffix = '~~';
-            if (hasTrailingSpace)
-                shouldTrim = true;
-        }
-        else if (remainder > 2 && remainder < 4) {
-            // Partial marker like ~~text~ (3 tildes), need 1 more
-            const needed = 4 - remainder;
-            closingSuffix = '~'.repeat(needed);
-            if (hasTrailingSpace)
-                shouldTrim = true;
-        }
+    // Check ~~ (strikethrough) and ~ (single-tilde) separately so that paired
+    // singles like ~Hello~ are left alone while ~~text and ~Hello both close.
+    if (!closingSuffix && doubleTildeCount % 2 === 1) {
+        // A trailing single ~ after an open ~~ is a partial closer (~~text~)
+        closingSuffix = singleTildeCount === 1 ? '~' : '~~';
+        if (hasTrailingSpace)
+            shouldTrim = true;
+    }
+    else if (!closingSuffix && singleTildeCount % 2 === 1) {
+        closingSuffix = '~';
+        if (hasTrailingSpace)
+            shouldTrim = true;
     }
     // Check ` (code)
     if (!closingSuffix && backtickCount % 2 === 1) {

package/dist/internal/parse/auto-unwrap.js

@@ -30,5 +30,9 @@ export function applyAutoUnwrap(node) {
     if (nonEmptyChildren.length > 1 || typeof nonEmptyChildren[0] === 'string' || nonEmptyChildren[0][0] !== 'p') {
         return [tag, props, ...children.map((child) => applyAutoUnwrap(child))];
     }
-    return [tag, props, ...nonEmptyChildren[0].slice(2)];
+    // Lift the paragraph's attrs onto the parent so trailing `{attr}` survives the unwrap.
+    // Parent attrs take precedence so explicit component props aren't overridden.
+    const paragraphAttrs = nonEmptyChildren[0][1];
+    const mergedProps = paragraphAttrs && Object.keys(paragraphAttrs).length > 0 ? { ...paragraphAttrs, ...props } : props;
+    return [tag, mergedProps, ...nonEmptyChildren[0].slice(2)];
 }

package/dist/internal/parse/html/html_block_rule.js

@@ -1,11 +1,10 @@
-// BASED ON https://github.com/serkodev/markdown-exit/blob/fe1351070a5841426223ab4a0a5c7874ba2b1257/packages/markdown-exit/src/parser/block/rules/html_block.ts
+// Standard CommonMark html_block rule — see
+// https://spec.commonmark.org/0.30/#html-blocks
+//
+// 7 sequences in priority order, each: [opener regex, closer regex, can-terminate-paragraph]
 import block_names from "./html_blocks.js";
 import { HTML_OPEN_CLOSE_TAG_RE } from "./html_re.js";
-// An array of opening and corresponding closing sequences for html tags,
-// last argument defines whether it can terminate a paragraph or not
-//
 const HTML_SEQUENCES = [
-    [new RegExp(`${HTML_OPEN_CLOSE_TAG_RE.source}\\s*$`), /^<\/[^>]+>$/, true],
     [/^<(script|pre|style|textarea)(?=(\s|>|$))/i, /<\/(script|pre|style|textarea)>/i, true],
     [/^<!--/, /-->/, true],
     [/^<\?/, /\?>/, true],
@@ -17,7 +16,6 @@ const HTML_SEQUENCES = [
 export default function html_block(state, startLine, endLine, silent) {
     let pos = state.bMarks[startLine] + state.tShift[startLine];
     let max = state.eMarks[startLine];
-    // if it's indented more than 3 spaces, it should be a code block
     if (state.sCount[startLine] - state.blkIndent >= 4)
         return false;
     if (state.src.charCodeAt(pos) !== 0x3c /* < */)
@@ -30,18 +28,14 @@ export default function html_block(state, startLine, endLine, silent) {
     }
     if (i === HTML_SEQUENCES.length)
         return false;
-    if (silent) {
-        // true if this sequence can be a terminator, false otherwise
+    if (silent)
         return HTML_SEQUENCES[i][2];
-    }
     let nextLine = startLine + 1;
-    // If we are here - we detected HTML block.
-    // Let's roll down till block end.
-    if (i !== 0 && !HTML_SEQUENCES[i][1].test(lineText)) {
+    // Walk forward until the closer regex matches or we hit a blank line.
+    if (!HTML_SEQUENCES[i][1].test(lineText)) {
         for (; nextLine < endLine; nextLine++) {
-            if (state.sCount[nextLine] < state.blkIndent) {
+            if (state.sCount[nextLine] < state.blkIndent)
                 break;
-            }
             pos = state.bMarks[nextLine] + state.tShift[nextLine];
             max = state.eMarks[nextLine];
             lineText = state.src.slice(pos, max);
@@ -53,7 +47,7 @@ export default function html_block(state, startLine, endLine, silent) {
         }
     }
     state.line = nextLine;
-    const token = lineText.startsWith('</') ? state.push('html_block_close', '', -1) : state.push('html_block', '', 1);
+    const token = state.push('html_block', '', 1);
     token.map = [startLine, nextLine];
     token.content = state.getLines(startLine, nextLine, state.blkIndent, true);
     return true;

package/dist/internal/parse/html/index.d.ts

@@ -1,4 +1,5 @@
 import type { ComarkNode } from 'comark';
+export declare const VOID_ELEMENTS: Set<string>;
 interface HtmlTagInfo {
     tag: string;
     attrs: Record<string, unknown>;

package/dist/internal/parse/html/index.js

@@ -1,5 +1,5 @@
 import { Parser } from 'htmlparser2';
-const VOID_ELEMENTS = new Set([
+export const VOID_ELEMENTS = new Set([
     'area',
     'base',
     'br',

package/dist/internal/parse/token-processor.js

@@ -1,4 +1,6 @@
 import { htmlToComarkNodes, parseInlineHtmlTag } from "./html/index.js";
+// `::tag` components that should fold into a single same-tagged child.
+const WRAPPER_TAGS = new Set(['ul', 'ol', 'table', 'blockquote', 'pre']);
 // Mapping from token types to tag names
 const BLOCK_TAG_MAP = {
     blockquote_open: 'blockquote',
@@ -17,7 +19,8 @@ const INLINE_TAG_MAP = {
     strong_open: 'strong',
     em_open: 'em',
     s_open: 'del',
-    sub_open: 'del',
+    sub_open: 'sub',
+    sup_open: 'sup',
 };
 // ─── main entry point ───────────────────────────────────────────────────────
 /**
@@ -33,6 +36,13 @@ export function marmdownItTokensToComarkTree(tokens, options = { startLine: 0, p
     let i = 0;
     let endLine = options.startLine;
     while (i < tokens.length) {
+        const token = tokens[i];
+        if (token.type === 'html_block') {
+            const result = processHtmlBlockTokens(tokens, i);
+            nodes.push(...result.nodes);
+            i = result.nextIndex;
+            continue;
+        }
         const result = processBlockToken(tokens, i, false, state);
         if (result.node) {
             if (options.preservePositions) {
@@ -54,6 +64,15 @@ export function marmdownItTokensToComarkTree(tokens, options = { startLine: 0, p
     }
     return nodes;
 }
+/**
+ * Convert an html_block token into Comark nodes. The whole HTML payload is
+ * parsed once by htmlparser2; text inside is preserved verbatim (no markdown
+ * re-parsing — CommonMark default).
+ */
+function processHtmlBlockTokens(tokens, startIndex) {
+    const content = typeof tokens[startIndex]?.content === 'string' ? tokens[startIndex].content : '';
+    return { nodes: htmlToComarkNodes(content), nextIndex: startIndex + 1 };
+}
 /**
  * Extract and process attributes from a token's attrs array
  */
@@ -72,11 +91,7 @@ function processAttributes(attrsArray, options = {}) {
                 continue;
             }
             // Handle boolean attributes: {bool} -> {":bool": "true"}
-            if (handleBoolean &&
-                !key.startsWith(':') &&
-                !key.startsWith('#') &&
-                !key.startsWith('.') &&
-                (!value || value === 'true' || value === '')) {
+            if (handleBoolean && !key.startsWith(':') && !key.startsWith('#') && !key.startsWith('.') && value === 'true') {
                 attrs[`:${key}`] = 'true';
                 continue;
             }
@@ -222,22 +237,12 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false, stat
     if (token.type === 'hr') {
         return { node: ['hr', {}], nextIndex: startIndex + 1 };
     }
-    // html_block is now handled upstream (in marmdownItTokensToComarkTree /
+    // html_block is normally handled upstream (in marmdownItTokensToComarkTree /
     // processBlockChildren / processBlockChildrenWithSlots) before reaching here.
-    // This branch is kept as a safety fallback.
+    // Safety fallback when it slips through.
     if (token.type === 'html_block') {
-        const content = token.content?.trim() || '';
-        if (content.startsWith('<!--')) {
-            const inner = content.endsWith('-->') ? content.slice(4, -3) : content.slice(4);
-            return { node: [null, {}, inner], nextIndex: startIndex + 1 };
-        }
-        const children = processBlockChildren(tokens, startIndex + 1, 'html_block_close', false, false, false, state);
-        const [node1] = htmlToComarkNodes(content);
-        if (!node1) {
-            return { node: null, nextIndex: startIndex + 1 };
-        }
-        const node = [node1[0], node1[1], ...children.nodes];
-        return { node, nextIndex: children.nextIndex + 1 };
+        const result = processHtmlBlockTokens(tokens, startIndex);
+        return { node: result.nodes[0] ?? null, nextIndex: result.nextIndex };
     }
     // Handle Comark block components (e.g., ::component ... ::)
     if (token.type === 'mdc_block_open') {
@@ -245,6 +250,20 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false, stat
         const attrs = processAttributes(token.attrs);
         // Process children until mdc_block_close, handling slots (#slotname)
         const children = processBlockChildrenWithSlots(tokens, startIndex + 1, 'mdc_block_close', state);
+        // `::ul`/`::ol`/`::table`/`::blockquote`/`::pre` wrapping a single same-tag
+        // child collapses into a single element with the wrapper's attrs (outer wins).
+        if (WRAPPER_TAGS.has(componentName) &&
+            children.nodes.length === 1 &&
+            Array.isArray(children.nodes[0]) &&
+            children.nodes[0][0] === componentName) {
+            const inner = children.nodes[0];
+            const innerAttrs = inner[1];
+            const innerChildren = inner.slice(2);
+            return {
+                node: [componentName, { ...innerAttrs, ...attrs }, ...innerChildren],
+                nextIndex: children.nextIndex + 1,
+            };
+        }
         // Return the component even if it has no children (empty component like ::component\n::)
         return { node: [componentName, attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
     }
@@ -311,15 +330,17 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false, stat
     if (token.type === 'heading_open') {
         const level = Number.parseInt(token.tag.replace('h', ''), 10);
         const headingTag = `h${level}`;
+        const userAttrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false });
         // Process heading children with inHeading flag for Comark component handling
         const children = processBlockChildren(tokens, startIndex + 1, 'heading_close', true, true, insideNestedContext, state);
         if (children.nodes.length > 0) {
             // Always generate ID for all headings, no exceptions
             const textContent = extractTextContent(children.nodes);
             const headingId = uniqueSlug(slugify(textContent), level, state);
-            // Always attach ID to the heading element itself
+            // Merge user-supplied attrs with the auto-generated id; user `id` wins.
+            const attrs = { id: headingId, ...userAttrs };
             return {
-                node: [headingTag, { id: headingId }, ...children.nodes],
+                node: [headingTag, attrs, ...children.nodes],
                 nextIndex: children.nextIndex + 1,
             };
         }
@@ -351,25 +372,26 @@ function processBlockChildrenWithSlots(tokens, startIndex, closeType, state) {
     const nodes = [];
     let i = startIndex;
     let currentSlotName = null;
+    let currentSlotAttrs = {};
     let currentSlotChildren = [];
     while (i < tokens.length && tokens[i].type !== closeType) {
         const token = tokens[i];
         // html_block can produce multiple nodes — handle before processBlockToken
         if (token.type === 'html_block') {
-            const htmlNodes = htmlToComarkNodes(token.content);
+            const result = processHtmlBlockTokens(tokens, i);
             if (currentSlotName !== null) {
-                currentSlotChildren.push(...htmlNodes);
+                currentSlotChildren.push(...result.nodes);
             }
             else {
-                nodes.push(...htmlNodes);
+                nodes.push(...result.nodes);
             }
-            i++;
+            i = result.nextIndex;
             continue;
         }
         // Check for slot marker: #slotname creates mdc_block_slot tokens
         if (token.type === 'mdc_block_slot') {
             // Extract slot name from token.attrs
-            // The attrs array contains [["#slotname", ""]] for open, and null/empty for close
+            // The attrs array contains [["#slotname", ""], ...props] for open, and null/empty for close
             if (token.attrs && Array.isArray(token.attrs) && token.attrs.length > 0) {
                 const firstAttr = token.attrs[0];
                 if (Array.isArray(firstAttr) && firstAttr.length > 0) {
@@ -377,12 +399,21 @@ function processBlockChildrenWithSlots(tokens, startIndex, closeType, state) {
                     // Remove the # prefix to get the slot name
                     if (slotKey.startsWith('#')) {
                         const slotName = slotKey.substring(1);
+                        const slotAttrs = processAttributes(token.attrs.slice(1));
                         // Save previous slot if any
                         if (currentSlotName !== null && currentSlotChildren.length > 0) {
-                            nodes.push(['template', { name: currentSlotName }, ...currentSlotChildren]);
+                            nodes.push([
+                                'template',
+                                {
+                                    name: currentSlotName,
+                                    ...currentSlotAttrs,
+                                },
+                                ...currentSlotChildren,
+                            ]);
                             currentSlotChildren = [];
                         }
                         currentSlotName = slotName;
+                        currentSlotAttrs = slotAttrs;
                         i++;
                         continue;
                     }
@@ -409,7 +440,14 @@ function processBlockChildrenWithSlots(tokens, startIndex, closeType, state) {
     }
     // Save last slot if any
     if (currentSlotName !== null && currentSlotChildren.length > 0) {
-        nodes.push(['template', { name: currentSlotName }, ...currentSlotChildren]);
+        nodes.push([
+            'template',
+            {
+                name: currentSlotName,
+                ...currentSlotAttrs,
+            },
+            ...currentSlotChildren,
+        ]);
     }
     return { nodes, nextIndex: i };
 }
@@ -418,10 +456,10 @@ function processBlockChildren(tokens, startIndex, closeType, inlineOnly, inHeadi
     let i = startIndex;
     while (i < tokens.length && tokens[i].type !== closeType) {
         const token = tokens[i];
-        // html_block can produce multiple nodes — handle before processBlockToken
         if (token.type === 'html_block') {
-            nodes.push(...htmlToComarkNodes(token.content));
-            i++;
+            const result = processHtmlBlockTokens(tokens, i);
+            nodes.push(...result.nodes);
+            i = result.nextIndex;
             continue;
         }
         if (token.type === 'inline') {

package/dist/internal/stringify/attributes.d.ts

@@ -34,6 +34,13 @@ export declare function resolveAttributes(attrs: Record<string, unknown>, render
  * binding doesn't resolve.
  */
 export declare function resolveAttribute(attrs: Record<string, unknown>, renderData: NodeRenderData, key: string): unknown;
+/**
+ * Filter implicit/auto-generated attrs that are encoded by the native
+ * markdown syntax and shouldn't echo back as `{attr=...}`. Used by the
+ * block stringifiers to decide whether a node has *user* attrs that must
+ * be preserved via the `::tag{...}` wrapper form.
+ */
+export declare function userBlockAttrs(tag: string, attributes: Record<string, unknown>): Record<string, unknown>;
 /**
  * Convert attributes to a string of Comark attributes
  *

package/dist/internal/stringify/attributes.js

@@ -67,6 +67,58 @@ export function resolveAttribute(attrs, renderData, key) {
     }
     return attrs[key];
 }
+// Implicit attributes the parser injects per tag — they're conveyed by the
+// native markdown syntax (e.g. `as` becomes `> [!NOTE]`, `task-list-item`
+// is implicit in `- [ ]`) so they should not echo back as user attrs.
+const IMPLICIT_ATTRS = {
+    blockquote: { drop: ['as'] },
+    ul: { classBlocklist: ['contains-task-list'] },
+    li: { classBlocklist: ['task-list-item'] },
+    // `language`/`filename`/`highlights`/`meta` ride on the fence info string.
+    // `tabindex`/`style` come from render-time plugins (e.g. shiki) and have no
+    // markdown form. `class` is handled specially in userBlockAttrs because shiki
+    // merges its injected classes with the user's class — we need to strip just
+    // the highlighter portion.
+    pre: { drop: ['language', 'filename', 'highlights', 'meta', 'tabindex', 'style'] },
+};
+/**
+ * Filter implicit/auto-generated attrs that are encoded by the native
+ * markdown syntax and shouldn't echo back as `{attr=...}`. Used by the
+ * block stringifiers to decide whether a node has *user* attrs that must
+ * be preserved via the `::tag{...}` wrapper form.
+ */
+export function userBlockAttrs(tag, attributes) {
+    const rule = IMPLICIT_ATTRS[tag];
+    if (!rule)
+        return { ...attributes };
+    const result = {};
+    for (const [key, value] of Object.entries(attributes)) {
+        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))
+                .join(' ');
+            if (remaining)
+                result[key] = remaining;
+            continue;
+        }
+        if (key === 'class' && tag === 'pre' && typeof value === 'string' && value.startsWith('shiki ')) {
+            // Shiki injects `shiki [shiki-themes] <themes…> dark:<theme>` and any
+            // user-supplied class is appended after it. Recover the user portion by
+            // dropping everything up to and including the first `dark:*` token.
+            const tokens = value.split(/\s+/);
+            let cutoff = tokens.findIndex((t) => t === '.');
+            const userClass = cutoff >= 0 ? tokens.slice(cutoff + 1).join(' ') : '';
+            if (userClass)
+                result[key] = userClass;
+            continue;
+        }
+        result[key] = value;
+    }
+    return result;
+}
 /**
  * Convert attributes to a string of Comark attributes
  *

package/dist/internal/stringify/handlers/blockquote.js

@@ -1,9 +1,26 @@
+import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 export async function blockquote(node, state) {
     const children = node.slice(2);
     let childResult = '';
     for (const child of children) {
         childResult += await state.one(child, state, node);
     }
+    const userAttrs = userBlockAttrs('blockquote', node[1]);
+    const attrs = comarkAttributes(userAttrs);
+    const hasBlockChildren = children.some((c) => Array.isArray(c));
+    // Multi-block content with attrs has no unambiguous inline form — round-trip
+    // via `::blockquote{attrs}` so the attrs aren't visually attached to one
+    // paragraph and parsers can recover the same AST.
+    if (attrs && hasBlockChildren) {
+        const content = childResult
+            .trim()
+            .split('\n')
+            .map((line) => (line ? `> ${line}` : '>'))
+            .join('\n');
+        return `::blockquote${attrs}\n${content}\n::` + state.context.blockSeparator;
+    }
+    if (attrs)
+        childResult = `${childResult.replace(/[ \t]+$/, '')} ${attrs}`;
     const content = childResult
         .trim()
         .split('\n')

package/dist/internal/stringify/handlers/heading.js

@@ -1,7 +1,12 @@
+import { comarkAttributes } from "../attributes.js";
 // h1, h2, h3, h4, h5, h6
 export async function heading(node, state) {
     const [tag] = node;
     const level = Number(tag.slice(1));
     const content = await state.flow(node, state);
-    return '#'.repeat(level) + ' ' + content + state.context.blockSeparator;
+    // The auto-generated id is implicit in `# Heading` markdown — don't echo it.
+    const { id: _id, ...rest } = node[1];
+    const attrs = comarkAttributes(rest);
+    const suffix = attrs ? ` ${attrs}` : '';
+    return '#'.repeat(level) + ' ' + content + suffix + state.context.blockSeparator;
 }

package/dist/internal/stringify/handlers/html.js

@@ -82,12 +82,18 @@ export async function html(node, state, parent) {
         return `<${tag}${attrs} />` + (!parent && !isInline ? state.context.blockSeparator : '');
     }
     if (!oneLiner && content) {
-        content = '\n' + paddNoneHtmlContent(content, state).trimEnd() + '\n';
+        content = '\n' + paddNoneHtmlContent(content, state, String(tag)).trimEnd() + '\n';
     }
     return `<${tag}${attrs}>${content}</${tag}>` + (!parent && !isInline ? state.context.blockSeparator : '');
 }
-function paddNoneHtmlContent(content, state) {
+// Literal-content tags whose body must be rendered verbatim (no indentation
+// re-flow). Matches the parser-side set so `<style>` / `<script>` etc. stay
+// flush-left in the output, the way they were authored.
+const LITERAL_CONTENT_TAGS = new Set(['code', 'kbd', 'pre', 'samp', 'script', 'style', 'textarea', 'var']);
+function paddNoneHtmlContent(content, state, tag) {
     if (state.context.html) {
+        if (LITERAL_CONTENT_TAGS.has(tag.toLowerCase()))
+            return content;
         return indent(content);
     }
     return (content.trim().startsWith('<') ? '' : '') + content + (content.trim().endsWith('>') ? '' : '');

package/dist/internal/stringify/handlers/li.js

@@ -1,4 +1,5 @@
 import { indent } from "../../../utils/index.js";
+import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 // Block elements that need explicit indentation in list items.
 // Note: ol/ul are handled by their own handlers which manage indentation via listIndent context.
 const blockElements = new Set(['pre', 'blockquote', 'table']);
@@ -34,13 +35,15 @@ export async function li(node, state) {
         result += rendered;
     }
     result = result.trim();
+    const attrs = comarkAttributes(userBlockAttrs('li', node[1]));
+    const suffix = attrs ? ` ${attrs}` : '';
     if (!order) {
         result = escapeLeadingNumberDot(result);
     }
     if (order) {
         state.applyContext({ order: order + 1 });
     }
-    return `${prefix}${result}\n`;
+    return `${prefix}${result}${suffix}\n`;
 }
 function escapeLeadingNumberDot(str) {
     if (str.length === 0)

package/dist/internal/stringify/handlers/mdc.js

@@ -5,7 +5,7 @@ import { html } from "./html.js";
 const INLINE_HTML_ELEMENTS = new Set(['a', 'strong', 'em', 'span']);
 export async function mdc(node, state, parent) {
     const [tag, attr, ...children] = node;
-    const { $, ...attributes } = attr;
+    const { $: _, ...attributes } = attr;
     if (tag === 'table') {
         return html(node, state);
     }

package/dist/internal/stringify/handlers/ol.js

@@ -1,4 +1,5 @@
 import { indent } from "../../../utils/index.js";
+import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 export async function ol(node, state) {
     const children = node.slice(2);
     const revert = state.applyContext({ list: true, order: 1, listIndent: 3 });
@@ -7,12 +8,21 @@ export async function ol(node, state) {
         result += await state.one(child, state);
     }
     result = result.trim();
+    state.applyContext(revert);
+    // ol with user attrs round-trips via `::ol{attrs}\n1. …\n::` — the native
+    // markdown list syntax has no slot for list-level attrs.
+    const attrs = comarkAttributes(userBlockAttrs('ol', node[1]));
+    if (attrs) {
+        if (revert.list) {
+            return '\n' + indent(`::ol${attrs}\n${result}\n::`, { width: revert.listIndent || 2 });
+        }
+        return `::ol${attrs}\n${result}\n::` + state.context.blockSeparator;
+    }
     if (revert.list) {
         result = '\n' + indent(result, { width: revert.listIndent || 2 });
     }
     else {
         result = result + state.context.blockSeparator;
     }
-    state.applyContext(revert);
     return result;
 }

package/dist/internal/stringify/handlers/p.js

@@ -1,9 +1,13 @@
+import { comarkAttributes } from "../attributes.js";
 export async function p(node, state, parent) {
     const children = node.slice(2);
     let result = '';
     for (const child of children) {
         result += await state.one(child, state, node);
     }
+    const attrs = comarkAttributes(node[1]);
+    if (attrs)
+        result = `${result.replace(/[ \t]+$/, '')} ${attrs}`;
     if (parent?.[0] === 'li') {
         return result;
     }

package/dist/internal/stringify/handlers/pre.js

@@ -1,4 +1,5 @@
 import { textContent } from "../../../utils/index.js";
+import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 export function pre(node, state) {
     const [_, attributes, ...children] = node;
     const codeClasses = children[0]?.[1]?.class;
@@ -13,8 +14,16 @@ export function pre(node, state) {
     const highlights = attributes.highlights ? ' {' + formatHighlights(attributes.highlights) + '}' : '';
     // Meta always has a leading space
     const meta = attributes.meta ? ' ' + attributes.meta : '';
-    const result = '```' + language + filename + highlights + meta + '\n' + String(node[1]?.code || textContent(node)).trim() + '\n```';
-    return result + state.context.blockSeparator;
+    const code = String(node[1]?.code || textContent(node)).trim();
+    const fence = code.includes('```') ? '~~~' : '```';
+    const fenceBlock = fence + language + filename + highlights + meta + '\n' + code + '\n' + fence;
+    // Extra user attrs that can't ride on the fence info string round-trip via
+    // `::pre{attrs}\n```…```\n::` — mirrors the wrapper form for ul/ol/table/blockquote.
+    const attrs = comarkAttributes(userBlockAttrs('pre', attributes));
+    if (attrs) {
+        return `::pre${attrs}\n${fenceBlock}\n::` + state.context.blockSeparator;
+    }
+    return fenceBlock + state.context.blockSeparator;
 }
 function formatHighlights(highlights) {
     if (highlights.length === 0)

package/dist/internal/stringify/handlers/table.js

@@ -1,3 +1,4 @@
+import { comarkAttributes, userBlockAttrs } from "../attributes.js";
 // Helper function to extract alignment from style attribute
 function getAlignment(attributes) {
     const style = attributes.style;
@@ -158,6 +159,12 @@ export async function table(node, state) {
         result += '| ' + cellContents.join(' | ') + ' |\n';
     }
     // result already ends with \n, so we only need to add one more \n
+    // table with user attrs round-trips via `::table{attrs}\n<table>\n::` —
+    // GFM table syntax has no slot for table-level attrs.
+    const attrs = comarkAttributes(userBlockAttrs('table', node[1]));
+    if (attrs) {
+        return `::table${attrs}\n${result.trimEnd()}\n::\n\n`;
+    }
     return result + '\n';
 }
 export function thead(_node, _state) {