<h1>Markdig Playground</h1>
<p>Markdig is a <strong>fast</strong> and extensible Markdown processor for .NET.</p>
Markdig Playground
Markdig is a fast and extensible Markdown processor for .NET.
Blazing fast
Regex-free parser and HTML renderer with minimal GC pressure. 20% faster than the reference C implementation (cmark) and 100× faster than regex-based processors.
Tables, task lists, math, diagrams, footnotes, emoji, alert blocks, abbreviations, and more — all included out of the box. Enable them individually or all at once.
Full abstract syntax tree with precise source locations. Power syntax highlighters, editors, and document analysis tools with the complete Descendants API.
<script>
(function () {
"use strict";
var section = document.getElementById("playground");
if (!section) return;
var apiUrl = (section.getAttribute("data-api-url") || "").replace(/\/+$/, "");
var markdownEl = document.getElementById("playground-markdown");
var extensionsEl = document.getElementById("playground-extensions");
var runButton = document.getElementById("playground-run");
var statusEl = document.getElementById("playground-status");
var htmlEl = document.getElementById("playground-html");
var previewEl = document.getElementById("playground-preview");
var defaultMarkdown = [
"# Markdig Playground",
"",
"Markdig is a **fast** and extensible Markdown processor for .NET.",
"",
"- [x] Task list support",
"- [ ] Pipe table support",
"- [ ] Footnotes",
"",
"| Feature | Enabled |",
"| ------- | :-----: |",
"| CommonMark | ✅ |",
"| Extensions | ✅ |",
"",
"[^note]: Footnotes require an extension set that includes `footnotes`."
].join("\n");
if (!markdownEl.value) {
markdownEl.value = defaultMarkdown;
}
function setStatus(html, cssClass) {
statusEl.className = "small " + (cssClass || "text-secondary");
statusEl.innerHTML = html;
}
function setBusy(isBusy) {
runButton.disabled = isBusy;
runButton.classList.toggle("btn-secondary", isBusy);
runButton.classList.toggle("btn-primary", !isBusy);
}
function runPlayground() {
if (runButton.disabled) return;
setBusy(true);
setStatus(' Rendering…', "text-info");
htmlEl.textContent = "";
previewEl.innerHTML = "";
var query = new URLSearchParams({
text: markdownEl.value || "",
extension: extensionsEl.value || "advanced"
});
fetch(apiUrl + "/api/to_html?" + query.toString(), { method: "GET", mode: "cors" })
.then(function (response) {
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
})
.then(function (payload) {
var html = payload && typeof payload.html === "string" ? payload.html : "";
htmlEl.textContent = html;
if (html.toLowerCase().startsWith("exception:")) {
previewEl.textContent = html;
setStatus(' Rendering error', "text-danger");
return;
}
previewEl.innerHTML = html;
var version = payload && payload.version ? " (v" + payload.version + ")" : "";
setStatus(' Done' + version, "text-success");
})
.catch(function (error) {
htmlEl.textContent = "Request failed: " + error.message;
previewEl.textContent = "Unable to reach the Markdig playground service.";
setStatus(' Service unavailable or blocked by CORS', "text-danger");
})
.finally(function () {
setBusy(false);
});
}
if (!apiUrl) {
setStatus(' Playground API URL not configured.', "text-warning");
return;
}
setBusy(true);
fetch(apiUrl + "/api/to_html?text=health&extension=common", { method: "GET", mode: "cors" })
.then(function (response) {
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
})
.then(function (payload) {
var version = payload && payload.version ? " (v" + payload.version + ")" : "";
setStatus(' Service available' + version, "text-success");
setBusy(false);
})
.catch(function () {
setStatus(' Service unavailable or blocked by CORS', "text-danger");
htmlEl.textContent = "The current browser cannot access the remote API endpoint.";
previewEl.textContent = "Use the 'Open service' button to try the playground directly.";
});
runButton.addEventListener("click", runPlayground);
document.addEventListener("keydown", function (event) {
if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
event.preventDefault();
runPlayground();
}
});
})();
</script>
Quick example
usingMarkdig;// Simple CommonMark conversionvarresult=Markdown.ToHtml("This is a text with some *emphasis*");// => "<p>This is a text with some <em>emphasis</em></p>\n"// Enable all advanced extensionsvarpipeline=newMarkdownPipelineBuilder().UseAdvancedExtensions().Build();varresult=Markdown.ToHtml("This is a ~~strikethrough~~",pipeline);// => "<p>This is a <del>strikethrough</del></p>\n"
