20250826 - 📝 Quartz customization L3

Credits

• Eilleen’s Garden - for mentioning about the “Quartz Clickable Images Zoom plugin” - https://quartz.eilleeenz.com/Quartz-customization-log
• vazome - for implementing the “Quartz Clickable Images Zoom plugin” - https://github.com/vazome/quartz-clickable-images-zoom-plugin

Add Quartz Clickable Images Zoom plugin

Steps

1. Add clickableImages.ts to plugins/transformers folder - source code
2. Update plugins/transformers/index.ts to export ClickableImages

plugins/transformers/index.ts

export { HardLineBreaks } from "./linebreaks"
export { RoamFlavoredMarkdown } from "./roam"
export { ClickableImages } from "./clickableImages"

3. Add Plugin.ClickableImages to quartz.config.ts

quartz.config.ts

plugins: {
    transformers: [
      Plugin.FrontMatter(),
      Plugin.CreatedModifiedDate({
        priority: ["frontmatter", "git", "filesystem"],
      }),
      Plugin.SyntaxHighlighting({
        theme: {
          light: "github-light",
          dark: "github-dark",
        },
        keepBackground: false,
      }),
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
      Plugin.GitHubFlavoredMarkdown(),
      Plugin.TableOfContents(),
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
      Plugin.Description(),
      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.ClickableImages(),
    ],

Note

This ClickableImages plugin adds some spaces surrounding the images (due to Lightbox). So it may mess up your page layout a bit → fix it as needed. e.g. Need to have 1 extra line between the image(s) and Figure text.