Creating callouts with ! and columns in callouts with !-

[Djb-Champagne]

needACallout.js

Callouts are useful and good-looking, seamlessly integrated into Obsidian. Their syntaxe is coherent with the whole Application.

• But when we make a selection, dealing with a small snippet of text, we can define different rules.
• Templater offers us the opportunity to parse this snippet so as to inject the result coherently into the Application.

needACallout.js proposes a way to write the callouts differently, coding for us the boilerplate.

Making callouts with the exclamation point (!). Defaults to note

!                      coding :   > [!note] 
This is a note.                   > This is a note.

We can even make a note with nothing :

This is a note               =>   > [!note]
                                  > This is a note

An object defines some property/value pairs :

const calloutType = {  
  i: "info",  n: "note",  q: "question",  a: "abstract", t: "todo",  
  h: "tip", s: "success",  w: "warning", f: "failure", d: "danger",  
  b: "bug",  e: "example", c: "cite",  
}  

Letters are toLowerCase transformed. So, I, N, Q, A, ... can be used.

!i                           =>    > [!info]
This is an information.            > This is an information.

Plus (+) and minus (-) signs are also respected (foldable, opened or closed):

!q+                          =>    > [!question]+
To be or not to be ?               > To be or not to be ?

So is the custom title : (space can be avoided. The result is often less readable)

!q-To be or not to be?          =>   > [!question]- To be or not to be?
Is a question, among others.         > Is a question, among others.    

We can nest the callouts with a line feed.

!w System warning               =>    > [!warning] System warning 
Some info here                        > Some info here
                                      >> [!info]- Details
!i- Details                           >> Explanation line 1.  
Explanation line 1.                   >> Explanation line 2.
Explanation line 2.                   >>> [!cite] Highly philosophical
                                      >>> Is it reasonable to nest callouts
!c Highly philosophical               >>> more than 3 or 4 times ?
Is it reasonable to nest callouts
more than 3 or 4 times ?

Practical point of view:
trims and a regex take out the blanks (defined by the \s of regex).
The blank lines outside and inside the selection except the ones defining the nest of callouts are discarded.

Technical point of view :
The needACallout.js is to be put into a TemplateScripts folder
The Template in the Templates folder is : <% tp.user.needACallout(tp) %>
Of course, the parameters of Templater must be defined :

• Template folder location : Templates (or another)
• Script files folder location : TemplateScripts (or another)

Freedom point of view :
With the .js file in hand, it is possible to modify the default_header string so as to default to an info callout or something else, or modify the calloutType object if the q = quote is prefered to q = question.

Remark

The result is a pure Obsididan object, markdown compatible.
If you appreciate the very good job done by Trevor Nichols with its 'Obsidian columns' plugin, you can keep on using it inside the callout.

Let's try to make columning simpler with !-

As we saw before, making a selection permits us to change the local rules. The difficulty is to inject something coherent into the Application. This job as been done by Trevor.

Suppose we want to divide the body of the previous warning message into 3 columns.
We keep the 2 first lines : System warning, Some info here
We divide the rest of the callout into 3 columns with some parameters :

• First column width = 1.5 units
• Second column width = 1 unit
• Third column width = 3 units

Let's see how to write the columns (exclamation point and dash) :

!-1.5 This is the first column  
text can follow here  
!- This is the second column  
text can follow here  
!-3 This is the third column  
text can follow here  

When the width is 1 unit, it's the default. It's not mandatory.
When the width is not 1 unit, the multiplication factor follows, without any space.

• A space after is mandatory
• This value is between 0.5 and 10, with an increment of 0.5
• A zero can be used. 2.5 and 2.50 are correct.

The final result is :

!w System warning   
Some info here                    // no new line here after to define the columns
!-1.5 This is the first column
text can follow here
!- This is the second column
text can follow here
!-3 This is the third column
text can follow here
                                  // each callout is serated with a new line`
!i- Details
Explanation line 1.
Explanation line 2.

!c Highly philosophical
Is it reasonable to nest callouts
more than 3 or 4 times ?

The coherent result is :

> [!warning]  System warning
> Some info here
> ````col
> height: shortest
> ===
> ```col-md
> flexGrow=1.5
> ===
> This is the first column
> text can follow here
> ```
> 
> ```col-md
> flexGrow=1
> ===
> This is the second column
> text can follow here
> ```
> 
> ```col-md
> flexGrow=3
> ===
> This is the third column
> text can follow here
> ```
> 
> ````
>> [!info]- Details
>> Explanation line 1.
>> Explanation line 2.
>>> [!cite]  Highly philosophical
>>> Is it reasonable to nest callouts
>>> more than 3 or 4 times ?

Of course, it's possible to adapt this template to make columns outside callouts.

The Git-Hub project is Djb-Champagne/Templates
Hope it can be useful to someone. It's just a simple code to do simple things.