Quartz MKD

Callout

Default title

Can callouts be nested?

Yes!, they can. And collapsed!

You can even use multiple layers of nesting.

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"

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

Mermaid

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Syntax Highlighting

title…

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

export function trimPathSuffix(fp: string): string {
  fp = clientSideSlug(fp)
  let [cleanPath, anchor] = fp.split("#", 2)
  anchor = anchor === undefined ? "" : "#" + anchor
 
  return cleanPath + anchor
}

Wikilinks

• ![[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

A caption callout nested in the grid.

Captions

Caption

[!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.
 

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

Type	Name
Row	Row
Row	Row

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]]

Attribute	Description
clean	Removes border to hide embed style
left	Float
right	Floats 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""