Custom Callouts - drbap/magicuser-theme-for-obsidian GitHub Wiki
MagicUser Callouts
Gallery Callouts
> [!g- + color] Callout Title
> [!g- + color|number of columns] Callout Title
Colors: white, black, gray
Number of columns: 1 - 5
-
Create image galleries. You can quickly organize and display your images in columns (1 to 5 columns).
-
Gallery callouts in reading mode are interactive. Clicking and holding any image thumbnail within a gallery callout triggers a lightbox effect. This immerses you in the image by gently dimming the background, allowing you to appreciate its details without distractions.
-
Number of columns: The default callout option is 3 columns, if you don't add
|numberof columns. You can quickly change image gallery display by changing this number (1 - 5 columns).
Examples:
White background color - default (3 columns)
> [!g-white] Your Callout Title
> Place image 1 link (image 1)
> Place image 2 link (image 2)
> Place image n link (image n)
Gray background color - 5 columns
> [!g-gray|5] Your Callout Title
> Place image 1 link (image 1)
> Place image 2 link (image 2)
> Place image n link (image n)
Media Callouts
> [!m- + color] Callout Title
Colors: white, black, gray
Table Callouts
> [!table]
You can add a table inside the table callout and adjust the table size/width according to the page.
> [!table + |30% - 100%] (percentage of the page occupied by the table)
- Values: 30%, 40%, 50%, 60%, 70%, 80%, 90% and 100%.
- You can also center the table (just add
centerafter the percentage). - Don't forget to leave an empty line before inserting the table.
Check it out the examples below.
Default Table Callout
> [!table] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
Table 70%
> [!table|70%] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
Table 50% width and centered
- add
percentage center
> [!table|50% center] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
Highlighter Callouts
> [!hl- + color] Your Callout Title
Colors: green, blue, orange, yellow, red, pink, purple
Pen Callouts
> [!p- + color] Your Callout Title
Colors: green, blue, orange, yellow, red, pink, purple
Quote Callouts
> [!q- + color] Quote
Colors: green, blue, orange, yellow, red, pink, purple
Box Callouts
> [!b- + color] Your Callout Title
Colors: green, blue, orange, yellow, red, pink, purple
Untitled Box Callouts
> [!ub- + color]
Colors: green, blue, orange, yellow, red, pink, purple
Line Callouts
> [!l- + color] Your Title
Colors: green, blue, orange, yellow, red, pink, purple
Center the content by adding |center as shown below:
> [l-+ color|center] Your callout title
To align right, use |right.
Line Box Callouts
> [!lb- + color] Your Title
Colors: green, blue, orange, yellow, red, pink, purple
Callout Headings (H1 - H6)
> [!h1 to h6- + color] Your Title
Colors: green, blue, orange, yellow, red, pink, purple
Center the callout heading by adding |center as shown below:
> [h1 to h6- + color|center] Your callout title
To align right, use |right.
Specific Callouts
> [!video]
> [!mic]
> [!clip] or > [!paperclip]
> [!book]
> [!comment]
> [!target]
> [!pro] or > [!pros]
> [!con] or > [!cons]
> [!link] or > [!links]
> [!magic]
Resize Callouts
- All callouts can be resized. You can use the same syntax as table callouts in other callouts to resize them on screen (also center them).
> [!callout-name|percentage] or
> [!callout-name|percentage center]
> [!question|80% center] Your callout title
> Your callout content
- Values: 30%, 40%, 50%, 60%, 70%, 80%, 90% and 100%.
- You can also center the callout (just add
centerafter the percentage)