OFM: Quartz does not display checkboxes for the '[?]' format

[seniorprogphp]

Describe the bug
ObsidianFlavoredMarkdown: Quartz does not display checkboxes for the '[?]' format

To Reproduce
Steps to reproduce the behavior:

1. Create checkbox:

[?] this is also a complete item (works with every character)

Expected behavior
It was expected that a checkbox would be displayed.

Screenshots and Source

You can help speed up fixing the problem by either

1. providing a simple reproduction
2. linking to your Quartz repository where the problem can be observed

Desktop (please complete the following information):

• Quartz Version: 4.3.1(latest)
• node Version: 22.8.0
• Browser: chrome

[aarnphm]

This is not a valid usage afaik

You can try it on GitHub markdown.

[seniorprogphp]

This is not a valid usage afaik

You can try it on GitHub markdown.

https://quartz.jzhao.xyz/features/Obsidian-compatibility
https://quartz.jzhao.xyz/plugins/ObsidianFlavoredMarkdown

[aarnphm]

I don't think ? is valid. afaik only either [ ] or [x] works as checkbox?

• [?] this does not work
• this works

[jackyzha0]

this is obsidian markdown but its def weird lol

[aarnphm]

this is obsidian markdown but its def weird lol

oh ok I have never used it but sure lmao

[dlitvakb]

I added my own custom checkboxes by doing the following:

1. Add custom CSS for the custom checkboxes (on quartz/styles/custom.scss):

li:has(> * > span.custom-checkbox),
li:has(> span.custom-checkbox) {
  list-style-type: none;
  margin-left: -1.5rem;
}

2. Modify quartz/plugins/transformers/ofm.ts:

// Add the following to the Options interface:
export interface Options {
  // ... stuff goes here ...
  customCheckboxes: boolean
  customCheckboxMappings: Record<string, string>
 }

//add the following to the defaults:
const defaultOptions: Options = {
  // ... stuff goes here ...
  customCheckboxes: true,
  customCheckboxMappings: {
    "-": "⛔️",
    ">": "🫸",
    "<": "🗓️",
    "p": "👍",
    "c": "👎",
    "w": "😱",
    "!": "🤯",
    "f": "🔥",
    "s": "⭐️",
    "m": "💰",
  }
}

// Add the following RegEx beneath the other regex definitions:
const customCheckboxRegex = /^(\s*)- \[(-|f|w|!|>|<|p|c|s|m)\]\s*(.*)$/gm

// Add the following as part of the `textTransform()` body
      if (opts.customCheckboxes) {
        if (src instanceof Buffer) {
          src = src.toString()
        }

        src = src.replace(customCheckboxRegex, (match, spaces, checkType, text) => {
          return "\n" + "\t".repeat((spaces?.length || 0) / 4) + "- <span class='custom-checkbox'>" + (opts.customCheckboxMappings[checkType] || match) + " " + text + "</span>"
        })
      }

While this does not include the ? custom checkbox, you could easily add it to the list of checkboxes available. Just ensure to also include it in the Regex

[saberzero1]

I added my own custom checkboxes by doing the following:

1. Add custom CSS for the custom checkboxes (on quartz/styles/custom.scss):

li:has(> * > span.custom-checkbox),
li:has(> span.custom-checkbox) {
  list-style-type: none;
  margin-left: -1.5rem;
}

2. Modify quartz/plugins/transformers/ofm.ts:

// Add the following to the Options interface:
export interface Options {
  // ... stuff goes here ...
  customCheckboxes: boolean
  customCheckboxMappings: Record<string, string>
 }

//add the following to the defaults:
const defaultOptions: Options = {
  // ... stuff goes here ...
  customCheckboxes: true,
  customCheckboxMappings: {
    "-": "⛔️",
    ">": "🫸",
    "<": "🗓️",
    "p": "👍",
    "c": "👎",
    "w": "😱",
    "!": "🤯",
    "f": "🔥",
    "s": "⭐️",
    "m": "💰",
  }
}

// Add the following RegEx beneath the other regex definitions:
const customCheckboxRegex = /^(\s*)- \[(-|f|w|!|>|<|p|c|s|m)\]\s*(.*)$/gm

// Add the following as part of the `textTransform()` body
      if (opts.customCheckboxes) {
        if (src instanceof Buffer) {
          src = src.toString()
        }

        src = src.replace(customCheckboxRegex, (match, spaces, checkType, text) => {
          return "\n" + "\t".repeat((spaces?.length || 0) / 4) + "- <span class='custom-checkbox'>" + (opts.customCheckboxMappings[checkType] || match) + " " + text + "</span>"
        })
      }

While this does not include the ? custom checkbox, you could easily add it to the list of checkboxes available. Just ensure to also include it in the Regex

Thanks for this, I'll keep it in mind with the parser rework.