Useful features in markdown for website building with quartz:
-
Callouts (
>[!info]) -
Wikilinks (
[[Your Other Note]]) -
Mermaid Diagrams
-
Highlighting (
==text==) -
Task Lists (
- [ ])
1. Basic Formatting (The Essentials):
These are standard Markdown features. They are 100% supported by Obsidian and Quartz and are the foundation of all your pages.
| Feature | Obsidian Syntax (Markdown) | Rendered Output (What it looks like) | Quartz Suitability |
|---|---|---|---|
| Heading 1 | # A Main Heading | A very large main title. | Core. Use one H1 per page (often the file title). |
| Heading 2 | ## A Section Heading | A large section heading. | Core. Use for main sections. |
| Heading 3 | ### A Subsection Heading | A medium subsection heading. | Core. Use for subsections. |
| Bold | **This is bold** | This is bold | Core. Fully supported. |
| Italic | *This is italic* | This is italic | Core. Fully supported. |
| Strikethrough | ~~This is strikethrough~~ | Core. Fully supported. | |
| Unordered List | * An item- Another item+ A third item | A bulleted list. | Core. Fully supported. |
| Ordered List | 1. First item2. Second item | A numbered list. | Core. Fully supported. |
| Link (External) | [Visit Google](https://google.com) | A blue, clickable link: Visit Google | Core. Fully supported. |
| Image (External) |  | Displays the image from the web. | Core. Fully supported. |
| Blockquote | > This is a quote. | > An indented block of text, often with a left border. | Core. Fully supported. |
| Horizontal Rule | --- or *** | A thin horizontal line. | Core. Great for separating sections. |
| Inline Code | `const x = 10;` | A bit of text formatted as code: const x = 10; | Core. Fully supported. |
| Code Block | javascript<br><br> <br><br>function hello() {<br><br> <br><br>console.log("Hi!");<br><br> <br><br>}<br><br> <br><br> | A full, syntax-highlighted code block. | Excellent. Quartz supports syntax highlighting. |
2. Obsidian Core Features (Linking Your Brain)
This is what makes Obsidian (and Quartz) so powerful: linking notes together.
| Feature | Obsidian Syntax (Markdown) | Rendered Output (What it looks like) | Quartz Suitability |
|---|---|---|---|
| Internal Link (Wikilink) | [[My Other Note]] | A link to another note in your vault. | 100% SUPPORTED. This is the core of Quartz. |
| Link with Alias | [[My Other Note|Click this!]] | A link that displays “Click this!” but goes to “My Other Note”. | 100% SUPPORTED. |
| Link to Heading | [[My Other Note\#A Section]] | A link to a specific heading in another note. | 100% SUPPORTED. |
| Tags | #project or #topic/subtopic | A clickable tag. | Supported. Quartz recognizes tags and can create tag pages. |
| Embed Note | ![[My Other Note]] | The entire content of “My Other Note” is displayed inside the current note. | Supported. This is a key feature for beautiful, composite pages. |
| Embed Heading | ![[My Other Note\#A Section]] | Embeds only the content under that specific heading. | Supported. Very useful for “dashboard” pages. |
| Embed Image (Local) | ![[my-image.png]] | Displays an image from your vault. | 100% SUPPORTED. This is the standard way to add images. |
3. Extended Markdown (For “Beautiful Pages”)
These features are part of “Obsidian Flavored Markdown.” They are perfect for styling your Quartz site.
| Feature | Obsidian Syntax (Markdown) | Rendered Output (What it looks like) | Quartz Suitability |
|---|---|---|---|
| Callouts | >[!info]> This is info. | A colored box (blue) with an “info” icon and title. | 100% SUPPORTED. This is the feature you asked about. Quartz styles these by default. |
| Callout Types | >[!note] >[!tip] >[!warning]>[!danger] >[!success] >[!faq]>[!quote] >[!example] (and more) | Each type has its own color (blue, green, orange, red, etc.) and icon. | 100% SUPPORTED. Use these to make your pages visually striking and organized. |
| Custom Callout Title | >[!tip] A Pro-Tip!> You can change the title. | A green “tip” box, but the title says “A Pro-Tip!“. | 100% SUPPORTED. |
| Foldable Callout | >[!faq]- Why is this cool?> This content is hidden. | A callout that is “collapsed” by default. Users must click to open it. | 100% SUPPORTED. Excellent for “FAQ” sections or hiding spoilers. |
| Task Lists | - [ ] An incomplete task- [x] A completed task | A list with clickable checkboxes. | Supported. Renders as checkboxes (may not be interactive on the site, but shows status). |
| Highlight | ==This text is highlighted== | This text is highlighted (usually yellow). | Supported. Great for drawing attention. |
| Tables | | Head 1 | Head 2 || --- | --- || Cell 1 | Cell 2 | | A clean, formatted data table. | Core. Fully supported and essential for data. |
| Footnotes | Text with a footnote.[^1][^1]: The footnote text. | A small superscript number, and the text appears at the bottom. | Supported. |
4. Advanced Content (Diagrams & Math)
These features also work in Quartz, making your pages look incredibly professional.
| Feature | Obsidian Syntax (Markdown) | Rendered Output (What it looks like) | Quartz Suitability |
|---|---|---|---|
| Mermaid Diagrams | mermaid<br><br> <br><br>graph TD;<br><br> <br><br>A --> B;<br><br> <br><br>A --> C;<br><br> <br><br> | A rendered flowchart or diagram. | 100% SUPPORTED. This is a major feature for beautiful, technical pages. Quartz renders them automatically. |
| Math (LaTeX) | This is $E=mc^2$ inline. | Renders as a proper mathematical formula: This is E=mc2 inline. | Supported. Quartz supports LaTeX rendering, often via a plugin or setting. |
| Math Block | $$\int_a^b x^2 \,dx$$ | A large, centered, beautifully formatted equation. | Supported. Same as inline math, essential for academic or technical sites. |
| Comments | \%\%This is a comment.\%\% - only percent signs without the fwd slashes | This text is invisible in Reading mode and on the web. | Supported. Perfect for leaving notes to yourself that won’t get published. |
Callout examples
(Blue) - General information.
(Blue) - A more specific info block.
(Blue) - A to-do list, often with checkboxes.
(Green) - Helpful advice or a shortcut.
(Green) - For completion or positive outcomes.
(Orange) - For a question or FAQ.
(Orange) - For cautions or things to be aware of.
(Red) - Critical warnings or errors.
(Red) - For bug reports or failures.
(Gray) - For blockquotes or citations.
(Purple) - To show an example.
Mermaid example
```mermaid
graph TD; A[Start] --> B(Process); B --> C{Decision}; C -->|Yes| D[End]; C -->|No| B;graph TD; A[Start] --> B(Process); B --> C{Decision}; C -->|Yes| D[End]; C -->|No| B;
Some ascii art
/T /I
/ |/ | .-~/
T\ Y I |/ / _
/T | \I | I Y.-~/
I l /I T\ | | l | T /
__ | \l \l \I l __l l \ ` _. |
\ ~-l `\ `\ \ \\ ~\ \ `. .-~ |
\ ~-. "-. ` \ ^._ ^. "-. / \ |
.--~-._ ~- ` _ ~-_.-"-." ._ /._ ." ./>
--. ~-. ._ ~>-" "\\ 7 7 ]
^.___~"--._ ~-{ .-~ . `\ Y . / |
<__ ~"-. ~ /_/ \ \I Y : |
^-.__ ~(_/ \ >._: | l______
^--.,___.-~" /_/ ! `-.~"--l_ / ~"-.
(_/ . ~( /' "~"--,Y -=b-. _)
(_/ . \ : / l c"~o \
\ / `. . .^ \_.-~"~--. )
(_/ . ` / / ! )/
/ / _. '. .': / '
~(_/ . / _ ` .-<_
/_/ . ' .-~" `. / \ \ ,z=.
~( / ' : | K "-.~-.______//
"-,. l I/ \_ __{--->._(==.
//( \ < ~"~" //
/' /\ \ \ ,v=. ((
.^. / /\ " }__ //===- `
/ / ' ' "-.,__ {---(==-
.^ ' : T ~" ll
/ . . . : | :! \\
(_/ / | | j-" ~^
~-<_(_.^-~"
__.
.-".' .--. _..._
.' .' .' \ .-"" __ ""-.
/ / .' : --..:__.-"" ""-. \
: : / ;.d$$ sbp_.-""-:_:
; : : ._ :P .-. ,"TP
: \ \ T--...-; : d$b :d$b
\ `. \ `..' ; $ $ ;$ $
`. "-. ). : T$P :T$P
\..---^.. / `-' `._`._
.' "-. .-" T$$$b
/ "-._.-" ._ '^' ;
: \.`. /
; -. \`."-._.-'-'
: .'\ \ \ \ \
; ; /: \ \ \ . ;
: : , ; `. `.; :
; \ ; ; "-._: ;
: `. : : \/
; /"-. ; :
: / "-. : : ;
: .' T-; ; ;
; : ; ; / :
; ; : : .' ;
: : ;: _..-"\ :
: \ : ; / \ ;
; . '. '-; / ; :
; \ ; : : : : '-.
'.._L.:-' : ; ; . `.
; : : \ ; :
: '-.. '.._L.:-'
; , `.
: \ ; :
'..__L.:-'
/ \
/ _ \
| / \ |
|| || _______
|| || |\ \
|| || ||\ \
|| || || \ |
|| || || \__/
|| || || ||
\\_/ \_/ \_//
/ _ _ \
/ \
| O O |
| \ ___ / |
/ \ \_/ / \
/ ----- | --\ \
| \__/|\__/ \ |
\ |_|_| /
\_____ _____/
\ /
| |