// Part of ImGui Bundle - MIT License - Copyright (c) 2022-2026 Pascal Thomet - https://github.com/pthom/imgui_bundle
#include "hello_imgui/hello_imgui.h"
#include "imgui_md_wrapper/imgui_md_wrapper.h"
#include "immapp/immapp.h"
std::string exampleMarkdownString()
{
std::string md = R"(
# Dear ImGui Bundle — Markdown tour
`imgui_md` renders markdown directly inside an ImGui window — no browser,
no HTML, no external renderer.
> [!TIP]
> Use this demo as a reference when writing markdown in your own application.
> Expand the *"Show source"* sections to get copyable snippets.
---
# Basics
Text and typography
All the usual inline styling works:
- *emphasis*, **bold**, ***both***, ~~strikethrough~~, underlined
- highlighted passages for things that need to stand out
- Inline `code` — handy for tokens, flags, and short snippets
HTML-like spans render natively too, no callbacks needed:
- Keyboard shortcuts read naturally: press Ctrl+Shift+P, or Cmd+K on a Mac
- Chemistry: H2O, CO2, C8H10N4O2
- Exponents: x2 + y2 = r2
For any HTML span not in the default set, wire `MarkdownCallbacks.on_html_span`.
Show source
```
*emphasis*, **bold**, ***both***, ~~strikethrough~~, underlined
highlighted, inline `code`
Ctrl+Shift+P
H2O, x2 + y2 = r2
```
Structure: headers, lists, quotes, rules
Markdown handles the bones of a document out of the box.
**Headers** go from `#` (H1) to `###` (H3); all render as ImGui-styled headings.
Test Headers
# Title 1
A quick intro in normal text.
## Title 2
### Title 3
#### Title 4
##### Title 5
**Ordered and unordered lists**, including nesting:
1. First
2. Second
- Nested bullet
- Another one
1. Deeper still
3. Third
**Blockquotes** for callouts that aren't admonitions:
> Markdown inside an ImGui window — the best of both worlds.
**Horizontal rules** to separate sections (three dashes on a line):
---
Show source
```
# H1
## H2
### H3
1. First
2. Second
- Nested bullet
1. Deeper still
> A blockquote.
---
```
Links and autolinks
Explicit markdown link syntax: [Dear ImGui Bundle](https://github.com/pthom/imgui_bundle).
Autolinks turn bare URLs, `www.` hosts, and email addresses into clickable
links automatically:
- https://github.com/pthom/imgui_bundle
- www.dearimgui.org
- Contact: pthomet@gmail.com
Disable with `MarkdownOptions.autolinks = False` for strict CommonMark
behavior.
Show source
```
[Dear ImGui Bundle](https://github.com/pthom/imgui_bundle)
https://github.com/pthom/imgui_bundle
www.dearimgui.org
Contact: pthomet@gmail.com
```
Images
Images load from local assets with a relative path:
Remote URLs load asynchronously — a spinner is shown while downloading:
Use `![]()
` when you need to control the size:
> *Remote image work by default when using python and C++/emscripten.
> On desktop/C++ an async download callback needs to be provided.*
Show source
```
```
# Tables and code blocks
Code blocks
**Inline snippets**
Inline snippets are rendered like code inside a regular paragraph, like this: `result = 37`.
They are written like this:
`result = 37`
**Code blocks**
Code blocks preserve layout and use a monospaced font.
A small Python example:
```python
from imgui_bundle import imgui, immapp
def gui():
imgui.text("Hello, World!")
immapp.run(gui, window_title="My App")
```
And its C++ equivalent:
```cpp
#include "imgui.h"
#include "immapp/immapp.h"
void gui() {
ImGui::Text("Hello, World!");
}
int main() {
ImmApp::Run(gui);
}
```
Code blocks are delimited by three backticks, plus an optional language. See example below:
```python
int main()
{
return 0;
}
```
Tables
Columns are resizable at runtime — grab a column border and drag. First-row
widths drive column layout, so use ` ` in that row to enforce a
minimum width where needed.
Column alignment is controlled by colons in the separator row:
```
:--- left
---: right
:---: centre
```
| Continent | Population | Countries |
|----------------|--------------:|:---------:|
| Africa | 1300 million | 54 |
| Asia | 4500 million | 48 |
| Europe | 743 million | 44 |
| North America | 579 million | 23 |
| Oceania | 41 million | 14 |
| South America | 422 million | 12 |
| Antarctica | 0 | 0 |
Show source
```
| Continent | Population | Countries |
|----------------|--------------:|:---------:|
| Africa | 1300 million | 54 |
| Asia | 4500 million | 48 |
```
# Useful extensions
GitHub-style admonitions
Blockquotes that start with `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`
or `[!CAUTION]` render as coloured callouts — great for in-app help and
onboarding:
> [!NOTE]
> A note provides useful context that a reader should know.
> [!TIP]
> A small hint that saves the reader time.
> [!IMPORTANT]
> Required information to complete a task.
> [!WARNING]
> Heads up: something can subtly go wrong here.
> [!CAUTION]
> A negative outcome is likely without care.
Show source
```
> [!NOTE]
> A note provides useful context that a reader should know.
> [!WARNING]
> Heads up: something can subtly go wrong here.
```
Task lists
GitHub-style task lists render as checkbox glyphs. Handy for changelogs
and roadmap-style content embedded inside your app:
- [x] Design the UI
- [x] Wire up the data layer
- [x] Write the onboarding flow
- [ ] Polish documentation
- [ ] Record a demo video
- [ ] Ship it
Show source
```
- [x] Done item
- [ ] Pending item
```
Math with LaTeX
Requires `immapp.run(..., with_latex=True)`. Rendering is powered by
[MicroTeX](https://github.com/NanoMichael/MicroTeX).
**Inline math** uses single dollars: Euler's identity $e^{i\pi} + 1 = 0$
is a consequence of the more general $e^{i\theta} = \cos\theta + i\sin\theta$.
**Display math** uses double dollars on their own line. The quadratic
formula:
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
Sums, integrals and matrices all work:
$$
\int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi}
\qquad
A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
\qquad
\sum_{i=0}^{n} i = \frac{n(n+1)}{2}
$$
Show source
```
Inline: $e^{i\pi} + 1 = 0$
Display:
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
```
Preformatted text with the pre tag
`` renders a block of monospaced text **without** the styling of a
fenced code block — no background frame, no syntax coloring. Use it
for ASCII layouts, aligned data, and anything where "monospace" is
what you want but "this is source code" is not the right message:
Metric Aligned Value
-------- --------- -----
Ping right 12ms
Throughput right 42MB/s
Latency right 87us
Same content in a fenced code block, for comparison:
```
Metric Aligned Value
-------- --------- -----
Ping right 12ms
```
Show source
```
First line
Indented line
Last line
```
---
# Under the hood: how this page is built
It's collapsibles all the way down
Every section above — and every "Show source" inside them — is a
`` block. The tags render as `CollapsingHeader` widgets,
and blank lines around the opening / closing tags let the inner
content be parsed as regular markdown:
A nested collapsible
Hidden until you click. The content is regular markdown.
- One
- Two
Going deeper
Another level. Indentation doesn't matter; what matters is the blank
lines around the tags.
Show source
```
Click me
Hidden content (regular markdown here).
```
)";
return md;
}
void demo_imgui_md()
{
ImGuiMd::Render(exampleMarkdownString());
// Note: you may also use:
// ImGuiMd::RenderUnindented(exampleMarkdownString());
// (it will remove the main indentation of the Markdown string before rendering it,
// which is useful when the string is defined inside a function with indentation)
}
// Standalone main(): bypasses the auto-generated main from ibd_add_auto_demo,
// which would only enable withMarkdown. We need withLatex=true (which implies
// withMarkdown=true) so the LaTeX section actually renders.
// When this file is built as part of the demo_imgui_bundle aggregator
// (IMGUI_BUNDLE_BUILD_DEMO_AS_LIBRARY), this main() is excluded.
#ifndef IMGUI_BUNDLE_BUILD_DEMO_AS_LIBRARY
int main(int, char**)
{
HelloImGui::SimpleRunnerParams runnerParams;
runnerParams.guiFunction = demo_imgui_md;
runnerParams.windowTitle = "Dear ImGui Bundle - Markdown demo";
runnerParams.windowSize = {800, 800};
ImmApp::AddOnsParams addons;
addons.withLatex = true; // implies withMarkdown=true
ImmApp::Run(runnerParams, addons);
return 0;
}
#endif