Markdown Renderer
Reference usage of
MarkdownRenderer with a broad markdown sample, including 10-line and 100-line code blocks.Markdown Renderer Reference
This page showcases the renderer features used across the app: headings, emphasis, links, lists, tables, block quotes, inline code, fenced code blocks, and Mermaid diagrams.
Text Features
Regular paragraph text with bold, italic, strikethrough, and inline code.
- Bullet item one
- Bullet item two
- Nested bullet item
- Another nested bullet item
- Ordered item one
- Ordered item two
- Ordered item three
- Completed task
- Pending task
Blockquote example: markdown should stay readable with strong contrast and predictable spacing.
Link
Table
| Name | Type | Description |
|---|---|---|
id | number | Unique identifier |
title | string | Human-friendly label |
createdAt | string | ISO timestamp |
Code Block (10 LOC)
const row001 = { id: 1, label: "Item 1" };const row002 = { id: 2, label: "Item 2" };const row003 = { id: 3, label: "Item 3" };const row004 = { id: 4, label: "Item 4" };const row005 = { id: 5, label: "Item 5" };const row006 = { id: 6, label: "Item 6" };const row007 = { id: 7, label: "Item 7" };const row008 = { id: 8, label: "Item 8" };const row009 = { id: 9, label: "Item 9" };const row010 = { id: 10, label: "Item 10" };Code Block (100 LOC)
const row001 = { id: 1, label: "Item 1" };const row002 = { id: 2, label: "Item 2" };const row003 = { id: 3, label: "Item 3" };const row004 = { id: 4, label: "Item 4" };const row005 = { id: 5, label: "Item 5" };const row006 = { id: 6, label: "Item 6" };const row007 = { id: 7, label: "Item 7" };const row008 = { id: 8, label: "Item 8" };const row009 = { id: 9, label: "Item 9" };const row010 = { id: 10, label: "Item 10" };const row011 = { id: 11, label: "Item 11" };const row012 = { id: 12, label: "Item 12" };const row013 = { id: 13, label: "Item 13" };const row014 = { id: 14, label: "Item 14" };const row015 = { id: 15, label: "Item 15" };const row016 = { id: 16, label: "Item 16" };const row017 = { id: 17, label: "Item 17" };const row018 = { id: 18, label: "Item 18" };const row019 = { id: 19, label: "Item 19" };const row020 = { id: 20, label: "Item 20" };const row021 = { id: 21, label: "Item 21" };const row022 = { id: 22, label: "Item 22" };const row023 = { id: 23, label: "Item 23" };const row024 = { id: 24, label: "Item 24" };const row025 = { id: 25, label: "Item 25" };const row026 = { id: 26, label: "Item 26" };const row027 = { id: 27, label: "Item 27" };const row028 = { id: 28, label: "Item 28" };const row029 = { id: 29, label: "Item 29" };const row030 = { id: 30, label: "Item 30" };const row031 = { id: 31, label: "Item 31" };const row032 = { id: 32, label: "Item 32" };const row033 = { id: 33, label: "Item 33" };const row034 = { id: 34, label: "Item 34" };const row035 = { id: 35, label: "Item 35" };const row036 = { id: 36, label: "Item 36" };const row037 = { id: 37, label: "Item 37" };const row038 = { id: 38, label: "Item 38" };const row039 = { id: 39, label: "Item 39" };const row040 = { id: 40, label: "Item 40" };const row041 = { id: 41, label: "Item 41" };const row042 = { id: 42, label: "Item 42" };const row043 = { id: 43, label: "Item 43" };const row044 = { id: 44, label: "Item 44" };const row045 = { id: 45, label: "Item 45" };const row046 = { id: 46, label: "Item 46" };const row047 = { id: 47, label: "Item 47" };const row048 = { id: 48, label: "Item 48" };const row049 = { id: 49, label: "Item 49" };const row050 = { id: 50, label: "Item 50" };const row051 = { id: 51, label: "Item 51" };const row052 = { id: 52, label: "Item 52" };const row053 = { id: 53, label: "Item 53" };const row054 = { id: 54, label: "Item 54" };const row055 = { id: 55, label: "Item 55" };const row056 = { id: 56, label: "Item 56" };const row057 = { id: 57, label: "Item 57" };const row058 = { id: 58, label: "Item 58" };const row059 = { id: 59, label: "Item 59" };const row060 = { id: 60, label: "Item 60" };const row061 = { id: 61, label: "Item 61" };const row062 = { id: 62, label: "Item 62" };const row063 = { id: 63, label: "Item 63" };const row064 = { id: 64, label: "Item 64" };const row065 = { id: 65, label: "Item 65" };const row066 = { id: 66, label: "Item 66" };const row067 = { id: 67, label: "Item 67" };const row068 = { id: 68, label: "Item 68" };const row069 = { id: 69, label: "Item 69" };const row070 = { id: 70, label: "Item 70" };const row071 = { id: 71, label: "Item 71" };const row072 = { id: 72, label: "Item 72" };const row073 = { id: 73, label: "Item 73" };const row074 = { id: 74, label: "Item 74" };const row075 = { id: 75, label: "Item 75" };const row076 = { id: 76, label: "Item 76" };const row077 = { id: 77, label: "Item 77" };const row078 = { id: 78, label: "Item 78" };const row079 = { id: 79, label: "Item 79" };const row080 = { id: 80, label: "Item 80" };const row081 = { id: 81, label: "Item 81" };const row082 = { id: 82, label: "Item 82" };const row083 = { id: 83, label: "Item 83" };const row084 = { id: 84, label: "Item 84" };const row085 = { id: 85, label: "Item 85" };const row086 = { id: 86, label: "Item 86" };const row087 = { id: 87, label: "Item 87" };const row088 = { id: 88, label: "Item 88" };const row089 = { id: 89, label: "Item 89" };const row090 = { id: 90, label: "Item 90" };const row091 = { id: 91, label: "Item 91" };const row092 = { id: 92, label: "Item 92" };const row093 = { id: 93, label: "Item 93" };const row094 = { id: 94, label: "Item 94" };const row095 = { id: 95, label: "Item 95" };const row096 = { id: 96, label: "Item 96" };const row097 = { id: 97, label: "Item 97" };const row098 = { id: 98, label: "Item 98" };const row099 = { id: 99, label: "Item 99" };const row100 = { id: 100, label: "Item 100" };JSON
{ "component": "MarkdownRenderer", "supports": ["gfm", "tables", "task-lists", "code-blocks", "mermaid"], "lineCounts": [10, 100]}Mermaid
flowchart TD A[User opens Comps Explorer] --> B[Select Markdown Renderer] B --> C[Render sample markdown] C --> D[Verify headings, tables, and code blocks] D --> E[Inspect long code behavior]