{"id":17712526,"url":"https://github.com/coatless-quarto/custom-callout","last_synced_at":"2025-08-17T19:32:12.390Z","repository":{"id":258853695,"uuid":"874616716","full_name":"coatless-quarto/custom-callout","owner":"coatless-quarto","description":"A Quarto Extension to Setup Custom Callouts","archived":false,"fork":false,"pushed_at":"2024-10-25T08:15:58.000Z","size":114,"stargazers_count":24,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-26T18:32:16.209Z","etag":null,"topics":["callout","quarto","quarto-extension"],"latest_commit_sha":null,"homepage":"https://quarto.thecoatlessprofessor.com/custom-callout/","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coatless-quarto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["coatless"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2024-10-18T06:43:54.000Z","updated_at":"2024-10-26T15:19:28.000Z","dependencies_parsed_at":"2024-10-22T02:18:39.462Z","dependency_job_id":null,"html_url":"https://github.com/coatless-quarto/custom-callout","commit_stats":null,"previous_names":["coatless-quarto/custom-callout"],"tags_count":1,"template":false,"template_full_name":"coatless-devcontainer/quarto-extension-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatless-quarto%2Fcustom-callout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatless-quarto%2Fcustom-callout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatless-quarto%2Fcustom-callout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coatless-quarto%2Fcustom-callout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coatless-quarto","download_url":"https://codeload.github.com/coatless-quarto/custom-callout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230160644,"owners_count":18182730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["callout","quarto","quarto-extension"],"created_at":"2024-10-25T09:01:54.466Z","updated_at":"2024-12-17T18:19:39.903Z","avatar_url":"https://github.com/coatless-quarto.png","language":"Lua","funding_links":["https://github.com/sponsors/coatless"],"categories":["Lua"],"sub_categories":[],"readme":"# Custom Callout Extension For Quarto \u003cimg src=\"https://github.com/user-attachments/assets/7edadf64-a304-436c-b54f-2f76def14c14\" align =\"right\" alt=\"\" width =\"150\"/\u003e\n\nThe `{quarto-custom-callout}` extension provides a YAML interface to configure a \nQuarto Callout with custom values such as its title, icon, icon symbol, color,\nappearance, and collapsibility.\n\n\u003e [!IMPORTANT]\n\u003e \n\u003e This extension is designed for Quarto HTML documents. \n\u003e We hope to extend this to other formats in the future.\n\n## Installing\n\nTo install the `{quarto-custom-callout}` extension, follow these steps:\n\n1. Open your terminal.\n2. Navigate to your Quarto project directory.\n3. Execute the following command:\n\n```bash\nquarto add coatless-quarto/custom-callout\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n## Using\n\nThe `custom-callout` extension allows you to define custom callouts in your \nYAML front matter and then use them in your Quarto documents.\nHere's a quick overview of the available YAML options:\n\n| Option | Description | Default | Possible Values | Example |\n|--------|-------------|---------|-----------------|---------|\n| `title` | Default title for the callout | Callout name | Any string | `title: \"Important Note\"` |\n| `icon` | Display an icon | `false` | `true`, `false` | `icon: true` |\n| `icon-symbol` | Custom symbol or text for the icon | None | Any string, unicode, or [FontAwesome](https://fontawesome.com/search?o=r\u0026m=free) class | `icon-symbol: \"📝\"` |\n| `color` | Color for the callout's left border and background | None | Any valid CSS color name or hex | `color: \"#FFA500\"` |\n| `appearance` | Callout appearance | `\"default\"` | `\"default\"`, `\"simple\"`, `\"minimal\"` | `appearance: \"simple\"` |\n| `collapse` | Make the callout collapsible | `false` | `true`, `false` | `collapse: true` |\n\nYou can start using custom callouts in your Quarto project immediately\nafter installation. First, define your custom callouts in the YAML front matter:\n\n```yaml\ncustom-callout:\n  todo:\n    icon-symbol: \"📝\"\n    color: \"pink\"\n  thumbs-up:\n    title: \"Great job!\"\n    icon-symbol: \"fa-thumbs-up\"\n    color: \"#008000\"\nfilters:\n- custom-callout\n```\n\n\nThen, use the custom callouts in your Quarto document like this:\n\n```markdown\n::: todo\nRemember to complete this section.\n:::\n\n::: test\nThis information is crucial for understanding the concept.\n:::\n\n::: {.thumbs-up title=\"That was a hard task!\"}\nYou did a great job completing this task.\n:::\n```\n\nThe above example will render three custom callouts in your document: \none with a pink border and a \"📝\" icon, an orange\nborder and a \"⚠️\" icon, and a green border with a thumbs-up icon from \n[FontAwesome](https://fontawesome.com/search?o=r\u0026m=free).\n\n\n## Notes\n\nThe `{quarto-custom-callout}` extension uses Quarto's [`quarto.Callout` custom AST Node](https://quarto.org/docs/prerelease/1.3/custom-ast-nodes/callout.html) to create custom [Quarto Callouts](https://quarto.org/docs/authoring/callouts.html).\n\nPreviously, there were two approaches to creating custom callouts. Both approaches rely on using a `Div` node. Specifically, we have:\n\n1. Create custom CSS classes with the necessary styling and apply it to a `Div` node.\n2. Use [`{quarto-custom-numbered-blocks}`](https://github.com/ute/custom-numbered-blocks) extension by [Ute Hahn](https://github.com/ute). \n\nThe latter approach is more user-friendly and allows for the creation of \ncustom number blocks with a YAML interface. Further, it offers immense flexibility \nin terms of styling and customization compared to the `quarto.Callout()` \ncustom AST Node used by `{quarto-custom-callout}`. For example, if you need\ngrouped callouts, you can use the `groups` option in the \n`{quarto-custom-numbered-blocks}` extension to formulate joint counters and styles.\nIt's a great extension to use if you need more than just custom callouts.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoatless-quarto%2Fcustom-callout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoatless-quarto%2Fcustom-callout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoatless-quarto%2Fcustom-callout/lists"}