User Rating 0.0 ★★★★★

Total Usage 0 times

Category HTML/XML Utilities

Markdown Source Supports headings, lists, tables, code blocks, links, images, and more.

Base HTML Document The HTML document where converted Markdown will be injected.

Injection Points

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Injecting converted Markdown into an existing HTML document at precise locations requires parsing two separate syntaxes and resolving CSS selectors against a live DOM tree. Getting the insertion position wrong means content renders outside its semantic container, breaking layout cascades and accessibility landmarks. This tool parses your Markdown through a multi-pass regex engine covering headings, lists, tables, code blocks, and inline formatting, then uses DOMParser to build a virtual document from your base HTML. Each injection point targets elements via standard CSS selectors (selector) and a positional keyword (beforebegin, afterbegin, beforeend, afterend), matching the insertAdjacentHTML specification. Multiple injection points execute sequentially, allowing batch content placement in a single operation. The tool approximates browser-native selector resolution. Selectors that depend on runtime state (e.g., :hover) or JavaScript-injected classes will not match in the virtual DOM context.

Formulas

The injection engine operates in a deterministic pipeline of 4 stages:

M → parse(M) → H_md

Where M is the raw Markdown input and H_md is the resulting HTML fragment. The parser applies regex transformations in priority order: fenced code blocks first (to protect content from further parsing), then block-level structures (headings, lists, blockquotes, tables, horizontal rules), and finally inline formatting (bold, italic, code, links, images).

D = DOMParser(H_base)

The base HTML string H_base is parsed into a virtual document D.

for each P_i ∈ {P₁, P₂, … P_n} : D(P_i.selector)[P_i.idx].insertAdjacentHTML(P_i.pos, H_md)

Each injection point P_i contains three parameters: selector (a CSS selector string), pos (one of beforebegin, afterbegin, beforeend, afterend), and idx (zero-based occurrence index, defaulting to 0 for the first match). The final serialized output is H_out = serialize(D).

Reference Data

Markdown Syntax	HTML Output	Notes
`# Heading`	`<h1>`	Levels 1 - 6 supported
`bold`	`<strong>`	Double asterisks or underscores
`italic`	`<em>`	Single asterisks or underscores
`~~strike~~`	`<del>`	Double tildes
`code`	`<code>`	Inline code span
```lang	`<pre><code>`	Fenced code block with optional language class
`> quote`	`<blockquote>`	Nested with multiple >
`- item`	`<ul><li>`	Also `*` or `+` prefixes
`1. item`	`<ol><li>`	Ordered list numbering
`- [x] task`	`<input type="checkbox">`	Checked or unchecked
`[text](url)`	`<a href>`	Inline link
`![alt](src)`	`<img>`	Image with alt text
`---`	`<hr>`	Three or more dashes, asterisks, or underscores
`\| A \| B \|`	`<table>`	Pipe-delimited table with alignment
Position: `beforebegin`	Before the element itself	Outside, preceding sibling
Position: `afterbegin`	First child of the element	Inside, prepended
Position: `beforeend`	Last child of the element	Inside, appended
Position: `afterend`	After the element itself	Outside, following sibling
Selector: `.class`	Class selector	Matches all by default; use occurrence index to narrow
Selector: `#id`	ID selector	Should match exactly 1 element
Selector: `tag`	Element selector	Matches all instances of that tag
Selector: `[attr]`	Attribute selector	Standard CSS attribute selectors supported
Selector: `div > p`	Child combinator	Direct child only
Selector: `div p`	Descendant combinator	Any depth descendant
Selector: `:first-child`	Pseudo-class	Structural pseudo-classes work in virtual DOM
Selector: `:nth-child(n)`	Pseudo-class	Functional pseudo-classes supported

Frequently Asked Questions

By default, injection targets the first matched element (occurrence index 0). You can specify a different occurrence index in each injection point to target the 2nd, 3rd, or nth match. If the index exceeds the number of matches, the tool reports a warning and skips that injection point.

Yes. Injection points execute sequentially from top to bottom. Each injection modifies the virtual DOM before the next point is evaluated. If two points use afterbegin on the same container, the second injection's content will appear before the first injection's content in the final output, because each prepend pushes previous content down. Reorder your injection points to control final placement.

This tool converts a single Markdown source and injects the same HTML fragment at all specified points. If you need different content at different locations, run the tool multiple times: first inject at point A, copy the output, use it as the new base HTML, then inject different Markdown at point B.

The virtual DOM created by DOMParser does not execute JavaScript or apply CSS. Selectors relying on dynamically added classes, computed styles, or pseudo-elements like ::before will not resolve. Stick to structural selectors: tag names, classes present in the raw HTML, IDs, attributes, and structural pseudo-classes like :nth-child().

Inline HTML within the Markdown input is passed through unchanged. This means you can include raw <div>, <span>, or other tags in your Markdown and they will appear in the converted output. However, unclosed tags or malformed HTML may produce unexpected results when inserted into the base document's DOM tree.

Processing happens entirely in-browser using DOMParser. Practical limits depend on the client machine's memory. Documents under 5 MB typically process in under 200 ms. Extremely large documents (above 10 MB) may cause noticeable delay. The tool displays a loading indicator during processing.