Quartz

https://quartz.jzhao.xyz
Admin
Quartz is a fast, batteries-included static-site generator that transforms Markdown content into...
Tokens:59,606
Snippets:933
Trust Score:8.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run Quartz Locally with Docker

Source: https://quartz.jzhao.xyz/features/docker-support

Use this command to start a Docker container for local preview of your Quartz site. Ensure you have Docker installed and the Quartz image built.

```bash
docker run --rm -itp 8080:8080 -p 3001:3001 -v ./content:/usr/src/app/content $(docker build -q .)
```

--------------------------------

### Perform Clean Plugin Installation

Source: https://quartz.jzhao.xyz/cli/plugin

Installs plugins, skipping existing directories to ensure a fresh setup. Useful for resolving installation issues.

```bash
npx quartz plugin install --clean
```

--------------------------------

### Preview Installation from Configuration

Source: https://quartz.jzhao.xyz/cli/plugin

Shows which plugins would be installed or removed based on the `quartz.config.yaml` without applying changes.

```bash
npx quartz plugin install --from-config --dry-run
```

--------------------------------

### Install Plugins from Configuration

Source: https://quartz.jzhao.xyz/cli/plugin

Synchronizes installed plugins with the `quartz.config.yaml` file. Installs missing plugins and removes unconfigured ones.

```bash
npx quartz plugin install --from-config
```

--------------------------------

### Clone and Install Plugin Template

Source: https://quartz.jzhao.xyz/advanced/creating-components

Use this command to clone the official plugin template and install its dependencies to start building a new component plugin.

```bash
git clone https://github.com/quartz-community/plugin-template.git my-component
cd my-component
npm install
```

--------------------------------

### Install Dependencies

Source: https://quartz.jzhao.xyz/getting-started/installation

Commands to install project dependencies. Use npm ci for reproducible installs on existing projects.

```bash
npm i
```

```bash
npm ci
```

--------------------------------

### Install Plugin Packages

Source: https://quartz.jzhao.xyz/getting-started/upgrading

Use npm to install individual or multiple community plugins.

```bash
npm install @quartz-community/syntax-highlighting
```

```bash
npm install @quartz-community/created-modified-date @quartz-community/syntax-highlighting @quartz-community/obsidian-flavored-markdown @quartz-community/github-flavored-markdown @quartz-community/table-of-contents @quartz-community/crawl-links @quartz-community/description @quartz-community/latex @quartz-community/quartz-fonts @quartz-community/remove-draft @quartz-community/alias-redirects @quartz-community/content-index @quartz-community/favicon @quartz-community/og-image @quartz-community/cname @quartz-community/canvas-page @quartz-community/content-page @quartz-community/folder-page @quartz-community/tag-page @quartz-community/explorer @quartz-community/graph @quartz-community/search @quartz-community/backlinks @quartz-community/article-title @quartz-community/content-meta @quartz-community/page-title @quartz-community/darkmode @quartz-community/reader-mode @quartz-community/breadcrumbs @quartz-community/footer @quartz-community/spacer @quartz-community/bases-page @quartz-community/note-properties @quartz-community/unlisted-pages @quartz-community/encrypted-pages
```

--------------------------------

### Install Backlinks Plugin

Source: https://quartz.jzhao.xyz/features/backlinks

Use this command to install the backlinks plugin for Quartz. Ensure you have npx installed.

```bash
npx quartz plugin add github:quartz-community/backlinks
```

--------------------------------

### Show All Elements Example

Source: https://quartz.jzhao.xyz/features/explorer

Example to override the default filter and show all elements in the explorer.

```typescript
ExternalPlugin.Explorer({
  filterFn: undefined, // apply no filter function, every file and folder will visible
})
```

--------------------------------

### Install Plugins from Lockfile

Source: https://quartz.jzhao.xyz/cli/plugin

Installs all plugins defined in the `quartz.lock.json` file. This is the default behavior for ensuring project consistency.

```bash
npx quartz plugin install
```

--------------------------------

### Install Plugins

Source: https://quartz.jzhao.xyz/getting-started/installation

Commands to install plugins defined in the configuration or update them to the latest versions.

```bash
npx quartz plugin install --from-config
```

```bash
npx quartz plugin install --latest
```

--------------------------------

### Preview Plugin Installation Changes

Source: https://quartz.jzhao.xyz/cli/plugin

Simulates the installation or removal of plugins without making any actual changes to the file system. Useful for planning.

```bash
npx quartz plugin install --dry-run
```

--------------------------------

### Initialize a new plugin repository

Source: https://quartz.jzhao.xyz/advanced/making-plugins

Commands to clone the plugin template and install dependencies.

```bash
# Use the plugin template to create a new repository on GitHub
# Then clone it locally
git clone https://github.com/your-username/my-plugin.git
cd my-plugin
npm install
```

--------------------------------

### Initialize a new Quartz site

Source: https://quartz.jzhao.xyz/

Commands to clone the repository, install dependencies, and initialize the site configuration.

```bash
# 1. Clone the Quartz repository
git clone https://github.com/jackyzha0/quartz.git
cd quartz
 
# 2. Install dependencies
npm i
 
# 3. Initialize your site (choose a template, set your base URL, import content)
npx quartz create
 
# 4. Install plugins referenced by your chosen template
npx quartz plugin install --from-config
 
# 5. Preview your site locally
npx quartz build --serve
```

--------------------------------

### Setup an existing Quartz repository

Source: https://quartz.jzhao.xyz/

Commands to clone an existing repository and prepare the environment on a new machine.

```bash
git clone https://github.com/<your-username>/<your-repo>.git
cd <your-repo>
npm ci
npx quartz plugin install
npx quartz build --serve
```

--------------------------------

### Preview Site Locally

Source: https://quartz.jzhao.xyz/getting-started/installation

Starts the development server to preview the site at http://localhost:8080.

```bash
npx quartz build --serve
```

--------------------------------

### Install Custom Component via CLI

Source: https://quartz.jzhao.xyz/advanced/creating-components

Users can install custom components from a repository using the Quartz CLI command.

```bash
npx quartz plugin add github:your-username/my-component
```

--------------------------------

### Install Plugins with Lower Concurrency

Source: https://quartz.jzhao.xyz/troubleshooting

When `plugin install` hangs or causes Out-Of-Memory errors on low-end hardware, reduce the parallelism. This command installs plugins one at a time.

```bash
# Install one plugin at a time (safest, slowest)
npx quartz plugin install --latest -c 1

# Two at a time — usually works on 4 GB machines
npx quartz plugin install --latest --concurrency 2
```

--------------------------------

### List Installed Plugins

Source: https://quartz.jzhao.xyz/cli/plugin

Lists all plugins currently installed in the project along with their versions.

```bash
npx quartz plugin list
```

--------------------------------

### StackedPages Plugin Configuration Example

Source: https://quartz.jzhao.xyz/plugins/stackedpages

Example configuration for the StackedPages plugin in a quartz.config.yaml file. This shows how to enable the plugin and set its options.

```yaml
```yaml
- source: github:quartz-community/stacked-pages
  enabled: true
  layout:
    position: afterBody
    priority: 50
    display: all
  options:
    maxTabs: 8
    mobileBreakpoint: 800
    showSpines: true
    animateTransitions: true
```
```

--------------------------------

### Install Explorer Plugin

Source: https://quartz.jzhao.xyz/features/explorer

Install the Explorer community plugin from GitHub using npm. Ensure you use the --legacy-peer-deps flag if necessary.

```bash
npm install github:quartz-community/explorer --legacy-peer-deps
```

--------------------------------

### Install Quartz TUI Plugin

Source: https://quartz.jzhao.xyz/cli/tui

Run this command to add the TUI plugin to your Quartz project. Ensure you have Bun installed.

```bash
npx quartz plugin add github:quartz-community/tui
```

--------------------------------

### Quartz CLI Quick Reference Commands

Source: https://quartz.jzhao.xyz/cli

A table summarizing common Quartz CLI commands, their descriptions, and example usage.

```bash
npx quartz create
```

```bash
npx quartz build
```

```bash
npx quartz sync
```

```bash
npx quartz upgrade
```

```bash
npx quartz plugin list
```

```bash
npx quartz tui
```

--------------------------------

### Install a Plugin via CLI

Source: https://quartz.jzhao.xyz/advanced/making-plugins

Use the npx command to clone a plugin and update project configuration files.

```bash
# In your Quartz project
npx quartz plugin add github:your-username/my-plugin
```

--------------------------------

### Install Search Plugin

Source: https://quartz.jzhao.xyz/plugins/search

Command to install the Quartz search plugin using npx. This command adds the plugin from the specified GitHub repository.

```bash
npx quartz plugin add github:quartz-community/search

```

--------------------------------

### Install Reader Mode Plugin

Source: https://quartz.jzhao.xyz/features/reader-mode

To install the Reader Mode plugin, use the npx quartz plugin add command with the plugin's source.

```bash
npx quartz plugin add github:quartz-community/reader-mode
```

--------------------------------

### Install Missing Plugins from Config

Source: https://quartz.jzhao.xyz/advanced/making-plugins

Automatically install plugins referenced in the configuration file that are missing from the lockfile.

```bash
# Install all config-referenced plugins missing from the lockfile
npx quartz plugin install --from-config
 
# Preview first without making changes
npx quartz plugin install --from-config --dry-run
```

--------------------------------

### Plugin CLI Commands for Quartz

Source: https://quartz.jzhao.xyz/advanced/architecture

Commands to manage community plugins in a Quartz project. Use 'add' to install, 'install --latest' to update, 'install --clean' to restore from lockfile, and 'remove' to uninstall.

```bash
npx quartz plugin add github:quartz-community/<name>
```

```bash
npx quartz plugin install --latest
```

```bash
npx quartz plugin install --clean
```

```bash
npx quartz plugin remove <name>
```

--------------------------------

### Add Plugin from Git Repository

Source: https://quartz.jzhao.xyz/cli/plugin

Installs a new plugin by cloning it from a specified Git repository URL.

```bash
npx quartz plugin add github:username/repo
```

--------------------------------

### Install Google Fonts metadata package

Source: https://quartz.jzhao.xyz/plugins/fonts

Install the optional metadata package to enable build-time validation of font families and weights.

```bash
npm install google-font-metadata
```

--------------------------------

### Install bases-page plugin

Source: https://quartz.jzhao.xyz/features/bases

Use this command to add the bases-page plugin to your Quartz project.

```bash
npx quartz plugin add github:quartz-community/bases-page
```

--------------------------------

### Install Recent Notes Plugin

Source: https://quartz.jzhao.xyz/features/recent-notes

Install the Recent Notes plugin using npx. This command adds the plugin to your project.

```bash
npx quartz plugin add github:quartz-community/recent-notes
```

--------------------------------

### Manage Plugins via CLI

Source: https://quartz.jzhao.xyz/configuration

Commands for installing, syncing, and removing community plugins.

```bash
npx quartz plugin add github:quartz-community/explorer
```

```bash
npx quartz plugin install --from-config
```

```bash
npx quartz plugin prune
```

--------------------------------

### Enable a Plugin

Source: https://quartz.jzhao.xyz/cli/plugin

Activates a plugin by updating its status in `quartz.config.yaml`. The plugin's files remain installed.

```bash
npx quartz plugin enable plugin-name
```

--------------------------------

### Define Plugin Sources

Source: https://quartz.jzhao.xyz/configuration

Examples of using simple string versus object formats for plugin sources.

```yaml
plugins:
  - source: github:quartz-community/explorer
    enabled: true
```

```yaml
plugins:
  - source:
      repo: "https://github.com/user/repo.git"
      subdir: plugin
      ref: main
      name: my-plugin
    enabled: true
```

```yaml
plugins:
  - source:
      name: quartz-themes
      repo: "https://github.com/saberzero1/quartz-themes.git"
      subdir: plugin
    enabled: true
    options:
      theme: "tokyo-night"
      mode: both
```

--------------------------------

### Install Graph View Plugin

Source: https://quartz.jzhao.xyz/features/graph-view

Install the Graph View community plugin using npm. Ensure to use legacy peer dependencies if required.

```bash
npm install github:quartz-community/graph --legacy-peer-deps
```

--------------------------------

### Install Latest Plugin Versions

Source: https://quartz.jzhao.xyz/cli/plugin

Fetches and installs the latest available versions of plugins from their remote sources, overriding versions specified in the lockfile.

```bash
npx quartz plugin install --latest
```

--------------------------------

### Install Search Plugin

Source: https://quartz.jzhao.xyz/features/full-text-search

Use this command to add the search plugin to your Quartz project. Ensure you are in your project's root directory.

```bash
npx quartz plugin add github:quartz-community/search
```

--------------------------------

### Recommended CI/CD Pattern for Quartz v5

Source: https://quartz.jzhao.xyz/getting-started/migrating

This pattern shows how to cache dependencies and Quartz plugins in a GitHub Actions workflow to optimize build times. It includes steps for installing dependencies, installing Quartz plugins, and building the project.

```yaml
- name: Cache dependencies
  uses: actions/cache@v5
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

- name: Cache Quartz plugins
  uses: actions/cache@v5
  with:
    path: .quartz/plugins
    key: ${{ runner.os }}-plugins-${{ hashFiles('quartz.lock.json') }}
    restore-keys: |
      ${{ runner.os }}-plugins-

- run: npm ci

- name: Install Quartz plugins
  run: npx quartz plugin install

- name: Build Quartz
  run: npx quartz build
```

--------------------------------

### Add Plugin from Local Directory

Source: https://quartz.jzhao.xyz/cli/plugin

Installs a plugin from a local file system path, useful for development or air-gapped environments. Local plugins are symlinked.

```bash
npx quartz plugin add ./path/to/my-plugin
```

```bash
npx quartz plugin add ../sibling-plugin
```

```bash
npx quartz plugin add /absolute/path/to/plugin
```

--------------------------------

### Install CanvasPage Plugin

Source: https://quartz.jzhao.xyz/canvas.canvas

Use this command to add the CanvasPage plugin to your Quartz project.

```bash
npx quartz plugin add github:quartz-community/canvas-page
```

--------------------------------

### Configure Plugin Layouts and Groups

Source: https://quartz.jzhao.xyz/layout

Example configuration for positioning plugins and defining layout groups and page-type overrides in quartz.config.yaml.

```yaml
plugins:
  - source: github:quartz-community/explorer
    enabled: true
    layout:
      position: left
      priority: 50
  - source: github:quartz-community/graph
    enabled: true
    layout:
      position: right
      priority: 10
  - source: github:quartz-community/search
    enabled: true
    layout:
      position: left
      priority: 20
  - source: github:quartz-community/backlinks
    enabled: true
    layout:
      position: right
      priority: 30
  - source: github:quartz-community/article-title
    enabled: true
    layout:
      position: beforeBody
      priority: 10
  - source: github:quartz-community/content-meta
    enabled: true
    layout:
      position: beforeBody
      priority: 20
  - source: github:quartz-community/tag-list
    enabled: true
    layout:
      position: beforeBody
      priority: 30
  - source: github:quartz-community/darkmode
    enabled: true
    layout:
      position: header
      priority: 10
  - source: github:quartz-community/footer
    enabled: true
    options:
      links:
        GitHub: https://github.com/jackyzha0/quartz
        Discord Community: https://discord.gg/cRFFHYye7t
    layout:
      position: footer
      priority: 50
 
layout:
  groups:
    toolbar:
      direction: row
      gap: 0.5rem
  byPageType:
    content: {}
    folder:
      exclude:
        - reader-mode
      positions:
        right: []
    tag:
      exclude:
        - reader-mode
      positions:
        right: []
    "404":
      positions:
        beforeBody: []
        left: []
        right: []
```

--------------------------------

### Configure Component in quartz.config.yaml

Source: https://quartz.jzhao.xyz/advanced/creating-components

Add installed components to the Quartz configuration file, specifying options, position, and priority.

```yaml
plugins:
  - source: github:your-username/my-component
    enabled: true
    options:
      favouriteNumber: 42
    layout:
      position: left
      priority: 60
```

--------------------------------

### Per-Note Frontmatter Override Example

Source: https://quartz.jzhao.xyz/plugins/frontmatter

This example demonstrates how to control the frontmatter properties panel on a per-note basis using frontmatter keys. It forces the panel to show and start expanded, overriding global settings.

```yaml
---
title: My Note
quartz-properties: true
quartz-properties-collapse: false
---
```

--------------------------------

### Install GitHub Flavored Markdown Plugin

Source: https://quartz.jzhao.xyz/plugins/githubflavoredmarkdown

Use this command to add the GitHub Flavored Markdown plugin to your Quartz project. This enables GFM features.

```bash
npx quartz plugin add github:quartz-community/github-flavored-markdown
```

--------------------------------

### Initialize Quartz Site

Source: https://quartz.jzhao.xyz/getting-started/installation

Launches the interactive CLI wizard to configure the site template, content strategy, and deployment settings.

```bash
npx quartz create
```

--------------------------------

### Add a Quartz Community Plugin

Source: https://quartz.jzhao.xyz/getting-started/whats-new

Install community plugins using npx quartz. This allows for independent versioning and community contributions.

```bash
npx quartz plugin add github:quartz-community/explorer
```

--------------------------------

### Create Quartz Project for a Blog

Source: https://quartz.jzhao.xyz/cli/create

Sets up a new Quartz project configured for a blog, enabling recent notes and comments, and initializing with a new content strategy.

```bash
npx quartz create --template blog --strategy new --baseUrl myblog.github.io
```

--------------------------------

### View Quartz sync help

Source: https://quartz.jzhao.xyz/setting-up-your-github-repository

Access the help menu to view available flags and configuration options for the sync command.

```bash
npx quartz sync --help
```

--------------------------------

### Remove Installed Plugin

Source: https://quartz.jzhao.xyz/cli/plugin

Removes a previously installed plugin from the project.

```bash
npx quartz plugin remove plugin-name
```

--------------------------------

### Development Mode with Serve and Watch

Source: https://quartz.jzhao.xyz/cli/build

Starts a local development server and automatically watches for file changes, rebuilding the site as needed. This is the most common way to preview your site during development.

```bash
npx quartz build --serve
```

--------------------------------

### Custom Filter Function Example

Source: https://quartz.jzhao.xyz/features/explorer

Example of filtering out specific elements by their display name.

```typescript
ExternalPlugin.Explorer({
  filterFn: (node) => {
    // set containing names of everything you want to filter out
    const omit = new Set(["authoring content", "tags", "advanced"])
 
    // can also use node.slug or by anything on node.data
    // note that node.data is only present for files that exist on disk
    // (e.g. implicit folder nodes that have no associated index.md)
    return !omit.has(node.displayName.toLowerCase())
  },
})
```

--------------------------------

### Perform First Sync (Skip Pull)

Source: https://quartz.jzhao.xyz/cli/sync

Execute this command when setting up a new repository to skip the pull step.

```bash
npx quartz sync --no-pull
```

--------------------------------

### Filter Files by Tag Example

Source: https://quartz.jzhao.xyz/features/explorer

Example of filtering files based on their tags, excluding those with the 'explorerexclude' tag.

```typescript
ExternalPlugin.Explorer({
  filterFn: (node) => {
    // exclude files with the tag "explorerexclude"
    return node.data?.tags?.includes("explorerexclude") !== true
  },
})
```

--------------------------------

### Custom Map Function Example

Source: https://quartz.jzhao.xyz/features/explorer

Example of using a map function to convert display names to uppercase.

```typescript
ExternalPlugin.Explorer({
  mapFn: (node) => {
    node.displayName = node.displayName.toUpperCase()
    return node
  },
})
```

--------------------------------

### Custom Sort Function Example

Source: https://quartz.jzhao.xyz/features/explorer

Example of providing a custom sort function to the explorer to sort alphabetically.

```typescript
ExternalPlugin.Explorer({
  sortFn: (a, b) => {
    return a.displayName.localeCompare(b.displayName)
  },
})
```

--------------------------------

### Add Quartz Plugin

Source: https://quartz.jzhao.xyz/troubleshooting

Install a specific plugin by its GitHub repository. This is useful when a plugin is referenced in quartz.ts but not installed.

```bash
npx quartz plugin add github:quartz-community/plugin-name
```

--------------------------------

### Install Specific Plugins to Latest Version

Source: https://quartz.jzhao.xyz/cli/plugin

Installs or updates specific listed plugins to their latest available versions.

```bash
npx quartz plugin install --latest plugin-a plugin-b
```

--------------------------------

### Basic Site Build

Source: https://quartz.jzhao.xyz/cli/build

Generates your static site into the default `public` folder. This is the most basic usage of the build command.

```bash
npx quartz build
```

--------------------------------

### Create Quartz Project with Obsidian Template

Source: https://quartz.jzhao.xyz/cli/create

Initializes a Quartz project using the Obsidian template, employing symbolic links for content synchronization, and specifying the source directory of an Obsidian vault.

```bash
npx quartz create --template obsidian --strategy symlink --source ~/Documents/MyVault
```

--------------------------------

### Inline Math Example

Source: https://quartz.jzhao.xyz/features/latex

Render inline math by enclosing expressions in single dollar signs ($). For example, `$e^{i\pi} = -1$`.

```markdown
`$e^{i\pi} = -1$` produces eiπ=−1
```

--------------------------------

### Fetch and Checkout v5 Branch

Source: https://quartz.jzhao.xyz/getting-started/migrating

Add the official Quartz repository as a remote, fetch the v5 branch, create a local v5 branch, install dependencies, and push it to your repository.

```bash
# Add the official Quartz repository as a remote called "upstream" (skip if already set)
git remote add upstream https://github.com/jackyzha0/quartz.git

# Fetch the v5 branch from the official repository
git fetch upstream v5

# Create a local v5 branch from the official one
git checkout -b v5 upstream/v5

# Install dependencies
npm i

# Push v5 to your GitHub repository
git push -u origin v5
```

--------------------------------

### Run Quartz Upgrade

Source: https://quartz.jzhao.xyz/cli/upgrade

Execute the command to upgrade the Quartz framework to the latest version.

```bash
npx quartz upgrade
```

--------------------------------

### Quartz CLI Help Command

Source: https://quartz.jzhao.xyz/cli

Display help information for the Quartz CLI and specific commands. Use the --help flag to see all available options.

```bash
npx quartz --help
npx quartz build --help
```

--------------------------------

### Example BibTex Entry

Source: https://quartz.jzhao.xyz/features/citations

This is an example of an article entry in a BibTex file. It includes essential fields like title, author, year, journal, and URL.

```bibtex
@article{templeton2024scaling,
  title={Scaling Monosemanticity: Extracting Interpretable Features from Claude 3 Sonnet},
  author={Templeton, Adly and Conerly, Tom and Marcus, Jonathan and Lindsey, Jack and Bricken, Trenton and Chen, Brian and Pearce, Adam and Citro, Craig and Ameisen, Emmanuel and Jones, Andy and Cunningham, Hoagy and Turner, Nicholas L and McDougall, Callum and MacDiarmid, Monte and Freeman, C. Daniel and Sumers, Theodore R. and Rees, Edward and Batson, Joshua and Jermyn, Adam and Carter, Shan and Olah, Chris and Henighan, Tom},
  year={2024},
  journal={Transformer Circuits Thread},
  url={https://transformer-circuits.pub/2024/scaling-monosemanticity/index.html}
}
```

--------------------------------

### Install Plugins with Limited Concurrency

Source: https://quartz.jzhao.xyz/cli/plugin

Use the --concurrency flag to limit parallel plugin installations on low-end hardware. Set to 1 for the safest, slowest option, or 2 for a balance on machines with 4GB RAM.

```bash
npx quartz plugin install --latest -c 1
```

```bash
npx quartz plugin install --latest --concurrency 2
```

--------------------------------

### Update Plugins CLI

Source: https://quartz.jzhao.xyz/getting-started/upgrading

Updates installed plugins to their latest versions.

```bash
npx quartz plugin install --latest
```

--------------------------------

### View Plugin Configuration

Source: https://quartz.jzhao.xyz/cli/plugin

Displays the current configuration settings for a specified plugin.

```bash
npx quartz plugin config plugin-name
```

--------------------------------

### New Quartz Plugin Command Equivalents

Source: https://quartz.jzhao.xyz/cli/plugin

This table shows the new equivalent commands for managing Quartz plugins, replacing deprecated commands. These new commands offer more granular control and clearer intent.

```bash
npx quartz plugin install --clean

```

```bash
npx quartz plugin install --latest

```

```bash
npx quartz plugin install --latest my-plugin

```

```bash
npx quartz plugin install --latest --dry-run

```

```bash
npx quartz plugin install --from-config

```

```bash
npx quartz plugin install --from-config --dry-run

```

--------------------------------

### Add a Community Plugin

Source: https://quartz.jzhao.xyz/community

Use this command to install third-party plugins that extend Quartz functionality. Replace `<github-url>` with the plugin's GitHub repository URL.

```bash
npx quartz plugin add <github-url>
```

--------------------------------

### JavaScript Word Highlighting Example

Source: https://quartz.jzhao.xyz/features/syntax-highlighting

A JavaScript code snippet demonstrating word highlighting for 'useState'.

```javascript
const [age, setAge] = useState(50)
const [name, setName] = useState("Taylor")
```

--------------------------------

### Add and Enable a New Plugin

Source: https://quartz.jzhao.xyz/cli/plugin

A common workflow to add a new plugin from a repository and then enable it for use in the project.

```bash
npx quartz plugin add github:quartz-community/example
```

```bash
npx quartz plugin enable example
```

--------------------------------

### CanvasPage API Function

Source: https://quartz.jzhao.xyz/canvas.canvas

The ExternalPlugin.CanvasPage() function is used to render canvas pages. Ensure the plugin is installed.

```javascript
ExternalPlugin.CanvasPage()
```

--------------------------------

### Caddy Server Configuration

Source: https://quartz.jzhao.xyz/hosting

Configure Caddy to serve static files, handle .html extensions, and enable gzip compression.

```caddy
example.com {
    root * /path/to/quartz/public
    try_files {path} {path}.html {path}/ =404
    file_server
    encode gzip
 
    handle_errors {
        rewrite * /{err.status_code}.html
        file_server
    }
}
```

--------------------------------

### Run Regular Sync

Source: https://quartz.jzhao.xyz/cli/sync

Use this command for the most common scenario to pull, commit, and push all changes.

```bash
npx quartz sync
```

--------------------------------

### Sequence Diagram Example

Source: https://quartz.jzhao.xyz/features/mermaid-diagrams

Demonstrates how to create a sequence diagram using Mermaid syntax within a code block. Ensure the Mermaid plugin is enabled and configured correctly in Obsidian.

```markdown
```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!
```
```
Tokens:
Raw