Skip to main content
Transformer plugins modify your content during the build process. They parse frontmatter, transform Markdown syntax, add features like syntax highlighting and LaTeX support, and process links.

​
How Transformers Work

Transformers operate on the content using the unified ecosystem:
  1. textTransform - Modify raw text before parsing
  2. markdownPlugins - Transform Markdown AST (using remark)
  3. htmlPlugins - Transform HTML AST (using rehype)
Transformers run sequentially in the order they’re defined in quartz.config.ts.

​
Core Transformers

​
FrontMatter

Parses YAML or TOML frontmatter from Markdown files. 
Plugin.FrontMatter({
  delimiters: "---",  // or "+++" for TOML
  language: "yaml",   // or "toml"
})
​
delimiters
string | [string, string]
default:"---"
Delimiter characters for frontmatter blocks
​
language
yaml | toml
default:"yaml"
Frontmatter language parser
Supported Fields:
​
title
string
Page title (fallback to filename if not provided)
​
tags
string[]
Tags for categorization (supports comma-separated string or array)
​
aliases
string[]
Alternative URLs that redirect to this page
​
draft
boolean
Mark page as draft (filtered by RemoveDrafts plugin)
​
created
string
Creation date (ISO format or YYYY-MM-DD)
​
modified
string
Last modification date
​
socialImage
string
Image for social media previews
​
description
string
Page description for SEO and previews

​
SyntaxHighlighting

Adds syntax highlighting to code blocks using rehype-pretty-code.
Configuration
Plugin.SyntaxHighlighting({
  theme: {
    light: "github-light",
    dark: "github-dark",
  },
  keepBackground: false,
})
​
theme
{ light: string, dark: string }
Theme names from Shiki themes
​
keepBackground
boolean
default:false
Keep the theme’s background color
Usage Example: 
```typescript title="example.ts" {2,4-6}
function hello(name: string) {
  console.log(`Hello, ${name}!`)  // highlighted
  
  return {
    message: name,  // highlighted range
  }
}
```
Features:
  • Line highlighting: {2,4-6}
  • File titles: title="filename.ts"
  • Line numbers
  • Copy button support

​
GitHubFlavoredMarkdown

Enables GitHub Flavored Markdown features: tables, strikethrough, task lists, and autolinks.
Configuration
Plugin.GitHubFlavoredMarkdown({
  enableSmartyPants: true,
  linkHeadings: true,
})
​
enableSmartyPants
boolean
default:true
Convert straight quotes to curly quotes, dashes to em-dashes, etc.
​
linkHeadings
boolean
default:true
Add anchor links to headings
GFM Features: 
| Syntax | Description |
| ------ | ----------- |
| Header | Title |
| List   | Item |

​
ObsidianFlavoredMarkdown

Supports Obsidian-specific Markdown syntax.
Configuration
Plugin.ObsidianFlavoredMarkdown({
  enableInHtmlEmbed: false,
  enableYouTubeEmbed: true,
  enableVideoEmbed: true,
  enableCallouts: true,
  enableMermaid: true,
  enableCheckboxToggle: false,
  enableParseTags: true,
  enableParseArrows: true,
  enableParseBracketedTags: true,
})
Obsidian Features: 
> [!note] Note Title
> This is a note callout

> [!warning]
> Warning without title

> [!tip]- Collapsible Tip
> Collapsed by default
Supported types: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote
![[image.png]]
![[document.pdf]]
![[note]] # Embed another note
![[video.mp4]]

%% This is a comment and won't be rendered %%
Mermaid diagrams with triple backticks:
  • Use mermaid language tag
  • Supports flowcharts, sequence diagrams, etc.
  • Renders interactive diagrams

​
Latex

Renders LaTeX math expressions using KaTeX, MathJax, or Typst.
Configuration
Plugin.Latex({
  renderEngine: "katex",
  customMacros: {
    "\\RR": "\\mathbb{R}",
    "\\NN": "\\mathbb{N}",
  },
})
​
renderEngine
katex | mathjax | typst
default:"katex"
Math rendering engine
​
customMacros
object
Custom LaTeX macros
Usage: 
The equation $E = mc^2$ is famous.
KaTeX is recommended for faster builds and smaller bundle size.

​
TableOfContents

Generates table of contents from headings.
Configuration
Plugin.TableOfContents({
  maxDepth: 3,
  minEntries: 1,
  showByDefault: true,
  collapseByDefault: false,
})
​
maxDepth
1 | 2 | 3 | 4 | 5 | 6
default:3
Maximum heading depth to include
​
minEntries
number
default:1
Minimum number of headings required to show TOC
​
showByDefault
boolean
default:true
Show TOC by default on all pages
​
collapseByDefault
boolean
default:false
Collapse TOC by default
Per-page Control: 
---
enableToc: true  # Override default
---
Processes internal and external links.
Configuration
Plugin.CrawlLinks({
  markdownLinkResolution: "shortest",
  prettyLinks: true,
  openLinksInNewTab: false,
  lazyLoad: false,
  externalLinkIcon: true,
})
​
markdownLinkResolution
shortest | absolute | relative
default:"absolute"
Strategy for resolving Markdown links
​
prettyLinks
boolean
default:true
Display only filename in link text instead of full path
​
openLinksInNewTab
boolean
default:false
Open external links in new tab
​
lazyLoad
boolean
default:false
Lazy load images and media
​
externalLinkIcon
boolean
default:true
Add icon to external links

​
CreatedModifiedDate

Extract creation and modification dates from various sources.
Configuration
Plugin.CreatedModifiedDate({
  priority: ["frontmatter", "git", "filesystem"],
})
​
priority
string[]
default:["frontmatter","git","filesystem"]
Order of sources to check for dates
Date Sources:
  1. frontmatter - created and modified fields
  2. git - Git commit history
  3. filesystem - File creation/modification time

​
Description

Generates page descriptions from content.
Configuration
Plugin.Description({
  descriptionLength: 150,
})
Extracts the first descriptionLength characters as page description if not specified in frontmatter.

​
Citations

Process citations and bibliography. 
Plugin.Citations({
  bibliographyFile: "./references.bib",
  csl: "apa",
})
Detect and report missing internal links. 
Plugin.MissingLinks()
Logs warnings for broken internal links during build.

​
HardLineBreaks

Convert single line breaks to <br> tags. 
Plugin.HardLineBreaks()
Useful for poetry or when you want single newlines to create line breaks.

​
RoamFlavoredMarkdown

Support Roam Research Markdown syntax. 
Plugin.RoamFlavoredMarkdown()

​
Transformer Order Best Practices

1

Parse Frontmatter First

Plugin.FrontMatter()
Always first - other plugins may depend on frontmatter data
2

Date Processing

Plugin.CreatedModifiedDate({ priority: ["frontmatter", "git"] })
Early in pipeline - used by other plugins
3

Syntax Processing

Plugin.SyntaxHighlighting({ ... })
Plugin.ObsidianFlavoredMarkdown({ ... })
Plugin.GitHubFlavoredMarkdown()
Process syntax before link crawling
4

Content Processing

Plugin.TableOfContents()
Plugin.CrawlLinks({ ... })
Plugin.Latex({ ... })
Process content structure and special syntax
5

Final Processing

Plugin.MissingLinks()
Plugin.Description()
Plugin.HardLineBreaks()
Final transformations and validation

​
Complete Example

quartz.config.ts
const config: QuartzConfig = {
  plugins: {
    transformers: [
      // 1. Parse metadata
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({
        priority: ["frontmatter", "git", "filesystem"],
      }),
      
      // 2. Syntax highlighting
      Plugin.SyntaxHighlighting({
        theme: {
          light: "github-light",
          dark: "github-dark",
        },
        keepBackground: false,
      }),
      
      // 3. Markdown syntax support
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
      Plugin.GitHubFlavoredMarkdown(),
      
      // 4. Content processing
      Plugin.TableOfContents(),
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
      Plugin.MissingLinks(),
      Plugin.Description(),
      
      // 5. Special syntax
      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.HardLineBreaks(),
    ],
    // ... filters and emitters
  },
}

​
See Also

Plugin Overview

Understanding the plugin system

Filter Plugins

Control content publishing

Emitter Plugins

Generate output files

Unified Ecosystem

Plugin system foundation

Build docs developers (and LLMs) love

Get started for freeTalk to us