diff --git a/README.md b/README.md index ace827a..085a8a7 100644 --- a/README.md +++ b/README.md @@ -24,14 +24,14 @@ The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here's a quick overview of the available YAML options: -| Option | Description | Example | -|--------|-------------|---------| -| `title` | Default title for the callout (optional) | `title: "Important Note"` | -| `icon` | Use a default icon (optional) | `icon: "true"` | -| `icon-symbol` | Custom symbol or text for the icon | `icon-symbol: "📝"` | -| `color` | Color for the callout's left border and icon | `color: "#FFA500"` | -| `appearance` | Callout appearance (optional) | `appearance: "simple"` | -| `collapse` | Make the callout collapsible (optional) | `collapse: "true"` | +| Option | Description | Default | Possible Values | Example | +|--------|-------------|---------|-----------------|---------| +| `title` | Default title for the callout | Callout name | Any string | `title: "Important Note"` | +| `icon` | Display an icon | `false` | `true`, `false` | `icon: true` | +| `icon-symbol` | Custom symbol or text for the icon | None | Any string or Unicode character | `icon-symbol: "📝"` | +| `color` | Color for the callout's left border and background | None | Any valid CSS color name or hex | `color: "#FFA500"` | +| `appearance` | Callout appearance | `"default"` | `"default"`, `"simple"`, `"minimal"` | `appearance: "simple"` | +| `collapse` | Make the callout collapsible | `false` | `true`, `false` | `collapse: true` | You can start using custom callouts in your Quarto project immediately after installation. First, define your custom callouts in the YAML front matter: diff --git a/docs/index.qmd b/docs/index.qmd index d6835a8..a9307ee 100644 --- a/docs/index.qmd +++ b/docs/index.qmd @@ -39,14 +39,18 @@ If you're using version control, make sure to include this directory in your rep The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here's a quick overview of the available YAML options: -| Option | Description | Example | -|--------|-------------|---------| -| `title` | Default title for the callout (optional) | `title: "Important Note"` | -| `icon` | Use a default icon (optional) | `icon: "true"` | -| `icon-symbol` | Custom symbol or text for the icon | `icon-symbol: "📝"` | -| `color` | Color for the callout's left border and icon | `color: "#FFA500"` | -| `appearance` | Callout appearance (optional) | `appearance: "simple"` | -| `collapse` | Make the callout collapsible (optional) | `collapse: "true"` | +## Usage + +The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents. Here's a quick overview of the available YAML options: + +| Option | Description | Default | Possible Values | Example | +|--------|-------------|---------|-----------------|---------| +| `title` | Default title for the callout | Callout name | Any string | `title: "Important Note"` | +| `icon` | Display an icon | `false` | `true`, `false` | `icon: true` | +| `icon-symbol` | Custom symbol or text for the icon | None | Any string or Unicode character | `icon-symbol: "📝"` | +| `color` | Color for the callout's left border and background | None | Any valid CSS color name or hex | `color: "#FFA500"` | +| `appearance` | Callout appearance | `"default"` | `"default"`, `"simple"`, `"minimal"` | `appearance: "simple"` | +| `collapse` | Make the callout collapsible | `false` | `true`, `false` | `collapse: true` | You can start using custom callouts in your Quarto project immediately after installation. First, define your custom callouts in the YAML front matter: diff --git a/docs/qcustom-callout-example.qmd b/docs/qcustom-callout-example.qmd index ea655ff..db6da5e 100644 --- a/docs/qcustom-callout-example.qmd +++ b/docs/qcustom-callout-example.qmd @@ -87,6 +87,10 @@ Let's do a feature test! ```` ::: +## Sample Custom Callouts with Options + +The following examples demonstrate the use of custom callouts with additional options. + ### Title :::{.panel-tabset} @@ -155,10 +159,18 @@ Demo of `collapse="true"`. Demo of `appearance="simple"`. ::: +::: {.todo appearance="simple" collapse="true" title="Todo with Simple Appearance and Collapse"} +Demo of `appearance="simple"` and `collapse="true"`. +::: + ::: {.todo appearance="minimal" title="Todo with Minimal Appearance"} Demo of `appearance="minimal"`. ::: +::: {.todo appearance="minimal" collapse="true" title="Todo with Minimal Appearance and Collapse"} +Demo of `appearance="minimal"` and `collapse="true"`. +::: + ### Source ````md @@ -166,12 +178,22 @@ Demo of `appearance="minimal"`. Demo of `appearance="simple"`. ::: +::: {.todo appearance="simple" collapse="true" title="Todo with Simple Appearance and Collapse"} +Demo of `appearance="simple"` and `collapse="true"`. +::: + ::: {.todo appearance="minimal" title="Todo with Minimal Appearance"} Demo of `appearance="minimal"`. ::: + +::: {.todo appearance="minimal" collapse="true" title="Todo with Minimal Appearance and Collapse"} +Demo of `appearance="minimal"` and `collapse="true"`. +::: + ```` ::: + ## Original Quarto Callout This section provides examples of the built-in [Quarto Callout](https://quarto.org/docs/authoring/callouts.html) for a Note, e.g. `.callout-note`. @@ -192,10 +214,18 @@ Demo of `collapse="true"` Demo of `appearance="simple"`. ::: +::: {.callout-note appearance="simple" collapse="true" title="Simple Note Appearance with Title and Collapse"} +Demo of `appearance="Simple"` and `collapse="true"`. +::: + ::: {.callout-note appearance="minimal" title="Minimal Note Appearance with Title"} Demo of `appearance="minimal"`. ::: +::: {.callout-note appearance="minimal" collapse="true" title="Minimal Note Appearance with Title and Collapse"} +Demo of `appearance="minimal"` and `collapse="true"`. +::: + ### Source ````md @@ -211,8 +241,17 @@ Demo of `collapse="true"` Demo of `appearance="simple"`. ::: +::: {.callout-note appearance="simple" collapse="true" title="Simple Note Appearance with Title and Collapse"} +Demo of `appearance="Simple"` and `collapse="true"`. +::: + ::: {.callout-note appearance="minimal" title="Minimal Note Appearance with Title"} Demo of `appearance="minimal"`. ::: + +::: {.callout-note appearance="minimal" collapse="true" title="Minimal Note Appearance with Title and Collapse"} +Demo of `appearance="minimal"` and `collapse="true"`. +::: + ```` ::: diff --git a/docs/qcustom-callout-faq.qmd b/docs/qcustom-callout-faq.qmd index 8a277e1..641b462 100644 --- a/docs/qcustom-callout-faq.qmd +++ b/docs/qcustom-callout-faq.qmd @@ -61,9 +61,9 @@ filters: For each custom callout, you can set the following options: - `title`: The default title for the callout (optional) -- `icon`: Set to `true` to use a default icon, or omit for no icon +- `icon`: Set to `"true"` to use an icon or `"false"` for no icon - `icon-symbol`: A custom symbol or text to use as the icon -- `color`: The color for the callout's left border and icon (can be a named color or hex code) +- `color`: The color for the callout. You can use any valid CSS color name or hex code. - `appearance`: The callout appearance (optional) - `collapse`: Whether the callout should be collapsible (optional)