Quote Callouts

	Summary	Adds Obsidian-style callouts as an alternative for markdown quotes.
	Preview	Theme Creator
	Repository	GitHub - Arkshine/discourse-quote-callouts · GitHub
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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.

The image shows different types of annotation tool callouts, including a note, custom title, collapsible warning, and a title-only note. (Captioned by AI)701×426 5.15 KB

The image displays a chat message notification stating that "It works in chat as well." (Captioned by AI)469×296 5.86 KB

Usage

To create callout, you have several ways.

Markdown syntax

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.

The type identifier is case-insensitive.

> [!tip] 
> **Tip**: Use `code snippets` to enhance readability. They provide clarity and precision.

image694×108 2.91 KB

Preview

You can change the type by clicking on the icon: 

![chrome_atmmLf0v3c|690x209](upload://hZYzuK1MCwo7vsMEV9uYEZZOqjn.jpeg) 

Rich text editor

It’s now fully supported, please refer to Rich text editor support section.

Keyboard shortcut

• Ctrl + q — Insert an empty callout

Toolbar

chrome_7HSSbReBtO329×348 15.5 KB

chrome_YaDrphqvbV712×275 19.1 KB

Chat

A button in the toolbar to insert a default callout is available.

chrome_CWig42tWHY478×551 16.3 KB

chrome_TsyfsoA82R291×373 12.8 KB

chrome_nWk7hUyRGr445×181 5.07 KB

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.

The image shows an example of a custom label and a date formatting with dynamic date in inline formatting. (Captioned by AI)697×230 6.59 KB

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

The image displays an expanded to-do list with tasks such as "Create repository," "Setup CI/CD," and "Deploy to production," partially completed, within a user's digital task management system. (Captioned by AI)701×232 3.58 KB

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

The image shows interactable tips on UI design, explaining that callouts can be nested within other callouts and providing an example. (Captioned by AI)719×637 7.66 KB

Supported default types

You can use several callout types and aliases.
Each type comes with a different background color and icon.

You can create your callouts or manage the default ones.
See the callouts setting.

Any unsupported type defaults to the note type. See Default Fallbacks section for more information.

The type identifier is case-insensitive.

The image displays markdown notation examples for notes, abstracts, to-do lists, tips, and questions, illustrating the use of italics, bold text, links, formatted items, bullet points, code snippets, and check marks. (Captioned by AI)702×805 20.8 KB

The image presents a warning about protecting data, a message about viewing failure constructively, a caution on managing tasks with care, an explanation of bugs in code, an example of using markdown lists, and a motivational quote about not letting doubts limit one's potential. (Captioned by AI)703×825 15.1 KB

Customization

Icon

You can use either FontAwesome 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.

1. Select an icon
2. Adjust the Stroke width
3. Click on Copy SVG
4. Go to the theme component settings and paste the content

The image displays the Lucide app interface with a customizable icon drawer, showcasing an emoji-style "party-popper" icon example and a code snippet highlighting how to import icons from Lucide using SVG and JSX formats. (Captioned by AI)966×460 38.7 KB

The image shows a form interface for adding a confetti callout with options for type, alias, and an SVG icon with specified width and height dimensions. (Captioned by AI)777×315 8.15 KB

Default Fallbacks

You can set default values for when a specified callout type isn’t found with the following settings:

• callout_fallback_type
• callout_fallback_icon
• callout_fallback_color

> [!discourse is fantastic]
> Yes.

chrome_02DZB72MyB610×122 916 Bytes

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.

The image displays two text callouts: one highlighting that it's a simple note with an icon, and the other suggests using callouts to highlight important information with a flame icon. (Captioned by AI)706×264 3.9 KB

Settings

Rich text editor support

This component now supports the Discourse rich text editor, making callouts easier to create, edit, and organize.

Creating callouts

You can insert callouts in multiple ways:

• Keyboard shortcut: Ctrl + Q
• Toolbar button
• Input rules:
  • /callout<:type>
  • !!<type>
• Paste support

Editing callouts

The controls to edit a callout appear only when you select it before.

• Type chooser
  By clicking on the icon, a floating menu will appear.

• Custom Title
  Supports inline formatting and emoji

• Folding
  Set callouts as collapsible. It can be accessed from the options menu.

Move controls

• Desktop

  • Drag & drop using a handle

• Touch devices

  • Move callouts up/down
  • Nest inside adjacent callouts
  • Disabled by default (can be enabled in options)

Keyboard navigation

Improves navigation inside nested callouts:

• ← at the start of the title opens the type chooser
• ↑ / ↓ inside empty areas creates/removes paragraphs
• Enter in the title moves the cursor into the body

Click-to-insert

• Click in empty areas to create a paragraph
• Optional buttons allow inserting content inside or outside callouts

Roadmap

Future development plans may include:

• Autocomplete types on typing

Credits

• @StefanoCecere – Feature request, Style blockquotes as callouts in Obsidian

Oh nice!

I think this could be used for this purpose?:

The image presents a split-screen document with two columns filled with two identical sets of placeholder text (Lorem Ipsum), each marked by a "A" symbol in green circles at their top positions. A warning message, text box, and dialog box are situated above the left text. (Captioned by AI)1630×1239 301 KB

That seems like a valid usage!

impressive! you’re great

This is a stellar add. Much more than the base discussion seemed to entail(granted haven’t used Obsidian).

This looks amazing. Will the callouts be styled correctly on email as well?

When I added this component to my site I got an error message that read:

Your site may not work because a theme / component has errors.
Caused by ‘Quote Callouts’. Click here to update, reconfigure or disable.

What version of discourse are you running?

I am on Tests-passed(3.5 beta) and it seems fine

If you’re on Stable you may still be 3.4 or maybe earlier version as 3.4 just rolled out to stable

Ah, I haven’t upgraded recently because of the PostgreSQL stuff. I’ll report back when I do!

Not sure if that is the case… But a likely suspect as many changes have rolled out with how TC etc… structures have changed. Like the move to glimmer components.

Unfortunately, I don’t think so. It would require a plugin.

What is your current Discourse version?

I updated to the latest version and it works now.

The lack of email support unfortunately makes this unusable for our case. Most of our members are subscribed to groupts & categories and so read messages in their email. Bummer!

I might try to make a plugin version later!

This is a fantastic addition to Discourse!

That’s exactly what we are missing in Discourse core, at least the 4 most common types of callout such as info, danger, warning and success. We have been using the blockquote + emoji format for a while and we willl definitely give this one a shot

Love what you’ve done here!

Very nice thanks !

Hi, just one thing, the quote callout code appears in the excerpts on my home page, it would be better it doesn’t:

The image shows the Autodesk logo along with a text in French discussing the history, evolution, definitions, and future perspectives of Autodesk software since its creation in 1982. (Captioned by AI)453×509 35.2 KB

@patrickemin Can you test the latest version? It should clean up the topic excerpt now.

Yes it works thanks!

Thank you for the theme component I really like it!

Unfortunately, I had to temporarily disable it as it was causing visual problems on my site and I saw the following in the console that I was able to trace back to your callouts.gjs

bug1266×195 11.9 KB

Thanks for reporting! Can you share your Discourse version?

Thank you for such a fast response :). I updated about 10 minutes ago to see if it would resolve the problem the version I am running is:

3.5.0.beta1-dev
( a77d469eeb )

I went ahead and downgraded to stable, which is 3.4.0 ( 3bbf96fa21 ) and while I do not get the error in the console anymore the same symptom is there which is that other theme components / visual changes do not load properly.

Updated
Correction: after reloading the page a few more times the error does now show up so it might have been a fluke that it didn’t initially, so I am confirming this on 3.4.0 as well.

@dubwoc
The component works best with a recent Discourse version.
I updated the component. I can’t reproduce it, but I made some changes. Make sure to update it and try it!

Thanks again for the quick response. This did not fix the error I get a similar error that looks like the following:

bug21908×345 38.6 KB

I was able to narrow it down to an interaction between your component and the official Discourse Topic Cards component (GitHub - discourse/discourse-topic-cards: This changed the topic list into cards with a modified layout, and a thumbnail if available.), you are likely unable to reproduce the error because you do not have this component installed. If you install it and navigate around to different categories you’ll see the error relatively quickly.

Thanks for the details! @dubwoc

I can see an error (not the same, though, but it might be because it’s a dev instance).
It seems that, for some reason, one of the excerpt returns a boolean instead of a string.

I’ve pushed a fix, hit the update button, and try again.

Yep, that fixed the issue on my end! Thank you for iterating with me!

Awesome, thanks for your patience!

You can’t downgrade. Unless you were lucky and there were no database migrations, you’ll likely have problems.

Fair enough, then I got lucky at the time I did this

I installed it, and it shows a banner saying

Your site may not work because a theme / component has errors.
Caused by ‘Quote Callouts’. Click here to update, reconfigure or disable.
(this message is only shown to site administrators)

I probably need to update Discourse but just telling you guys since it is interesting.

Thanks for the report!

Can you open the browser’s console and paste any errors you see here?
It should not throw an error even if it works well with the latest Discourse version.

Also, what is your Discourse version?

oh it was because I did not update, I will try to do that soon!

also, I like your callout theme component a lot!

This component rules so hard. I love it. Leaving this message in the hope that anyone who comes across this older thread

like I did ends up here.

Hello, would it be possible for the formatting codes for these callouts not to appear in the article excerpts, see the illustration below?

image454×204 6.93 KB

Hi Arkshine, fantastic component! Seems like the latest discourse update is threatening to not play nice with this now, however, it throws a warning at the top of the forum for admins that this component uses the now-deprecated widget feature in discourse.

Afaict, it hasn’t impacted actual usage yet.

I’ve taken the liberty of updating the component to use the new api. I’ve put a PR up on the original repo, but you can install it via the fork here if you’re impatient.

Hi, thanks for the help. it’s actually on my todo list to update soon the component to use glimmer and add rich editor support! Stay tuned

Great! I can’t wait to use it.

There may be an error in here, enabling this (with the original disabled) created issues for accounts without admin access. Unsure of what conflicted exactly, but some topics were hidden and the Categories/Tags navigation was unusable at all for non-permissive accounts (TL1).

I’ll wait for Arkshine’s update.

I’m seeing the following when I updated today

[Admin Notice] Theme ‘Quote Callouts’ contains code which needs updating. (id:discourse.widgets-decommissioned) (learn more)

I’ve pushed a fix, can you update the component and give it a try?

Working fine so far!

I’m currently encountering an issue where the quote block cannot be collapsed/expanded

Do you mind pasting here a reproducible example or a link to your post in your forum (feel free to PM me if you prefer)?

Of course, the bottom of this topic

Here’s an update that modernizes the component and brings rich text editor support!
It might need some polish or may have unforeseen edge cases, but I believe it’s a fair good start.

In short

• Adds Rich text editor support (see below for a detailed overview)
• Converts rendering to a glimmer component
• Fixes CSS color with nested callouts
• Fixes CSS color with alias
• The fold animation should be smoother
• Adds callout_transition_duration_ms setting (fold animation)
• Adds Ctrl + q shortcut to insert a default callout.
  It works on both editors, and the shortcut is added to the Keyboard Shortcut modal
  Images

  

  chrome_7HSSbReBtO329×348 15.5 KB

  
  

  

  chrome_YaDrphqvbV712×275 19.1 KB

• Chat: Adds a button in the toolbar to insert a default callout
  Images

  

  chrome_CWig42tWHY478×551 16.3 KB

  
  

  

  chrome_TsyfsoA82R291×373 12.8 KB

  
  

  

  chrome_nWk7hUyRGr445×181 5.07 KB

• Markdown Preview: Adds the ability to change the type by clicking on the icon
  Image

  

  chrome_atmmLf0v3c1522×462 41.3 KB

Rich text editor

Let’s talk about the rich text editor and what to expect!

Creating callouts:

You have four ways to insert callouts:

• Keyboard shortcut
• Toolbar
• Input rules
  • /callout<:type>
  • !!<type>
• Paste support
  Video

Editing callouts

The controls to edit a callout appear only when you select it before.

• Type chooser
  By clicking on the icon, a floating menu will appear.
• Custom Title
  Supports inline formatting and emoji
• Folding
  Set callouts as collapsible. It can be accessed from the options menu.
  Video

Organizing callouts

• Move controls

  • Desktop
    There is a handle that you grab to drag and drop the callout.
  • Touch device
    You move callouts up/down or nest them into adjacent callouts. It’s disabled by default to avoid bloat in the view, since that’s not something you will do often. You can toggle in the options.
  Video

• Keyboard navigation
  This helps make it easier to move in and out of nested callouts.
  It might require some future adjustments to make the behavior consistent in this version.

  • ← At the start of the title, the callout chooser will open automatically.
  • ↑ ↓ Inside a callout body with no paragraph to land on, it will create one; if you exit with empty content, the paragraph is removed.
  • Enter inside the title moves the cursor into the body (and creates one if necessary).
  Video

• Click-to-insert

  • In areas where there is no paragraph, you can click inside to open a paragraph.
  • If you prefer, you can also use buttons to open a paragraph inside or outside a callout.
    Video

Possibly, later, I will look for:

• input rules autocompletion
• improve color using modern CSS, to ensure consistency and visibility, especially in dark mode.

• I wish to remove all the settings and focus on simplicity first, with advanced customisation with CSS only, but it’s too late for that

Special thanks to Moin for giving me feedback.

That’s it. Let me know what you think. Feedback is very welcome!

I noticed that you designed such an effect: if a certain type has multiple aliases, then when selecting the type in the rich text editor, each alias appears as an option, and they are positioned consecutively.
This is a nice design, but it seems to need further expansion: if no Title is defined, they will display the callout type, so these consecutive options that share the same final color scheme will show different names and titles; however, if a Title is defined, they will display and use the same Title in the list as when actually creating a Quote, which is somewhat confusing.
If this extension is difficult to implement, I think perhaps a checkbox could be provided to prevent adding extra entries in the type selection list that correspond one-to-one with aliases when a Title is defined.

image840×380 77.6 KB

You’re right! Thanks for the feedback, it’s nice to see people using the TC.
Actually, I thought about it at some point, but completely forgot to fix it.
I will work on a fix to properly filter the list when title is set.

I pushed a fix. Let me know how it goes!

I just tested the latest version, and now the ones with a Title will only show one in the category selection list, regardless of how many aliases there are.

image581×317 17.4 KB

I have the following error, only when using the de translation*:

JS-Console:

client-error-handler.js:109 [THEME 6 'Quote Callouts'] TypeError: Cannot set properties of undefined (setting 'callout_sample')
    at new po (callouts.gjs:30:19)
    at callouts.gjs:265:23
    at eK (plugin-api.gjs:3582:10)
    at Object.initialize (callouts.gjs:264:5)
    at i.initialize (app.js:304:28)
    at index.js:375:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at ij._runInitializer (index.js:388:11)
    at ij.runInstanceInitializers (index.js:373:10)
    at l._bootSync (instance.js:111:22)
    at ij.didBecomeReady (index.js:780:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at Y._end (index.js:762:32)
    at Y._boundAutorunEnd (index.js:499:12)
h	@	client-error-handler.js:109

It occurs in the last line of this quote:

class QuoteCallouts {
  constructor(owner, api) {
    [...]
    window.I18n.translations[
      window.I18n.fallbackLocale || "en"
    ].js.composer.callout_sample = ``;

• Set /u//preferences/interface “Interface language” to “German (Deutsch)”

The error seems to have been introduced in one of the last Discourse updates between 2026.3.0-latest and 2026.4.0-latest, but I can’t pinpoint it any further. Currently I’m at 2026.4.0-latest 4b2c45376d and Quote Callout v0.0.1 9aa6548

I really thought this kind of issue was fixed.
Is the site’s locale set to default English (US), while the user’s locale is set to German, am I correct?

Looking at the error, the composer object doesn’t exist. Let me know how it goes.
I made a quick fix for that: FIX: Ensures composer translation object exists by Arkshine · Pull Request #11 · Arkshine/discourse-quote-callouts · GitHub

Yes, that fixed the issue. Thank you! <3

Hi @Arkshine, thanks for a great plugin!

Is it possible to use the callout with no title at all or with just an icon instead?

I don’t think you can do that at the moment, I’ll think of a way to do that in the next update!

In the meantime, there’s a trick: insert a zero width space and it should work . You can copy it from this page for example: ​ U+200B ZERO WIDTH SPACE - Unicode Explorer

chrome_4Pa7RJUTb4937×196 13.8 KB

chrome_fgCimP8Pt6761×192 11.2 KB

Or without any text

image783×228 7.25 KB

Let me know if that works for you.

I think it did work! Thank you!

Hey there, @Arkshine

Is it possible to keep the original callout color when using the Hide details feature?

In the post editor mode the original colors are saved, but the background becomes gray after saving changes:

image1239×654 45.8 KB

image643×475 16.1 KB

Thanks for the report!
I pushed a fix. Can you update the component and see if it happens again?

Great, it worked fine! Thank you for the quick fix

Have a great day!

This is really a great component, but it currently still displays as a citation style in the revision history view. Can this scenario be supported?

It also appears like that in excerpts too, and in Oneboxes.

I suspect that it might be tricky to cover all the edge cases though.

Hi! I noticed a potential usability issue with the default Ctrl + Q shortcut on macOS.

Many Mac users instinctively press ⌘ + Q instead of Ctrl + Q, since ⌘ is the primary modifier key used for most shortcuts on macOS. Unfortunately, ⌘ + Q is also the system-wide shortcut for quitting the application/browser.

As a result, users may accidentally quit their browser while trying to insert a callout.

It’s not impossible, I gave it a try yesterday. I will see what I can do!

It should be hidden in excerpt unless something is broken again, but yes not hidden in onebox yet. I will keep in mind, thanks!

Good catch
Any suggestions? I’m thinking of using ctrl/⌘ + alt + c instead. That sounds safe, I hope.

I pushed an update.

• Callouts are now rendered in history revision. Thanks for the suggestion @Noble_Fish. It might need ajustements, like not rendered in some situations. The collapse toggle is ignored and not rendered. Let me know how it plays on your side!
• Onebox excerpt should strip the callout marker. Works in RTE too. Let me know if you see other cases @nathank.
• Shortcut changed to ctrl/⌘ + alt + c. Great catch @scavin. It should be a safe change.

Just a style issue: I’ve noticed that the code styling within quote callouts titles appears much shorter in length compared to normal text, which can cause it to be completely obscured by symbols like █ , and in languages such as Chinese, some larger text sizes may cause the four corners of its bounding box to go out of bounds, making it look odd.

image295×348 8.06 KB

I pushed a fix. It adds missing core CSS to <code> HTML in the callout title. Also, it removes extra newline spaces. Overall, this should be consistent now!

image397×218 5.15 KB

image378×218 4.98 KB