Reading
Reading time calculator
Minutes per section, Markdown-aware, code left out.
Free tool
Obsidian callout converter
Paste a note from Obsidian and get clean HTML for its callouts and the rest of its Markdown, with a live preview. Foldable and nested callouts included, ready for a website, a learning platform or a newsletter.
Free, no sign-up. Nothing you type leaves your browser.
Your note
Paste a note from Obsidian. HTML tags in it show as text, so nothing in the note can run.
Preview
6 callouts converted · 6.3 KB of HTML, CSS included
A branch lets you try an idea without touching the code that already works. In this lesson you'll create one, commit to it and merge it back.
What you'll learn
- Create a branch and switch to it
- Commit on the branch, then merge it into
main - Delete a branch you no longer need
One command instead of two
git switch -c feature/login creates the branch and switches to it.
Try it
- Run
git switch -c practice. - Change a file and commit it.
- Switch back with
git switch mainand check that your change is gone.
Common mistake (click to open)
Committing on main by accident. Run git status first: its first line tells you which branch you're on.
Merging the branch
git switch main
git merge practice
Check your understanding
You're on main and run git merge practice. Which branch changes?
Answer
main does: it gets the commits from practice, which stays as it was.
Without branches: everyone commits to main, and one broken commit stops the whole team.
With branches: each feature waits on its own branch until it works.
New to commits? Go back to the lesson on commits.
HTML
<style>
.callout {
--callout-color: 8, 109, 221;
margin: 1.25rem 0;
padding: 0.75rem 1rem;
border-left: 3px solid rgb(var(--callout-color));
border-radius: 8px;
background: rgba(var(--callout-color), 0.1);
overflow: hidden;
}
.callout-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
line-height: 1.4;
color: rgb(var(--callout-color));
}
.callout-icon {
display: inline-flex;
flex-shrink: 0;
}
.callout-title-inner p {
margin: 0;
}
details.callout > summary.callout-title {
cursor: pointer;
list-style: none;
}
details.callout > summary.callout-title::-webkit-details-marker {
display: none;
}
details.callout > summary.callout-title::after {
content: '';
width: 0.45rem;
height: 0.45rem;
margin-left: 0.25rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
details.callout[open] > summary.callout-title::after {
transform: rotate(45deg);
}
.callout-content {
margin-top: 0.5rem;
}
.callout-content > :first-child,
.column > :first-child {
margin-top: 0;
}
.callout-content > :last-child,
.column > :last-child {
margin-bottom: 0;
}
.columns {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin: 1.25rem 0;
}
.column {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 640px) {
.columns {
flex-direction: column;
}
.column {
flex: 1 1 auto !important;
width: 100%;
}
}
</style>
<p>A branch lets you try an idea without touching the code that already works. In this lesson you'll create one, commit to it and merge it back.</p>
<div class="callout" data-callout="note" style="--callout-color: 8, 109, 221">
<div class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"></path><path d="m15 5 4 4"></path></svg></span><span class="callout-title-inner">What you'll learn</span></div>
<div class="callout-content">
<ul>
<li>Create a branch and switch to it</li>
<li>Commit on the branch, then merge it into <code>main</code></li>
<li>Delete a branch you no longer need</li>
</ul>
</div>
</div>
<details class="callout" data-callout="tip" style="--callout-color: 0, 191, 188" open>
<summary class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></span><span class="callout-title-inner">One command instead of two</span></summary>
<div class="callout-content">
<p><code>git switch -c feature/login</code> creates the branch and switches to it.</p>
</div>
</details>
<h2>Try it</h2>
<ol>
<li>Run <code>git switch -c practice</code>.</li>
<li>Change a file and commit it.</li>
<li>Switch back with <code>git switch main</code> and <mark>check that your change is gone</mark>.</li>
</ol>
<details class="callout" data-callout="warning" style="--callout-color: 236, 117, 0">
<summary class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span class="callout-title-inner">Common mistake (click to open)</span></summary>
<div class="callout-content">
<p>Committing on <code>main</code> by accident. Run <code>git status</code> first: its first line tells you which branch you're on.</p>
</div>
</details>
<div class="callout" data-callout="example" style="--callout-color: 120, 82, 238">
<div class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h.01"></path><path d="M3 18h.01"></path><path d="M3 6h.01"></path><path d="M8 12h13"></path><path d="M8 18h13"></path><path d="M8 6h13"></path></svg></span><span class="callout-title-inner">Merging the branch</span></div>
<div class="callout-content">
<pre><code class="language-bash">git switch main
git merge practice
</code></pre>
</div>
</div>
<div class="callout" data-callout="question" style="--callout-color: 236, 117, 0">
<div class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></span><span class="callout-title-inner">Check your understanding</span></div>
<div class="callout-content">
<p>You're on <code>main</code> and run <code>git merge practice</code>. Which branch changes?</p>
<details class="callout" data-callout="success" style="--callout-color: 8, 185, 78">
<summary class="callout-title"><span class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span><span class="callout-title-inner">Answer</span></summary>
<div class="callout-content">
<p><code>main</code> does: it gets the commits from <code>practice</code>, which stays as it was.</p>
</div>
</details>
</div>
</div>
<div class="columns">
<div class="column">
<p><strong>Without branches:</strong> everyone commits to <code>main</code>, and one broken commit stops the whole team.</p>
</div>
<div class="column">
<p><strong>With branches:</strong> each feature waits on its own branch until it works.</p>
</div>
</div>
<p>New to commits? Go back to the lesson on commits.</p>
How to use the converter
- Paste a note. Copy it from Obsidian’s editor (select all, then copy) and paste it over the example. The preview updates as you type.
- Check the preview. Callouts should show as coloured boxes. If one shows as a plain quote, look at its first line: it needs
[!type]straight after the>. - Choose “Include CSS”. Leave it on when the page you paste into knows nothing about callouts: a learning platform, a blog post, a newsletter. Turn it off when your site already styles them.
- Copy or download. Copy the HTML into your page’s HTML editor, or download a complete page you can open in any browser.
What Obsidian callouts are
A callout is a blockquote with a type on its first line. Obsidian draws it as a coloured box with an icon and a title, which makes it the easiest way to mark an objective, a tip or a warning in a note:
> [!tip] Optional title
> The body: any Markdown, including lists,
> code blocks and images.The type isn’t case-sensitive. Leave out the title and the type becomes the title (“Tip”). The converter keeps the same class names Obsidian uses (callout, callout-title, callout-content) and puts the type in data-callout, so styles written for one are easy to adapt to the other.
Foldable and nested callouts
Add a minus sign after the type, [!warning]-, and the callout starts folded: only the title shows until someone opens it. A plus sign, [!tip]+, makes it foldable but open. In the HTML, both become a <details> element with the title in <summary>, so they open and close without any JavaScript and work with the keyboard.
To put a callout inside another, add a second > to its lines. The example above nests a folded answer inside a question, which is the most useful pattern in a lesson.
What a callout turns into
The folded warning from the example,
> [!warning]- Common mistake
> Committing on `main` by accident.becomes this HTML (the icon’s drawing shortened):
<details class="callout" data-callout="warning" style="--callout-color: 236, 117, 0">
<summary class="callout-title"><span class="callout-icon"><svg …></svg></span><span class="callout-title-inner">Common mistake</span></summary>
<div class="callout-content">
<p>Committing on <code>main</code> by accident.</p>
</div>
</details>Each callout carries its colour in a CSS variable, so one short set of rules styles all thirteen types and any you invent.
Supported callout types
| Type | Also written as | Colour | Icon |
|---|---|---|---|
note | – | Blue | Pencil |
abstract | summary, tldr | Teal | Clipboard |
info | – | Blue | Info |
todo | – | Blue | Circled tick |
tip | hint, important | Teal | Flame |
success | check, done | Green | Tick |
question | help, faq | Orange | Question mark |
warning | caution, attention | Orange | Warning triangle |
failure | fail, missing | Red | Cross |
danger | error | Red | Lightning |
bug | – | Red | Bug |
example | – | Purple | List |
quote | cite | Grey | Quotation marks |
Any other name, such as [!recipe], gets the note colour and icon and keeps its own name, so a line of CSS on [data-callout="recipe"] can give it a colour of its own. Two names are layouts rather than boxes: [!columns] with nested [!column] callouts puts them side by side ([!column|58] makes one 58% wide). That layout isn’t part of Obsidian itself; it needs a CSS snippet there.
Why callouts don’t show up outside Obsidian
Callouts are Obsidian’s own addition. Standard Markdown, and the GitHub Flavored Markdown many tools use, only know the blockquote, so everywhere else your callout turns into a grey quote whose first line reads [!note]. GitHub has a similar syntax for five alert types, styled its own way and without folding. Converting to HTML fixes it once: the boxes, icons and folding travel with the HTML.
The rest of the note comes along:
- Headings, lists, tables, task lists, strikethrough, footnotes and code blocks, as standard HTML.
- Code blocks keep their language as a class (
language-bash), so a highlighter on your site can colour them. ==Highlights==become<mark>,[[wikilinks]]become their text,![[embeds]]their file name, and%%comments%%disappear. For images on the web, use standard Markdown:.- HTML typed into the note shows as text and unsafe links lose their address, so a pasted note can’t run anything in the preview or on your page.
Using callouts in course lessons
Callouts work best in lessons when each type means one thing, every time. A set that works well:
- note for what the lesson covers, at the top;
- tip for shortcuts that aren’t needed to follow along;
- warning for the mistake most learners make at that step;
- question with a folded success inside it for a check with its answer.
The folded answer matters. Trying to answer before looking is retrieval practice, one of the most reliable ways to make learning stick (Roediger and Karpicke, 2006). Keep the steps learners must follow out of folded callouts, though: anything folded is easy to skip. And keep callouts rare: when half the lesson is in boxes, none of them stands out. Before you publish, the reading time calculator shows how long each section takes to read, and the Markdown diff checker shows what changed between two versions of a lesson.
If you write lessons in Obsidian, Chalkenso’s Obsidian plugin syncs a vault folder with a course in both directions, and callouts, [!columns] layouts and [[links]] between lessons look the same there as in your vault.
Questions people ask
How do I convert Obsidian callouts to HTML?
Paste the note into the converter and copy the HTML, or download it as a page. Each callout becomes a div with the class "callout", its type in data-callout, an inline SVG icon and its title. Turn on "Include CSS" if the page you paste it into has no callout styles of its own.
Do foldable callouts work without JavaScript?
Yes. A foldable callout ([!tip]- or [!tip]+) becomes a <details> element with the title in <summary>, which every current browser opens and closes on its own, with the keyboard too. The minus sign gives a closed callout, the plus sign an open one.
Can I convert a whole Obsidian note to HTML?
Yes. Headings, lists, tables, task lists, code blocks, footnotes and ==highlights== are converted too. [[Wikilinks]] become their text and ![[embeds]] their file name, because the linked notes and images live in your vault, and %%comments%% are removed.
Why do my callouts show as a plain quote outside Obsidian?
Callouts are Obsidian’s own addition to Markdown, so other Markdown tools see an ordinary blockquote whose first line happens to start with [!note]. Converting the note to HTML first keeps the boxes, colours, icons and folding wherever the HTML goes.
Which callout types does Obsidian support?
Thirteen: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example and quote, plus aliases such as summary, hint, caution and error. Any other name works too and is shown in the note style, with its name kept in data-callout so you can style it.
Is my note uploaded anywhere?
No. The conversion runs in your browser; nothing you paste is sent to a server or saved.
Do this for every lesson, every group
Chalkenso is where courses are designed and improved: instructors note what happened on the exact passage, learners say where they got stuck, and AI drafts the next version for you to approve.