5.2 KiB
| title | tags | |
|---|---|---|
| Obsidian Compatibility |
|
Quartz was originally designed as a tool to publish Obsidian vaults as websites. Even as the scope of Quartz has widened over time, it hasn't lost the ability to seamlessly interoperate with Obsidian.
By default, Quartz ships with the ObsidianFlavoredMarkdown plugin, which is a transformer plugin that adds support for Obsidian Flavored Markdown. This includes support for features like wikilinks and Mermaid diagrams.
It also ships with support for frontmatter parsing with the same fields that Obsidian uses through the Frontmatter transformer plugin.
Finally, Quartz also provides CrawlLinks plugin, which allows you to customize Quartz's link resolution behaviour to match Obsidian.
Supported Features
Wikilinks
Internal links using the [[page]] syntax are converted to regular links. See wikilinks for more details. All variations are supported:
[[Page]] Link to a page
[[Page|Custom text]] Link with alias
[[Page#Heading]] Link to a heading
[[Page#Heading|Custom text]] Link to a heading with alias
[[Page#^block-id]] Link to a block reference
![[Page]] Embed (transclude) a page
![[image.png]] Embed an image
![[image.png|alt 100x200]] Embed with alt text and dimensions
Inside tables, pipes in wikilinks can be escaped with a backslash:
| Column |
| --------------- |
| [[page\|alias]] |
Highlights
Wrap text in == to highlight it:
This is ==highlighted text== in a sentence.
This renders as: This is ==highlighted text== in a sentence.
Comments
Obsidian-style comments are stripped from the output:
This is visible. %%This is a comment and won't appear.%%
This renders as: This is visible. %%This is a comment and won't appear.%%
Multi-line comments are also supported:
%%
This entire block
is a comment.
%%
Tags
Tags starting with # are parsed and linked to tag pages:
#tag #nested/tag #tag-with-dashes
For example: #feature/transformer
Note
Pure numeric tags like
#123are ignored, matching Obsidian behaviour.
Callouts
callouts are fully supported, including collapsible variants:
> [!note]
> This is a note callout.
> [!warning]- Collapsed by default
> This content is hidden initially.
> [!tip]+ Expanded by default
> This content is visible initially.
[!example] Live example This is a live callout rendered from Obsidian-flavored Markdown.
All built-in callout types are supported: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, and quote, along with their aliases.
Task Lists and Custom Task Characters
Standard checkboxes work out of the box. With enableCheckbox: true, you also get support for custom task characters that are popular in the Obsidian community:
- [ ] Unchecked
- [x] Checked
- [?] Question
- [!] Important
- [>] Forwarded
- [/] In progress
- [-] Cancelled
- [s] Special
Each custom character is preserved as a data-task attribute on the rendered element, allowing CSS-based styling per character.
- Unchecked
- Checked
- [?] Question
- [!] Important
Mermaid Diagrams
Mermaid diagrams code blocks are rendered as diagrams:
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
```
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
YouTube Embeds
YouTube videos can be embedded using standard image syntax with a YouTube URL:
For example, the following embed is rendered from :
Tweet Embeds
Tweets from Twitter/X are embedded as static blockquotes with a link to the original:
For example, the following embed is rendered from :
Block References
Block references allow linking to specific blocks within a page:
Content paragraph. ^my-block
[[Page#^my-block]]
Obsidian URI Links
Links using the obsidian:// protocol are marked with a CSS class (obsidian-uri) and a data-obsidian-uri attribute, so you can style them differently from regular links.
Video Embeds
Video files can be embedded using standard image syntax:
Embed in HTML
By default, Obsidian does not render its Markdown syntax inside HTML blocks. Quartz extends this with the enableInHtmlEmbed option, which parses wikilinks, highlights, and tags inside raw HTML nodes.
Configuration
This functionality is provided by the ObsidianFlavoredMarkdown, Frontmatter and CrawlLinks plugins. See the plugin pages for customization options.