ada-markdown-html-rendering

Diagnose and fix Markdown-to-HTML rendering bugs in Markdig and HtmlSanitizer pipelines.

Updated Jul 23, 2026
One-click install
npx skills add https://github.com/wubing7755/Ada --skill ada-markdown-html-rendering-wubing7755
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ada-markdown-html-rendering
Source: https://github.com/wubing7755/Ada/tree/main/skills/software-development/ada-markdown-html-rendering
Command: npx skills add https://github.com/wubing7755/Ada --skill ada-markdown-html-rendering-wubing7755

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Rendering imported or user-written Markdown to safe HTML silently loses data: images wrapped in non-whitelisted tags disappear, ordered lists restart at 1, segmented numbering gets renumbered, and in-page anchor links jump to the homepage. These bugs only appear with real-world content like blog exports and pasted HTML, not clean test Markdown. ## Core Features & Use Cases - Sanitizer subtree-loss diagnosis: Explains why HtmlSanitizer drops entire subtrees of disallowed wrapper tags (e.g. <div> containing <img>) and how to fix the AllowedTags whitelist. - Ordered-list numbering repair: Provides pre-processing (indenting code blocks between list items) and post-processing (<ol start="N"> / <li value="N">) techniques to preserve source numbering. - Blazor WASM anchor navigation fix: Implements a capture-phase click handler loaded before blazor.webassembly.js so in-page #anchor links scroll instead of navigating home. - Use Case: A blog export with 40 images renders with zero images and lists showing 1. 1. 1.; this Skill walks you through reproducing with the real document, fixing the whitelist and list pipeline, and re-rendering stored content. ## Quick Start Ask the agent to diagnose why images are missing and ordered lists restart at 1 after rendering imported Markdown through Markdig and HtmlSanitizer.

Frequently Asked Questions about ada-markdown-html-rendering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why do images disappear after rendering Markdown with HtmlSanitizer?

HtmlSanitizer drops tags not on AllowedTags along with their entire subtree, so an img inside a disallowed div wrapper vanishes even though img itself is whitelisted. Add the wrapper tags like div, figure, and figcaption to AllowedTags so only attributes are stripped.

How do I fix ordered lists showing 1. 1. 1. in rendered Markdown?

Blocks like fenced code or divs between list items split the list into separate ol elements that each restart at 1. Indent intervening code blocks by 4 spaces before rendering, then post-process the sanitized HTML with ol start and li value attributes to restore source numbers.

Why do in-page anchor links navigate to the homepage in Blazor WASM?

Three causes combine: the sanitizer strips id attributes from headings, Blazor intercepts hash-link clicks as internal routes, and replaceState resolves against the base href. Keep id in AllowedAttributes and load a capture-phase click handler before blazor.webassembly.js.

Does Markdig preserve source numbering for segmented lists?

No. Markdig treats list numbers as formatting, merges adjacent items into one ol, and renumbers from 1, so segmented numbering like 1. 2. 1. 2. becomes 1. 2. 3. 4. Collect source numbers while scanning and restore them via post-processing after sanitization.

When should I use markdown-it with DOMPurify instead of Markdig?

Use markdown-it plus DOMPurify for client-side display rendering, since markdown-it natively emits ol start attributes and DOMPurify allows div and img by default. Retain backend Markdig only for build-time tasks like sanitizing fetched HTML and extracting plaintext excerpts.