 |
Summary | Adds Obsidian-style callouts as an alternative for markdown quotes. |
 |
Preview | Theme Creator |
 |
Repository | GitHub - Arkshine/discourse-quote-callouts |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
This theme component adds support for Obsidian-style callouts in Discourse as an alternative for markdown quotes.
Callouts are a great way to highlight content and add notes, warnings, or other special messages to your posts.
Usage
To create a callout, add [!type] to the first line of a quote, where type is the type identifier. The type identifier determines how the callout looks and feels. To see all available types, refer to Supported types.
> [!tip]
> **Tip**: Use `code snippets` to enhance readability. They provide clarity and precision.
Custom title
By default, the title of the callout is its type identifier in title case. You can change it by adding text after the type identifier:
> [!question] Custom Label 🤗
> Callouts labels can be customized.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> They can also contain special inline formatting like dynamic dates.
You can also create title-only callouts:
> [!success] solved.
Foldable callouts
You can make a callout foldable by adding a plus + or a minus - directly after the type identifier.
+expands the callout by default-collapses it instead
> [!todo]- My Todo List
>
> - [x] Write documentation
> - [ ] Add tests
> - [ ] Review code
> [!todo]+ My Expanded Todo List
>
> - [x] Create repository
> - [ ] Setup CI/CD
> - [ ] Deploy to production
Nested callouts
You can nest callouts in multiple levels.
> [!question] Can callouts be nested?
>
> > [!todo] Yes!, they can.
> >
> > > [!example] You can even use multiple layers of nesting.
> [!tip]
> Here's a helpful tip
>
> > [!info]
> > With some additional information
> >
> > > [!example]
> > > And a nested example
>
> Back to the main tip
Supported default types
You can use several callout types and aliases.
Each type comes with a different background color and icon.
See thecalloutssetting.
notetype. See Default Fallbacks section for more information.
| Type | Description | Aliases |
|---|---|---|
note |
For general notes and information | - |
abstract |
For summaries or abstract sections | summary, tldr |
info |
For informational content | - |
todo |
For task lists or todo items | - |
tip |
For tips and important information | hint, important |
success |
For success messages | check, done |
question |
For questions and FAQs | help, faq |
warning |
For warnings | caution, attention |
failure |
For failure notices | fail, missing |
danger |
For danger or error messages | error |
bug |
For bug reports or known issues | - |
example |
For examples | - |
quote |
For quotes | cite |
Customization
Icon
You can use either FontAwesome 6 icon or directly provide an SVG element.
SVG element
While the free FontAwesome version provides many choices, you may feel limited sometimes.
You can provide an SVG element <svg>...</svg>.
Example: Lucile icons – It’s a great set with the advantage of choosing the stroke width.
- Select an icon
- Adjust the Stroke width
- Click on Copy SVG
- Go to the theme component settings and paste the content
Default Fallbacks
You can set default values for when a specified callout type isn’t found with the following settings:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse is fantastic]
> Yes.
Global configuration
You can customize various aspects of the callouts through
- Background opacity
- Border properties (width, style, color, radius)
- Padding
- Title font properties (size, weight)
- Space between icon and title
Per-Callout configuration
Each callout type can be customized with:
- Custom icon
- Title text
- Color scheme
- Border properties
See the Settings section below.
Settings
| Setting | Description |
|---|---|
| callouts | Define the callouts. |
| callout_fallback_type | The default callout type to use when the specified type is not found. Default value: note |
| callout_fallback_icon | The default icon to use when the specified type is not found. Default value: far-pen-to-square |
| callout_fallback_color | The default color to use when the specified type is not found. Default value: #027aff |
| callout_background_opacity | The global background opacity for the callout (1 to 100). Default value: 10 |
| callout_border_width | The global border width for the callout. Default value: empty |
| callout_border_style | The global border style for the callout. Default value: empty |
| callout_border_color | The global border color for the callout. Default value: empty |
| callout_border_radius | The global border radius for the callout. Default value: var(--d-border-radius) |
| callout_padding | The global padding for the callout. Default value: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | The global font size for the callout title. Default value: inherit |
| callout_title_font_weight | The global font weight for the callout title. Default value: bold |
| callout_title_gap | The global gap between the callout icon and title. Default value: 0.5em |
| callout_icon_sizep | The global size for the callout icon. |
| svg_icons | List of FontAwesome 6 icons used in this theme component. |
Per-callout setting page:
| Setting | Description |
|---|---|
| Type* | The type of the callout. This identifier will be used in the callout syntax: [!type] |
| Alias | The aliases for the callout, separated by |.Example: cite|quote |
| Icon | The fontawesome icon for the callout. You might need to add it to svg_icons setting if it’s not available in the default subset.Alternatively, you can provide an SVG element directly, e.g. <svg>...</svg> |
| Icon size | The size for the callout icon. Note: Use only valid CSS values, e.g. 1em, 16px, 1.5rem |
| Title | The title for the callout. If no title is provided in the callout, this setting will be used. Note: if both are empty, the title will be the callout type. |
| Color | The color for the callout. This will be used for the background, title, and icon. Note: Use only hexadecimal color codes, e.g. #027aff |
| Border width | The border width for the callout. |
| Border style | The border style for the callout. |
| Border color | The border color for the callout. Important: if you’re using CSS functions to produce an alpha value, such as rgba, make sure not to use spaces between the values, e.g., rgba(145,145,145,0.1) |
| Border radius | The border radius for the callout. |
* Required setting
Roadmap
Future development plans may include:
- Autocomplete types on typing
Credits
- @StefanoCecere – Feature request, Style blockquotes as callouts in Obsidian
Your site may not work because a theme / component has errors.
