comark 0.3.1 → 0.4.0

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,17 +36,23 @@ 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) {
                 for (let j = i; j < result.nextIndex; j++) {
                     if (tokens[j].map && tokens[j].map[1]) {
-                        endLine = tokens[j].map[1]
-                            + options.startLine
-                            + (tokens[j].type?.endsWith('_close') ? 1 : 0);
+                        endLine = tokens[j].map[1] + options.startLine + (tokens[j].type?.endsWith('_close') ? 1 : 0);
                     }
                 }
                 if (!result.node[1].$) {
+                    ;
                     result.node[1].$ = {};
                 }
                 ;
@@ -55,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
  */
@@ -73,7 +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;
             }
@@ -140,7 +158,7 @@ function parseCodeblockInfo(info) {
                     const trimmed = part.trim();
                     if (trimmed.includes('-')) {
                         // Range like "1-3"
-                        const [start, end] = trimmed.split('-').map(s => Number.parseInt(s.trim(), 10));
+                        const [start, end] = trimmed.split('-').map((s) => Number.parseInt(s.trim(), 10));
                         if (!Number.isNaN(start) && !Number.isNaN(end)) {
                             for (let i = start; i <= end; i++) {
                                 highlights.push(i);
@@ -219,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') {
@@ -242,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 };
     }
@@ -271,7 +293,10 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false, stat
         return { node: [componentName, attrs, ...children], nextIndex: nextIndex };
     }
     if (token.type === 'math_block') {
-        return { node: ['math', { class: 'math block', content: token.content }, token.content], nextIndex: startIndex + 1 };
+        return {
+            node: ['math', { class: 'math block', content: token.content }, token.content],
+            nextIndex: startIndex + 1,
+        };
     }
     if (token.type === 'fence' || token.type === 'fenced_code_block' || token.type === 'code_block') {
         const content = token.content || '';
@@ -305,14 +330,19 @@ 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
-            return { node: [headingTag, { id: headingId }, ...children.nodes], nextIndex: children.nextIndex + 1 };
+            // Merge user-supplied attrs with the auto-generated id; user `id` wins.
+            const attrs = { id: headingId, ...userAttrs };
+            return {
+                node: [headingTag, attrs, ...children.nodes],
+                nextIndex: children.nextIndex + 1,
+            };
         }
         return { node: null, nextIndex: children.nextIndex + 1 };
     }
@@ -320,19 +350,8 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false, stat
     if (token.type === 'list_item_open') {
         const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false });
         const children = processBlockChildren(tokens, startIndex + 1, 'list_item_close', false, false, true, state);
-        // Unwrap paragraphs in list items
-        const unwrapped = [];
-        for (const child of children.nodes) {
-            if (Array.isArray(child) && child[0] === 'p') {
-                // Unwrap paragraph, add its children directly
-                unwrapped.push(...child.slice(2));
-            }
-            else {
-                unwrapped.push(child);
-            }
-        }
-        if (unwrapped.length > 0) {
-            return { node: ['li', attrs, ...unwrapped], nextIndex: children.nextIndex + 1 };
+        if (children.nodes.length > 0) {
+            return { node: ['li', attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
         }
         return { node: null, nextIndex: children.nextIndex + 1 };
     }
@@ -353,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) {
@@ -379,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;
                     }
@@ -411,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 };
 }
@@ -420,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') {
@@ -615,7 +651,7 @@ function processInlineToken(tokens, startIndex, inHeading = false) {
         return { node, nextIndex: j };
     }
     // Handle Comark inline span (e.g., [text]{attr})
-    // @comark/markdown-it creates mdc_inline_span tokens, and props appear AFTER the close token
+    // The syntax plugin emits mdc_inline_span tokens, and props appear AFTER the close token
     if (token.type === 'mdc_inline_span' && token.nesting === 1) {
         const attrs = {};
         let i = startIndex + 1;
@@ -698,11 +734,11 @@ function processInlineToken(tokens, startIndex, inHeading = false) {
         else {
             // Self-closing component (nesting === 0)
             const attrs = {};
-            // @comark/markdown-it stores attributes in a separate mdc_inline_props token
+            // The syntax plugin stores attributes in a separate mdc_inline_props token
             // that appears right after the component token
             const { attrs: componentAttrs, nextIndex: propsNextIndex } = extractAttributes(tokens, startIndex + 1, false);
             Object.assign(attrs, componentAttrs);
-            // Extract attributes from token.attrs (fallback, though @comark/markdown-it uses mdc_inline_props)
+            // Extract attributes from token.attrs (fallback, though the syntax plugin uses mdc_inline_props)
             const fallbackAttrs = processAttributes(token.attrs, { handleBoolean: false });
             Object.assign(attrs, fallbackAttrs);
             // Return the component without any text children
@@ -734,7 +770,10 @@ function processInlineToken(tokens, startIndex, inHeading = false) {
         return { node: null, nextIndex };
     }
     if (token.type === 'math_inline') {
-        return { node: ['math', { class: 'math inline', content: token.content }, token.content], nextIndex: startIndex + 1 };
+        return {
+            node: ['math', { class: 'math inline', content: token.content }, token.content],
+            nextIndex: startIndex + 1,
+        };
     }
     // Handle generic inline open/close pairs
     const tagName = INLINE_TAG_MAP[token.type];

package/dist/internal/props-validation.js

@@ -1,10 +1,5 @@
-export const unsafeTags = [
-    'object',
-];
-export const unsafeAttributes = [
-    'srcdoc',
-    'formaction',
-];
+export const unsafeTags = ['object'];
+export const unsafeAttributes = ['srcdoc', 'formaction'];
 export const unsafeLinkPrefix = [
     'javascript:',
     'data:text/html',
@@ -44,7 +39,7 @@ function validateUrl(value, mode, options) {
         return value;
     }
     // Block known-unsafe protocols — hard floor, not overrideable by options
-    if (unsafeLinkPrefix.some(prefix => url.href.toLowerCase().startsWith(prefix))) {
+    if (unsafeLinkPrefix.some((prefix) => url.href.toLowerCase().startsWith(prefix))) {
         return false;
     }
     // Block data: images when allowDataImages is false
@@ -62,7 +57,7 @@ function validateUrl(value, mode, options) {
     const allowedPrefixes = mode === 'link' ? allowedLinkPrefixes : allowedImagePrefixes;
     if (!allowedPrefixes.includes('*')) {
         const href = url.href.toLowerCase();
-        const matchesPrefix = allowedPrefixes.some(prefix => href.startsWith(prefix.toLowerCase()));
+        const matchesPrefix = allowedPrefixes.some((prefix) => href.startsWith(prefix.toLowerCase()));
         if (!matchesPrefix) {
             if (defaultOrigin) {
                 return rewriteToDefaultOrigin(urlSanitized, defaultOrigin);

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
  *
@@ -83,7 +135,10 @@ export function comarkAttributes(attributes) {
             return `#${value}`;
         }
         if (key === 'class') {
-            return value.split(' ').map(c => `.${c}`).join('');
+            return value
+                .split(' ')
+                .map((c) => `.${c}`)
+                .join('');
         }
         if (typeof value === 'object') {
             return `${key}="${JSON.stringify(value).replace(/"/g, '\\"')}"`;

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

@@ -3,9 +3,7 @@ import { comarkAttributes } from "../attributes.js";
 export async function a(node, state) {
     const [_, attrs] = node;
     const { href, ...rest } = attrs;
-    const attrsString = Object.keys(rest).length > 0
-        ? comarkAttributes(rest)
-        : '';
+    const attrsString = Object.keys(rest).length > 0 ? comarkAttributes(rest) : '';
     const content = await state.flow(node, state);
     if (content === href && !attrsString) {
         return `<${href}>`;

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

@@ -1,18 +1,33 @@
+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')
-        .map(line => line ? `> ${line}` : '>')
+        .map((line) => (line ? `> ${line}` : '>'))
         .join('\n');
     if (node[1].as) {
-        return `> [!${String(node[1].as).toUpperCase()}]\n`
-            + content
-            + state.context.blockSeparator;
+        return `> [!${String(node[1].as).toUpperCase()}]\n` + content + state.context.blockSeparator;
     }
     return content + state.context.blockSeparator;
 }

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

@@ -2,9 +2,7 @@ import { comarkAttributes } from "../attributes.js";
 import { textContent } from "../../../utils/index.js";
 export function code(node, _state) {
     const [_, attrs] = node;
-    const attrsString = Object.keys(attrs).length > 0
-        ? comarkAttributes(attrs)
-        : '';
+    const attrsString = Object.keys(attrs).length > 0 ? comarkAttributes(attrs) : '';
     const content = textContent(node);
     const fence = content.includes('`') ? '``' : '`';
     return `${fence}${content}${fence}${attrsString}`;

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

@@ -6,8 +6,6 @@ export async function emphesis(node, state) {
         content += await state.one(child, state, node);
     }
     content = content.trim();
-    const attrsString = Object.keys(attrs).length > 0
-        ? comarkAttributes(attrs)
-        : '';
+    const attrsString = Object.keys(attrs).length > 0 ? comarkAttributes(attrs) : '';
     return `*${content}*${attrsString}`;
 }

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

@@ -1,9 +1,25 @@
 import { htmlAttributes } from "../attributes.js";
-import { indent } from "../indent.js";
+import { indent } from "../../../utils/index.js";
 const textBlocks = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'td', 'th']);
 const selfCloseTags = new Set(['br', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
 const inlineTags = new Set(['strong', 'em', 'code', 'a', 'br', 'span', 'img']);
-const blockTags = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'ul', 'ol', 'blockquote', 'hr', 'table', 'td', 'th']);
+const blockTags = new Set([
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'li',
+    'ul',
+    'ol',
+    'blockquote',
+    'hr',
+    'table',
+    'td',
+    'th',
+]);
 export async function html(node, state, parent) {
     const [tag, attr, ...children] = node;
     const { $ = {}, ...rawAttributes } = attr;
@@ -15,11 +31,9 @@ export async function html(node, state, parent) {
     // back to the raw (empty) attrs to avoid leaking parent props onto native
     // wrappers like `<p>` or `<ul>`.
     const rawHasAttrs = Object.keys(rawAttributes).length > 0;
-    const attributes = state.context.html
-        ? (rawHasAttrs ? state.renderData.props : rawAttributes)
-        : rawAttributes;
-    const hasOnlyTextChildren = children.every(child => typeof child === 'string' || inlineTags.has(String(child?.[0])));
-    const hasTextSibling = children.some(child => typeof child === 'string');
+    const attributes = state.context.html ? (rawHasAttrs ? state.renderData.props : rawAttributes) : rawAttributes;
+    const hasOnlyTextChildren = children.every((child) => typeof child === 'string' || inlineTags.has(String(child?.[0])));
+    const hasTextSibling = children.some((child) => typeof child === 'string');
     const isBlock = textBlocks.has(String(tag));
     const isInline = inlineTags.has(String(tag)) && $.block === 0;
     let oneLiner = isBlock && hasOnlyTextChildren;
@@ -48,7 +62,8 @@ export async function html(node, state, parent) {
     for (let i = 0; i < children.length; i++) {
         const childContent = childrenContent[i];
         const child = children[i];
-        const isBlock = typeof child !== 'string' && (blockTags.has(String(child?.[0])) || (!inlineTags.has(String(child?.[0])) && !hasTextSibling));
+        const isBlock = typeof child !== 'string' &&
+            (blockTags.has(String(child?.[0])) || (!inlineTags.has(String(child?.[0])) && !hasTextSibling));
         if (i > 0 && !isPrevBlock && isBlock) {
             content += state.context.blockSeparator;
         }
@@ -62,23 +77,24 @@ export async function html(node, state, parent) {
     if (revert) {
         state.applyContext(revert);
     }
-    const attrs = Object.keys(attributes).length > 0
-        ? ` ${htmlAttributes(attributes)}`
-        : '';
+    const attrs = Object.keys(attributes).length > 0 ? ` ${htmlAttributes(attributes)}` : '';
     if (isSelfClose) {
         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 : '');
+    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('>') ? '' : ''));
+    return (content.trim().startsWith('<') ? '' : '') + content + (content.trim().endsWith('>') ? '' : '');
 }

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

@@ -2,8 +2,6 @@ import { comarkAttributes } from "../attributes.js";
 export function img(node, _state) {
     const [_, attrs] = node;
     const { title, src, alt = '', ...rest } = attrs;
-    const attrsString = Object.keys(rest).length > 0
-        ? comarkAttributes(rest)
-        : '';
+    const attrsString = Object.keys(rest).length > 0 ? comarkAttributes(rest) : '';
     return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})${attrsString}`;
 }

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

@@ -1,4 +1,5 @@
-import { indent } from "../indent.js";
+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']);
@@ -18,23 +19,31 @@ export async function li(node, state) {
     let result = '';
     for (const child of children) {
         const rendered = await state.one(child, state, node);
-        if (Array.isArray(child) && blockElements.has(child[0])) {
-            // Block-level child: put on its own line and indent to align with list prefix
-            const indented = indent(rendered, { width: prefixWidth });
-            result = result.trimEnd() + '\n' + indented.trimEnd() + '\n';
-        }
-        else {
-            result += rendered;
+        if (result && Array.isArray(child)) {
+            if (blockElements.has(child[0])) {
+                // Block-level child: put on its own line and indent to align with list prefix
+                const indented = indent(rendered, { width: prefixWidth });
+                result = result.trimEnd() + '\n' + indented.trimEnd() + '\n';
+                continue;
+            }
+            if (child[0] === 'p') {
+                const indented = indent(rendered, { width: prefixWidth });
+                result = result.trimEnd() + '\n\n' + indented.trimEnd() + '\n';
+                continue;
+            }
         }
+        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)