Quartz MKD

— 6 min read

Backlinks

  • ![[Crossbell IPFS.png]]: embeds an image into the page
  • ![[Crossbell IPFS.png|100x145]]: embeds an image into the page with dimensions 100px by 145px
  • ![[Link Icon Test.md]]: transclude an entire page
  • ![[Link Icon Test.md#anchor|Anchor]]: transclude everything under the header Anchor
  • ![[Link Icon Test.md#^b15695|^b15695]]: transclude block with ID ^b15695

Column

Use Nested Callouts

[column] is designed to have callouts nested within it.

To remove styling from nested callouts, add clean no-title to the metadata

NOTE

This callout has clean no-title metadata.

syntax:
> [!column]
>
> > [!note] title
> >
> > content
>
> > [!column] title
> >
> > content

Caption

wsmall

A caption callout nested in the grid.

Captions

Caption

wsmall

[!caption|right] callout

A borderless callout for adding captions to images.

Use Callout Positioning metadata to float these left or right for wiki-style article image captions

syntax
> [!caption]
> 
>
> ![[Crossbell IPFS.png]]
>
> Image caption.

Zettelkasten[^1]

Infobox

A wiki-style infobox displayed in the top right of an article to summarize data from the article, such as requirements for a tutorial article.

Infobox

Infobox

Table

TypeName
RowRow
RowRow

Type:

  • [!infobox]

Syntax:

> [!infobox]
> 
>
> ## Article Title
>
> ![[image]]
>
> ### Table Heading
>
> | Type | Name |
> | --- | --- |
> | Row | Row |
> | Row | Row |

Embed Adjustments

Adjustments for Obsidian embedded files, otherwise known as ‘transclusions’

syntax
![[Embedded Note|attribute attribute]]
 
![[intereting-note-title|clean right]]
AttributeDescription
cleanRemoves border to hide embed style
leftFloat
rightFloats embed to the right

Hide Embed Styling

You can hide the borders of embedded notes and blocks by adding ‘|clean]]’ to the wikilink’s alias.

This allows the embed to appear seamlessly as a part of the page it is embedded in.

Column

This is a standard transclusion:

  • ews
  • ss

This is a 'clean' transclusion:

  • we
  • ses

Embedding block links which float left or right

You must add a left or right attribute to embeds if the embedded content itself already floats left or right.

Example:

  • The infobox callout already floats right. To embed it in another page, add |right to the embed wikilink’s alias.

This prevents the embed from taking up 100% of the page-width, instead of wrapping around other content

Float Embed Left or Right

Embeds can be made to float to the left or right of a page by adding |left or |right to the embed wikilink’s alias.

As well as being a stylistic choice to move supplementary content outside of the main flow of the text, it is also necessary when embedding a block which contains an element with a float property already stipulated (e.g., an infobox callout).

Daedric Font

Daedric style font can be added by wrapping text in HTML <span> tags, courtesy of George Duffner’s OMW Ayembedt font (license: SIL Open Font License.

Syntax:

<span class="daedric">your daedric text here</span>

Example

Regular Text: “Morrowind” Daedric Text: ""Morrowind""

Use this reusable card view on any page by copying the HTML block and changing each card link, title, and subtitle.

Process Steps Layout

Use this reusable process view on any page by copying the HTML block and changing each step title and description.

How it works

  1. 1

    Create an agent

    Define the model, system prompt, tools, MCP servers, and skills. Create the agent once and reference it by ID across sessions.

  2. 2

    Create an environment

    Configure where the agent runs: a cloud sandbox, or a self-hosted sandbox on your own infrastructure.

  3. 3

    Start a session

    Launch a session that references your agent and environment configuration.

  4. 4

    Send events and stream responses

    Send user messages as events. The agent autonomously executes tools and streams back results through server-sent events. Event history is persisted server-side and can be fetched in full.

  5. 5

    Steer or interrupt

    Send additional user events to guide the agent mid-execution, or interrupt it to change direction.

“GPT-5.5 is noticeably smarter and more persistent than GPT-5.4, with stronger coding performance and more reliable tool use. It stays on task for significantly longer without stopping early, which matters most for the complex, long-running work our users delegate to Cursor.” — Michael Truell, Co-founder & CEO at Cursor

— Michael Truell, Co-founder & CEO at Cursor

Builders want continuous progress …（Lovable 引用正文）

— Fabian Hedin, CTO & Co-founder at Lovable

第三段文案 …

— 署名

iframe

## Callout

Box

Normal content displayed inside a grey bordered box. No blur, no hover effect — just a clean styled container.

Default title

Can callouts be nested?

Aliases: "abstract", "summary", "tldr"

Aliases: "info"

Aliases: "todo"

Aliases: "success", "check", "done"

Aliases: "question", "help", "faq"

Aliases: "failure", "missing", "fail"

Aliases: "danger", "error"

Aliases: "bug"

Aliases: "example"

Aliases: "quote", "cite"

Aliases: "quote", "cite"

Blur

This content is hidden until hovered. Works as a spoiler box or redaction block.

[Fetching Title#6kdx](https://github.com/jackyzha0/quartz/blob/v4/docs/features/callouts.md

Image Size and Layout Tests

This section records image size aliases and in-article layout formats for Quartz Markdown rendering.

FormatTest
Original
wmicrowmicro
wtinywtiny
wsmallwsmall
wmedwmed
Fixed dimensions

Inline Text Flow

Right floated layout test
Right floated figure

The right-floated image should sit beside this paragraph while text wraps naturally around it. This checks the most common wiki-style article layout where an image supports the surrounding explanation instead of occupying a full row.

The paragraph continues long enough to verify wrapping, spacing, and the return to normal document flow after the figure. On narrow screens, the figure should become full width and sit between paragraphs.

Left floated layout test
Left floated figure

The left-floated image mirrors the previous layout. It is useful for checking whether margins, captions, and text flow remain balanced when the image moves to the opposite side of the article.

Grid, Feature, and Mosaic

These blocks use quartz/styles/images-layouts.scss.

Default card image layout
Default card
Square cropped image layout
Square crop
Wide cropped image layout
16:9 crop
Full width feature image layout
Full-width feature image
Contained feature image layout
Contained feature image
Viewport wide image layout
Viewport-wide image, ignoring Quartz sidebars and body width
Scaled viewport wide image layout
Viewport-wide container with image width set to 72%
Percentage scaled image layout
Image scaled to 65% inside the article body
Custom fixed size image layout
Custom width and height using CSS variables
Large mosaic image layout
Large tile
Small mosaic image layout one
Small tile
Small mosaic image layout two
Small tile