Style Reference

This page serves as a comprehensive preview of all styled elements. Every theme preview site includes this page to showcase how the theme renders each element.

---

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

Text Formatting

Text text external link text internal link text bold text text italic text text bold and italic text text highlighted text text strikethrough text text.¹

Style	Syntax	Example	Output
Bold	** ** or __ __	**Bold text**	Bold text
Italic	* * or _ _	*Italic text*	Italic text
Strikethrough	~~ ~~	~~Striked out text~~	Striked out text
Highlight	== ==	==Highlighted text==	Highlighted text
Bold and nested italic	** ** and _ _	**Bold text and _nested italic_ text**	Bold text and nested italic text
Bold and italic	*** *** or ___ ___	***Bold and italic text***	Bold and italic text

---

Blockquotes

Human beings face ever more complex and urgent problems, and their effectiveness in dealing with these problems is a matter that is critical to the stability and continued progress of society.

• Doug Engelbart, 1961

---

Lists

Unordered List

• First list item
• Second list item
• Third list item

Ordered List

1. First list item
2. Second list item
3. Third list item

Nested List

1. First list item
   1. Ordered nested list item
2. Second list item
   • Unordered nested list item

Task List

• This is a completed task.
• This is an incomplete task.
• Question
• Cancelled
• Deferred

---

Callouts

Note

Aliases: “note”

Abstract

Aliases: “abstract”, “summary”, “tldr”

Info

Aliases: “info”

Todo

Aliases: “todo”

Tip

Aliases: “tip”, “hint”, “important”

Success

Aliases: “success”, “check”, “done”

Question

Aliases: “question”, “help”, “faq”

Warning

Aliases: “warning”, “attention”, “caution”

Failure

Aliases: “failure”, “missing”, “fail”

Danger

Aliases: “danger”, “error”

Bug

Aliases: “bug”

Example

Aliases: “example”

Quote

Aliases: “quote”, “cite”

---

Code

Inline Code

Text inside backticks on a line will be formatted like code.

Code Blocks

cd ~/Desktop

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: "#foo" })
  }
}

Syntax Highlighting Samples

JavaScript

// Single-line comment
/* Multi-line comment */
const keyword = "string literal"
let variable = "another string"
function functionName(param, defaultVal = 42) {
  return param.property + defaultVal
}
class ClassName extends BaseClass {
  #privateField = true
  constructor() {
    super()
    this.value = null
  }
  async method() {
    const result = await fetch("/api")
    if (result.ok && !result.error) {
      console.log(`template ${literal}`)
    }
  }
}
import { named } from "package"
export default ClassName
const regex = /pattern/gi
const num = 3.14e-10
const bool = true
const nil = null
const undef = undefined
const arr = [1, 2, 3]
const obj = { key: "value" }

Python

# Comment
"""Docstring"""
import os
from pathlib import Path
 
def function_name(param: str, count: int = 0) -> bool:
    variable = "string"
    number = 42
    result = variable.upper() + str(number)
    return len(result) > count
 
class ClassName(BaseClass):
    class_var: str = "default"
 
    def __init__(self, value: int):
        super().__init__()
        self.value = value
        self._private = None
 
    @property
    def computed(self) -> float:
        return self.value * 3.14
 
    @staticmethod
    def static_method():
        pass
 
for i in range(10):
    if i % 2 == 0:
        print(f"even: {i}")
    elif i > 7:
        break
    else:
        continue
 
try:
    raise ValueError("error message")
except (TypeError, ValueError) as e:
    print(e)
finally:
    pass
 
lambda x: x * 2
[x for x in range(5) if x > 2]
{k: v for k, v in enumerate("abc")}

TypeScript

// Types and interfaces
interface Config {
  readonly name: string
  value: number | null
  optional?: boolean
}
 
type Result<T> = {
  data: T
  error?: Error
}
 
enum Status {
  Active = "active",
  Inactive = "inactive",
}
 
const generic = <T extends Config>(input: T): Result<T> => {
  return { data: input }
}
 
async function* asyncGenerator(): AsyncGenerator<number> {
  yield 1
  yield 2
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body class="container" id="main" data-theme="dark">
    <h1>Heading</h1>
    <p>Paragraph with <strong>bold</strong> and <em>italic</em>.</p>
    <a href="https://example.com" target="_blank">Link</a>
    <img src="image.png" alt="Description" />
    <!-- Comment -->
    <script src="app.js" defer></script>
  </body>
</html>

CSS

/* Comment */
:root {
  --primary: #ff7b72;
  --spacing: 1rem;
}
 
.selector,
#id-selector,
element[attr="value"] {
  color: var(--primary);
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  margin: 0 auto;
  display: flex;
  transition: all 0.3s ease;
}
 
.parent > .child:hover::before {
  content: "text";
  opacity: 0.8;
}
 
@media (max-width: 768px) {
  .responsive {
    flex-direction: column;
  }
}
 
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Rust

// Comment
use std::collections::HashMap;
 
#[derive(Debug, Clone)]
struct Config {
    name: String,
    value: i64,
    active: bool,
}
 
impl Config {
    fn new(name: &str) -> Self {
        Self {
            name: name.to_string(),
            value: 0,
            active: true,
        }
    }
 
    fn process(&self) -> Result<String, Box<dyn std::error::Error>> {
        let mut map: HashMap<&str, i64> = HashMap::new();
        map.insert("key", self.value);
 
        match self.value {
            0 => Ok("zero".to_string()),
            1..=10 => Ok(format!("small: {}", self.value)),
            _ => Err("too large".into()),
        }
    }
}
 
fn main() {
    let config = Config::new("test");
    let numbers: Vec<i64> = (0..10).filter(|x| x % 2 == 0).collect();
    println!("{:?} {:?}", config, numbers);
}

JSON

{
  "string": "value",
  "number": 42,
  "float": 3.14,
  "boolean": true,
  "null": null,
  "array": [1, "two", false],
  "object": {
    "nested": "value"
  }
}

Shell

#!/bin/bash
# Comment
VARIABLE="value"
readonly CONSTANT=42
 
function greet() {
  local name="${1:-World}"
  echo "Hello, ${name}!"
  return 0
}
 
if [[ -f "$FILE" ]]; then
  cat "$FILE" | grep -E "pattern" | sort -u
elif [[ -d "$DIR" ]]; then
  find "$DIR" -name "*.txt" -exec wc -l {} \;
fi
 
for item in "${array[@]}"; do
  echo "$item"
done
 
greet "User" && echo "Success" || echo "Failed"

---

Tables

Basic Table

Column 1	Column 2	Column 3	Column 4
Row 1 A	Row 1 B	Row 1 C	Row 1 D
Row 2 A	Row 2 B	Row 2 C	Row 2 D
Row 3 A	Row 3 B	Row 3 C	Row 3 D
Row 4 A	Row 4 B	Row 4 C	Row 4 D

Aligned Table

Left Aligned	Center Aligned	Right Aligned
Left	Center	Right
Text	Text	Text

Table with Formatting

Name	Description	Status
Bold	This has italic text	Active
Code	This has highlighted txt	Inactive
Link	This has strikethrough	Pending

Wide Table

A	B	C	D	E	F	G	H	I	J
1	2	3	4	5	6	7	8	9	10

---

Math

$$\left|\begin{array}{cc}a& b\\ c& d\end{array}\right|=ad-bc$$

This is an inline math expression: $e^{2i\pi }=1$.

---

Mermaid Diagrams

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!

graph TD

Biology --> Chemistry

class Biology,Chemistry internal-link;

---

Embeds and Transclusions

Welcome to Quartz 5

Quartz is a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites. Thousands of students, developers, and teachers are already using Quartz to publish personal notes, websites, and digital gardens to the web.

Getting Started

Quartz requires at least Node v22 and npm v10.9.2 to function correctly. Ensure you have this installed on your machine before continuing.

New to Quartz?

1. Set up your repository — Fork and clone the Quartz template
2. Initialize — Run npx quartz create to choose a template and configure your site
3. Build — Preview your site locally with npx quartz build --serve
4. Deploy — Host your site for free on GitHub Pages, Cloudflare, or Netlify

Returning User?

If you’ve already set up Quartz and are cloning your repository on a new machine:

npx quartz plugin install
npx quartz build --serve

🔧 Features

• Obsidian compatibility, full-text search, graph view, wikilinks, transclusions, Backlinks, Latex, syntax highlighting, popover previews, Docker Support, internationalization, comments and many more right out of the box
• Hot-reload on configuration edits and incremental rebuilds for content edits
• Simple JSX layouts and page components
• Ridiculously fast page loads and tiny bundle sizes
• Fully-customizable parsing, filtering, and page generation through plugins

For a comprehensive list of features, visit the features page. You can read more about the why behind these features on the philosophy page and a technical overview on the architecture page.

🚧 Troubleshooting + Updating

Having trouble with Quartz? Try searching for your issue using the search feature or check the troubleshooting page. If you haven’t already, upgrade to the newest version of Quartz to see if this fixes your issue.

If you’re still having trouble, feel free to submit an issue if you feel you found a bug or ask for help in our Discord Community. You can also browse the community page for third-party plugins and resources.

Link to original

A garden should be your own

At its core, Quartz is designed to be easy to use enough for non-technical people to get going but also powerful enough that senior developers can tweak it to work how they’d like it to work.

1. If you like the default configuration of Quartz and just want to change the content, the only thing that you need to change is the contents of the content folder.
2. If you’d like to make basic configuration tweaks but don’t want to edit source code, one can tweak the plugins and components in quartz.config.yaml in a guided manner to their liking.
3. If you’d like to tweak the actual source code of the underlying plugins, components, or even build process, Quartz purposefully ships its full source code to the end user to allow customization at this level too.

Most software either confines you to either

1. Makes it easy to tweak content but not the presentation
2. Gives you too many knobs to tune the presentation without good opinionated defaults

Quartz should feel powerful but ultimately be an intuitive tool fully within your control. It should be a piece of agentic software. Ultimately, it should have the right affordances to nudge users towards good defaults but never dictate what the ‘correct’ way of using it is.

Link to original

---

Media

Image with Caption

This is a caption for the image

---

Interactive Elements

Details / Summary (Collapsible)

Click to expand

This is the hidden content that appears when expanded.

• Item 1
• Item 2
• Item 3

Keyboard Input

Press Ctrl + C to copy.

Abbreviations

The HTML specification is maintained by the W3C.

Superscript and Subscript

H₂O is water. E = mc².

Definition Lists

Term 1

Definition for term 1

Term 2

Definition for term 2

---

Checkboxes

Standard

• Unchecked
• Checked
• In progress
• Cancelled
• Deferred
• Question
• Important

Special Characters

• Star
• Plus
• Equal
• Tilde
• Backtick
• Hashtag
• Scheduled
• Dollar
• At
• Ampersand

Letters (Lowercase)

• a
• b
• c
• d
• e
• f
• i
• l
• p
• u
• w

Letters (Uppercase)

• A
• B
• C
• D
• I
• N
• R
• S
• W

Numbers

• zero
• one
• two
• three
• four
• five
• six
• seven
• eight
• nine

---

Links and Backlinks

• philosophy - Philosophy page
• hosting - Hosting page
• non-existent-page - Unresolved link

---

Footnotes

---

Horizontal Rules

---

---

---

Footnotes

1. This is a footnote. ↩