I’m an absolute visual learner and use Blockquotes in Supernotes heavily. Would it be possible to add Callout-Functionality like in Obsidian? Like this: Obsidian Callouts
I love the clean look of Supernotes, but as a student I would love to have some visual possibilities.
Would love this as well
Thanks for the feature request @isaiur.
Out of interest do you have some specific examples or use cases for how you’d like this to work within cards? Why not just use a card itself as a callout, give it a tag #callout, with a fancy icon and color?
Thanks! I will try to adapt the map concept to English so that you can understand how I create the maps. I basically use the callouts for my law school content, but I also don’t have just one piece of information per card because it would be too out of context for me.
That makes sense. We will investigate this and see what we can do.
Personally I am not a fan of Obsidian’s syntax for callouts, but that certainly shouldn’t be a blocker to having this feature.
I definitely agree about not liking the syntax in obsidian for callouts, but I DO love the functionality of them. I’d prefer a supernotes version to hit ‘/’ then type “callout” or ‘<’, then you’d be presented a list of options to pick from for different types, like “info”, “warning”, “quote”, etc.
A nice addition to those options would be a “custom” option where it prompts you for a title, then you pick a custom icon.
@ariccb Do you have a possible other syntax in mind? It would be great to have everyone list their preferred syntax for callouts in this thread, as that would definitely help move this feature request along.
I‘m still at the beginning of my programming learning path but maybe it‘s possible with react? I don‘t know what you are using for supernotes but as far as I know you can define shortcuts for the Frontend which gets processed in the backend?
Blockquotes are the typical approach for this type of feature, but fwiw, I’ve always imagined just using special keywords in combination with markdown’s fence style code blocks would be better, esp if the callout types are limited to a fixed set.
(going to use tildes since I don’t have easy access to backticks on my phone)
~~~info
blah blah blah
~~~
This wouldn’t work if the callouts need to be customizable, but in that case something like a more generic trigger term and some attribute syntax could work:
~~~callout(info)
some text
~~~
~~~callout(warning)
text here
~~~
etc. Sure this could prove problematic is some future programming language named “info” or “callout” becomes popular, but I think the probability of that is rather low.
I wouldn’t mind a syntax like this:
!!info(optional custom title here)
blah blah blah content of the blockquote here
that supports multi-line
hopefully would support embedding code blocks as well inside
the content of the callout
!!
Another example
!!warning(Please don’t do this thing!)
This is the warning content of the callout
!!
The reason i like the exclamation point is it’s not common for people to start a sentence with an exclamation point, and immediately follow it with a word, so I don’t thing the syntax would be limiting for people, but they’re also VERY accessible with quickly typing, and it sort of indicates by being an exclamation point what it’s doing (ie, bringing more attention to something)
By using two exclamation points, I was thinking after typing in the second one, you could pop up a list of selectable types to choose from, kinda like how the universal coupler looks and works.
I mostly want to make sure they’re easy to add, even on mobile, and easy to remember the syntax for them. I found the blockquote syntax within backticks very hard to remember on obsidian, so i’d hope for a bit of a better solution than that, personally.
I’m a big newbie when it comes to Obsidian and all it functions.
I like the idea of these “Callouts”. I have already in mind how to use them on my cards.
I write blog posts and collect my thoughts in Supernotes and when I’m done, I write the posts in Supernotes as well.
If a post needs an update this is how I’m doing currently to catch the eyes attention:
I write a h1 header with a highlight per CSS style. Below the header I specify the update as a list.
I refer to this example on Obsidian:
I could write it like this for my needs:
[!info] Needs an update
Some text
This would look much better than what I’m doing at the moment, in my opinion. With the ability to use custom icons as well, there are almost unlimited possibilities to make it look the way you need it right now.
Edit: Just saw you moved already on and just trying to find the right syntax 
I like the idea with the !!. I feel like ~~~ would be hard to remember. I’m using ~~ rarely to strikethrough text but I guess the most users don’t use the strikethrough.
+1 to the double bang !! - I think that’s better than overloading codeblocks.
Thanks for everyones’ feedback, lots of food for thought. It’s unlikely we will use double exclamation marks !! as this is currently used to denote spoilers on the platform, multi-line spoilers is something we’d like to implement as well at some point.
I totally forgot about the spoilers! I used it a few days ago for fiddling around with the possibilities. Can’t believe I haven’t remembered this.
Hmm. Maybe a combination of both or would it be too complicated?
I thought about !>.
! would mean for me “oh, something important is going on” and > for the standard markdown for quotes.
So basically a important blockquote. I believe it would be easy to remember.
A nested variant would look like this:
!> text
!> > more text
!> > > more more text
I understand if it’s too compliment
Today I tried sth like this and will save it as templates:
<div style="background-color: rgba(143, 196, 227, 0.4); padding: 10px; border-radius: 20px;">
⚖️ <b>Normalfall:</b><br>
B möchte sein Vermögen in Aktien investieren. B schließt mit dem Vermögensberater U einen Vertrag. U soll ihm einen "guten Mix" an Aktien kaufen.
</div>
Thanks for posting the callout visual. The term “callout” actually has a number of meanings, so your description is helpful.
I like the idea, and in seamless mode the callouts could visually serve as the “margin notes” used in the Cornell Notes method. It reminds me of the “info boxes” often used in math or science textbooks. Of course that’s just one example.
I would use a tighter fillet on the corners, i.e., not so rounded, but otherwise I like your visual. I may adapt your template and use it as well. Hopefully this feature will be implemented.
Looking at my past notes, I’ve actually been using blockquotes for brief summaries of notes and other info that I want to stand out, and the card titles and headings (subheadings, etc.) served as the equivalent of the Cornell Notes cues. I sometimes apply a html color to the text of the blockquote for it to stand out more, since the blockquotes are a grey halftone and can blend more into the card background.
Perhaps color text and light color background options could be added to the existing blockquote background to set it apart graphically. This would solve the callout request for most with some graphical continuity to preserve the simplicity (or minimalist approach) of Supernotes. I’ll try to post an image later when I have time.
The image shows how I’ve used blockquotes as callouts with html text colors for graphical emphasis in the past. With background color options built in this would become much more useful and automatic. Of course, the mock-up @isaiur created (or something similar) could also work. If the callout feature is implemented, I hope the approach leans towards simplicity.
Looks great! Thanks for sharing @JohnCP.
May I asked what icon palette you used?
I think it’s the html symbol for info ⓘ ⓘ
