Insert Callout Template

[willasm]

I wanted a template to insert a callout that prompts with valid callout types and this is what I came up with.
To use, insert the template in your note and run it with Templater. It will give you the following prompts...

1. The callout type, "Abstract", "Attention", "Bug", etc..
2. The folding state, "Not Foldable", "Default Expanded", "Default Collapsed"
3. Optional Title Text
4. Optional Content Text (Multiline Enabled)

Hope you find this useful.

Tip: You can use QuickAdd plugin to create a macro to insert this template & replace with Templater. This will let you insert a callout with only a couple of keystrokes, or even just one if you assign a hotkey to the macro.

<%_* let calloutType = await tp.system.suggester(["Abstract", "Attention", "Bug", "Caution", "Check", "Cite", "Danger", "Done", "Error", "Example", "Fail", "Failure", "FAQ", "Help", "Hint", "Important", "Info", "Missing","Note", "Question", "Quote", "Success", "Summary", "Tip", "TLDR", "Todo", "Warning"], ["abstract", "attention", "bug", "caution", "check", "cite", "danger", "done", "error", "example", "fail", "failure", "faq", "help", "hint", "important", "info", "missing","note", "question", "quote", "success", "summary", "tip", "tldr", "todo", "warning"], false, "Which type of callout do you want to insert?")%>

<%_* let foldState = await tp.system.suggester(["Not Foldable", "Default Expanded", "Default Collapsed"], ["", "+", "-"], false, "Folding state of callout?")%>

<%_*
  let title = await tp.system.prompt("Optional Title Text", "")
%>

<%_*
  let calloutContent = await tp.system.prompt("Optional Content Text (Shift Enter to Insert New Line)", "", false, true)
  calloutContent = calloutContent.replaceAll("\n", "\n> ")
%>

<%-*
if (calloutType != null) {
  let content = '> [!' + calloutType + ']' + foldState + ' ' + title + '\n> ' + calloutContent + '\n'
  tR+=content
}
%>

[sadkodev]

Simple and functional ! Great !!

[Ton-yi]

thanks

[filmgal]

Love this, thanks!

[JustAnotherSapiens]

I made a cleaner version with some emojis indicating the color and icon of the callout:

<%*
const callouts = {
   note:     '🔵 ✏ Note',
   info:     '🔵 ℹ Info',
   todo:     '🔵 🔳 Todo',
   tip:      '🌐 🔥 Tip / Hint / Important',
   abstract: '🌐 📋 Abstract / Summary / TLDR',
   question: '🟡 ❓ Question / Help / FAQ',
   quote:    '🔘 💬 Quote / Cite',
   example:  '🟣 📑 Example',
   success:  '🟢 ✔ Success / Check / Done',
   warning:  '🟠 ⚠ Warning / Caution / Attention',
   failure:  '🔴 ❌ Failure / Fail / Missing',
   danger:   '🔴 ⚡ Danger / Error',
   bug:      '🔴 🐞 Bug',
};

const type = await tp.system.suggester(Object.values(callouts), Object.keys(callouts), true, 'Select callout type.');
const fold = await tp.system.suggester(['None', 'Expanded', 'Collapsed'], ['', '+', '-'], true, 'Select callout fold option.');

const title = await tp.system.prompt('Title:', '', true);
let content = await tp.system.prompt('Content (New line -> Shift + Enter):', '', true, true);
content = content.split('\n').map(line => `> ${line}`).join('\n')

const calloutHead = `> [!${type}]${fold} ${title}\n`;

tR += calloutHead + content
-%>

[wlai-lp]

i don't know what this is, but i know it's amazing, ty

[Today20092]

Awesome friend!

[biidon]

Hello, can you help me, thank you!

<%*
const callouts = {
question: '問題',
};
-%>

Select 'question' type, -> Select 'fold' -> Input 'title' -> Press the 'enter' button -> Input 'content' -> Click 'submit'

[!question]+ This is 'Input title'
This is 'Input content'

Non-input 'title' -> Press the 'enter' button -> Input 'content' -> Click 'submit'

[!question]+
This is 'Input content'

My question: How to write code if I want to achieve the following situation?
Non-input 'title' -> After pressing the 'enter' button, '問題' automatic input 'title' -> Input 'content' -> Click 'submit'

[!question]+ 問題
This is 'Input content'

[willasm]

Really like your version, much cleaner than my original version. 👍

[Neoniq]

Not mine, found on the internet

<%*
//get selection
noteContent = await tp.file.selection();

// Check if the selected text has one or two strings
let numberOfStrings = noteContent.split('\n').length;
let titre;
let corps;

if (numberOfStrings === 1) {
  // Ingest titre only
  titre = noteContent.match(/.*/g)[0];
  corps = "";
} else if (numberOfStrings > 1) {
  // Ingest titre and corps
  titre = noteContent.match(/.*(?=\n.*)/g)[0];
  corps = noteContent.match(/(?<=.*\n)(.|\n)*/g).join('\n');
}
console.log(corps);
// list callouts
const callouts = {
   note:     '🔵 ✏️ Note',
   info:     '🟢 ℹ️ Info',
   todo:     '🟢 ✔️ Todo',
   asidecleanright: '⚪️ 💬commentaire',
   tip:      '🌐 🔥 Tip / Hint / Important',
   abstract: '🌐 📋 Abstract / Summary / TLDR',
   question: '🟡 ❓ Question / Help / FAQ',
   quote:    '🔘 💬 Quote / Cite',
   example:  '🟣 📑 Example',
   success:  '🟢 ✔️ Success / Check / Done',
   warning:  '🟠 ⚠️ Warning / Caution / Attention',
   failure:  '🔴 ❌ Failure / Fail / Missing',
   danger:   '🔴 ⚡️ Danger / Error',
   resources: 'resources',
   code: 'code',
   code2: 'code version 2',
   proof: 'transparent callout'  
};
// return callout
const type = await tp.system.suggester(Object.values(callouts), Object.keys(callouts), true, 'Select callout type.');
//return fold
const fold = await tp.system.suggester(['None', 'Expanded', 'Collapsed'], ['', '+', '-'], true, 'Select callout fold option.');

//return titler
const title = await tp.system.prompt('Title:', titre , true);

//get array of lines
lines = corps.split('\n');
//make a new string with > prepended to each line
let newContent = "";
lines.forEach(l => {
  newContent += '> ' + l + "\n";
})
//remove the last newline character
newContent = newContent.replace(/\n$/, "");
//define callout header
header = "> [!"+type+"]"+fold + " " + title +"\n";
// Return the complete callout block
return header + newContent;
%>

[HippyCraig]

So im kinda new to useing this type of template what is the diff betwee <%* or <%_* or <%-* I have also see <%+* on other scripts, I tried searching but I dont know what terms to search for. Is there any documenation you can point me at?

[Cryptodarktrader]

Each one is for a different function, the + is to indicate that it is a recurring code, meaning that it must be executed every time the note is opened again. The _ or - are to control whitespace. You have all the information here:

https://silentvoid13.github.io/Templater/commands/dynamic-command.html

https://silentvoid13.github.io/Templater/commands/whitespace-control.html

[HippyCraig]

Thanks I will take a look

[foxthewolf245]

Nice, I'm seeing that this leaves quite a few possibilities.

[stracker-phil]

Here's a slightly modified version.

• Exit the template if no callout-type is selected (pressing ESC in the first prompt)
• Callout types are alphabetically ordered
• When text is selected, that text is used as callout title, without prompting for a title
• The cursor is positioned inside the Callout Content section, instead of prompting for content.

To add content to the callout, press RETURN and continue typing. Otherwise, leave the callout as-is to get a title-only callout.

<%*
const callouts = {
	// Colors: 🟥🟧🟨🟩🟦🟪⬛️⬜️🟫
	"bug":          "🟥 Bug",
	"danger":       "🟥 Danger | Error",
	"fail":         "🟥 Fail | Failure | Missing",
	"warning":      "🟧 Warning | Attention | Caution",
	"help":         "🟧 Help | FAQ | Question",
	"success":      "🟩 Success | Done | Check",
	"abstract":     "🟦 Abstract | Summary | TLDR", 
	"example":      "🟦 Example",
	"hint":         "🟦 Hint | Important | Tip",
	"info":         "🟦 Info",
	"note":         "🟦 Note",
	"todo":         "🟦 Todo",
	"cite":         "⬜️ Cite | Quote",
	
	// Custom types (via Callout Manager)
	"link":         "🟨 Link",
	"presentation": "🟨 Presentation",
	"money":        "🟨 Money",
	"chart":        "🟦 Line Chart",
	"visual":       "🟪 Styled Quote | Visual Quote",
	"visual-img":   "🟪 Styled Image | Visual Image",
	"image":        "🟪 Image",
	"brain":        "🟪 Brain | AI",
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
	.sort() // Remove this line to use predefined order.
	.forEach(key => 
		typeNames.push(key) && typeLabels.push(callouts[key])
	);

let calloutType = await tp.system.suggester(
	typeLabels,
	typeNames,
	false,
	"Select callout type."
);

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
  return;
}

let foldState = await tp.system.suggester(
	["Static", "Expanded", "Collapsed"],
	["", "+", "-"],
	false,
	"Select callout folding option."
);

let title = await tp.file.selection();
if (!title) {
	title = await tp.system.prompt("Title Text", "");
}
_%>

> [!<% calloutType %>]<% foldState %> <% title %><%* tp.file.cursor() %>

[mbbroberg]

Worked perfectly, thank you so much @stracker-phil 👏

[Lagann311]

I modified the version of @stracker-phil so that the selected text is put into the callout content rather than the title.
This allows to wrap multiple lines into the callout in the same manner as the default Insert callout Command.

Summary:

1. Prompt to choose Callout type (custom callouts can be included here)
2. Prompt to enter title
3. Prompt to choose fold type
   -> If text was selected, it is now placed inside the callout content.

<%*
const callouts = {
	// Colors: 🟥🟧🟨🟩🟦🟪⬛️⬜️🟫
	"bug":          "🟥 Bug",
	"danger":       "🟥 Danger | Error",
	"fail":         "🟥 Fail | Failure | Missing",
	"warning":      "🟧 Warning | Attention | Caution",
	"help":         "🟧 Help | FAQ | Question",
	"success":      "🟩 Success | Done | Check",
	"abstract":     "🟦 Abstract | Summary | TLDR", 
	"example":      "🟦 Example",
	"hint":         "🟦 Hint | Important | Tip",
	"info":         "🟦 Info",
	"note":         "🟦 Note",
	"todo":         "🟦 Todo",
	"cite":         "⬜️ Cite | Quote",
	
	// Custom types (via Callout Manager)
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
	.sort() // Remove this line to use predefined order.
	.forEach(key => 
		typeNames.push(key) && typeLabels.push(callouts[key])
	);

let calloutType = await tp.system.suggester(
	typeLabels,
	typeNames,
	false,
	"Select callout type."
);

let title = await tp.system.prompt("Callout Header:")

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
  return;
}

let foldState = await tp.system.suggester(
	["Static", "Expanded", "Collapsed"],
	["", "+", "-"],
	false,
	"Select callout folding option."
);

let content = await tp.file.selection();

// Format each line of content to be part of the callout
const formattedContent = content.split('\n').map(line => `> ${line}`).join('\n');
_%>

> [!<% calloutType %>]<% foldState %> <% title %>
<% formattedContent %> <%* tp.file.cursor() %>

[Ninja-In-Training]

Hi SilentVoid13, really great snippet. I haven't seen one but do you think you might be able to incorporate the multi-column callout to this. I think it would be a great addition. Thanks

[tophers-code]

Thank you all for this. I've just gotten started with Obsidian and I am obsessed. ;-) Love the callout features and I've been wanting a fast way to create them.

I took a little of what each of you did and added my own tweaks - you know, to each their own. Aside from organizing the declaration of the callouts in a way that helped me and a few other code changes the main enhancements that I made were to:

1. Adding numbers to each prompt option for faster selection.

• Example: (1. Bug, 2. Danger, etc.)
• Updated prompt descriptions to remind you to use number keys
• This also works with the Templater Suggester out of the box, reducing the options down.

2. Listing all of the different callouts, even if they have the same icon

• Side Note: If all you are wanting is the icon, I have a reduced script below for you as well
• I like my code to be clean, and having a header miss-matched with the callout name doesn't work for me (ie: [!fail]- Missing or [!hint]- Important - which brings me to my third change.

3. Pre-filling the Header prompt, since 90% of the time, my header matches the callout name, I changed the prompt to auto populate with the Title. I played around with it also appending a ' - ', but decided against it; but that is an easy enough change if you would like it.

I hope this is a help to the community! Happy Coding!

Primary Changes

File: insert-callout-template-pnx.md
Date: May 13, 2025

<%*
const callouts = {
//  Callout name   |  Prompt Name     |  UI Icon Description

    // Red - Critical/Error group
    "bug":            "🟥 🪳 Bug",        // Bug icon
    "danger":         "🟥 ⚡️ Danger",     // Lightning Bolt icon
    "error":          "🟥 ⚡️ Error",      // Lightning Bolt icon
    "fail":           "🟥 ❌ Fail",       // 'X' mark icon
    "failure":        "🟥 ❌ Failure",    // 'X' mark icon
    "missing":        "🟥 ❌ Missing",    // 'X' mark icon
    
    // Orange - Warning group
    "attention":      "🟧 ⚠️ Attention",  // Exclamation Sign icon
    "caution":        "🟧 ⚠️ Caution",    // Exclamation Sign icon
    "warning":        "🟧 ⚠️ Warning",    // Exclamation Sign icon
    "help":           "🟧 ❓ Help",       // Question Mark in Circle icon
    "faq":            "🟧 ❓ FAQ",        // Question Mark in Circle icon
    "question":       "🟧 ❓ Question",   // Question Mark in Circle icon
    
    // Green - Success group
    "done":           "🟩 ✅ Done",       // Green Checkmark icon
    "check":          "🟩 ✅ Check",      // Green Checkmark icon
    "success":        "🟩 ✅ Success",    // Green Checkmark icon
    
    // Blue - Information group
    "info":           "🟦 ⓘ Info",       // 'i' in Circle icon
    "note":           "🟦 ✏️ Note",       // Pencil icon
    "abstract":       "🟦 📋 Abstract",   // Clipboard icon 
    "summary":        "🟦 📋 Summary",    // Clipboard icon  
    "tldr":           "🟦 📋 TL;DR;",     // Clipboard icon  
    "example":        "🟦 📑 Example",    // Outline icon (ish so a folder?)
    "hint":           "🟦 🔥 Hint",       // Flame icon
    "important":      "🟦 🔥 Important",  // Flame icon
    "tip":            "🟦 🔥 Tip",        // Flame icon
    "todo":           "🟦 ✅ Todo",       // Checkmark in Circle icon
    
    // White - Quotes
    "cite":           "⬜️ ⍘ Cite",        // Quotation Mark icon
    "quote":          "⬜️ ⍘ Quote",       // Quotation Mark icon
    
    // Custom types (via Callout Manager)
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
	// Uncomment the line below to sort the callouts order alphabetically
	//.sort()
	.forEach((key, index) => {
	    typeNames.push(key);
	    // Add number prefix to each option for keyboard selection
	    typeLabels.push(`${index+1}. ${callouts[key]}`);
	});

let calloutType = await tp.system.suggester(
    typeLabels,
    typeNames,
    false,
    "Select callout type (use numbers 1-" + typeLabels.length + " to select)"
);

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
    return;
}

// Extract the main name from the label to pre-fill the header
let defaultTitle = callouts[calloutType].split(' ').pop();

let title = await tp.system.prompt("Callout Header:", defaultTitle);

let foldState = await tp.system.suggester(
    ["1. Static", "2. Expanded", "3. Collapsed"],
    ["", "+", "-"],
    false,
    "Select callout folding option (use numbers 1-3 to select)"
);

let content = await tp.file.selection();

// Format each line of content to be part of the callout
const formattedContent = content.split('\n').map(line => `> ${line}`).join('\n');
_%>

> [!<% calloutType %>]<% foldState %> <% title %>
<% formattedContent %> <%* tp.file.cursor() %>

Icon Only Version

File: insert-callout-template-icons-pnx.md
Date: May 13, 2025
Note: The formatting of the callouts in the code is intentional in order to have the color blocks line up in the prompt

<%*
const callouts = {
//  Callout name   |  Icon     |  UI Icon Description

    // Red - Critical/Error group
    "bug":            "  🟥   🪳",   // Bug icon
    "danger":         "  🟥   ⚡️",   // Lightning Bolt icon
    "fail":           "  🟥   ❌",   // 'X' mark icon

    // Orange - Warning group
    "attention":      "  🟧   ⚠️",  // Exclamation Sign icon
    "help":           "  🟧   ❓",  // Question Mark in Circle icon
    
    // Green - Success group
    "done":           "  🟩   ✅",  // Green Checkmark icon
    
    // Blue - Information group
    "info":           "  🟦   ⓘ",  // 'i' in Circle icon
    "note":           "  🟦   ✏️",  // Pencil icon
    "abstract":       "  🟦   📋",  // Clipboard icon 
    "example":        "🟦   📑",  // Outline icon (ish so a folder?)
    "hint":           "🟦   🔥",  // Flame icon
    "todo":           "🟦   ✅",  // Checkmark in Circle icon
    
    // White - Quotes
    "cite":           "⬜️   ⍘",   // Quotation Mark icon
    
    // Custom types (via Callout Manager)
};

const typeNames = [];
const typeLabels = [];

Object.keys(callouts)
    // Uncomment the line below to sort the callouts order alphabetically
    //.sort()
    .forEach((key, index) => { typeNames.push(key); 
	    // Add number prefix to each option for keyboard selection 
	    typeLabels.push(`${index+1}. ${callouts[key]} ${key}`);
    });

let calloutType = await tp.system.suggester(
    typeLabels,
    typeNames,
    false,
    "Select callout type (use numbers 1-" + typeLabels.length + " to select)"
);

// Stop here when the prompt was cancelled (ESC).
if (!calloutType) {
    return;
}

let title = await tp.system.prompt("Callout Header:");

let foldState = await tp.system.suggester(
    ["1. Static", "2. Expanded", "3. Collapsed"],
    ["", "+", "-"],
    false,
    "Select callout folding option (use numbers 1-3 to select)"
);

let content = await tp.file.selection();

// Format each line of content to be part of the callout
const formattedContent = content.split('\n').map(line => `> ${line}`).join('\n');
_%>

> [!<% calloutType %>]<% foldState %> <% title %>
<% formattedContent %> <%* tp.file.cursor() %>