Callouts are highlighted blocks of text in a document showing notes or asides. For example, in a textbook or an online tutorial, you have likely come across highlighted blocks pointing out tips, notes, or important information. In DEVONthink To Go 4.1 Lagrange, our new Markdown renderer now supports easily creating them in your Markdown documents.
In Markdown, callouts are a type of blockquote but use a special syntax: > [!type-of-callout] Optional Title. Make sure there is no space between the exclamation point and the callout type. In the next line, you start with another > and then type your text. Here are the supported callouts (you can see what they look like in the screenshot above):
Important
> [!important] Boating Tip
> Remember this alliterative phrase: Red right, returning…
Note
This is the same as [!info].
> [!note]
> The minimum system requirement is macOS 13.5 Ventura.
Warning
You can create multi-line callouts by placing a blockquote character on each line.
> [!warning] Beware of coral snakes
> When you see a snake, repeat this rhyme:
> Red touch black, friend of Jack
> Red touch yellow, kill a fellow.
Caution
> [!caution]
> Slow down for yellow lights.
Tip
> [!tip] Accounting Trick 01
> Errors in numerical transposition are always divisible by 9.
Currently, this feature is only available in DEVONthink To Go, but we’re also bringing it to DEVONthink in a future release.
8 Likes
One question; How would you code this in your own css? I noticed it only works if I don’t apply my own css in settings.
That’s correct, adding your own CSS currently overwrites all default CSS. DEVONthink To Go 4.1.1 will soon change this and make adding your own CSS rules cascading (as it should).
2 Likes
That’s great. Could you also provide a convert to HTML option in DTTG? That would tremendously help with debugging MD/CSS/JS issues. Currently, there’s no way to see the HTML DTTG generates from MD. As far as I can tell.
That’s true, we here can use Safari in developer mode. Noted.
I suppose the same (how to code in your won css) also applies to DT, right?
I’m using my own modified css, and get the following:
Ah oops, thanks Christian! - I misread eboenisch’s post as referring to DTTG versions 
Is there somewhere I can find the default CSS for the callouts? I am using my own CSS on MacOS and would really like to be able to use/tweak the callouts starting from what they are by default, which is already really quite nice.
If I add a stylesheet (Settings → Files → Markdown → Style Sheet), even such mimimal code as
h2 {
color: red;
}
Then in preview mode or converting to another format the Callouts no longer display.
For example, without adding a Style sheet:
With the code shown above:
Is this an expected limitation with using Callouts?
macOS 26.5.2, DEVONthink: 4.3.2.
Impossible to help without seeing the original MD
Thank you for the response.
The original MD is:
# Markdown syntax
{{TOC}}
## Callouts
> [!important] Boating Tip
> Remember this alliterative phrase: Red right, returning…
Note
This is the same as [!info].
> [!note]
> The minimum system requirement is macOS 13.5 Ventura.
Warning
You can create multi-line callouts by placing a blockquote character on each line.
> [!warning] Beware of coral snakes
> When you see a snake, repeat this rhyme:
> Red touch black, friend of Jack
> Red touch yellow, kill a fellow.
Caution
> [!caution]
> Slow down for yellow lights.
Tip
> [!tip] Accounting Trick 01
> Errors in numerical transposition are always divisible by 9.
Also attached as a zip file.
DevonThink Markdown syntax specific.md.zip (1 KB)
The stylesheet is overriding everything so if you haven’t specifically styled, e.g., callouts, they will go back to default styling.
Development will have to look at this but you could also try adding this to the very top of your external stylesheet…
@import url("file:///Applications/DEVONthink.app/Contents/Resources/chat.css");
1 Like
Perhsps following DTTG’s lead and wrapping the default CSS in a @layer would be a good idea for one of the maintenance releases.
Usage of @ayer wouldn’t change anything as currently a user-defined stylesheet replaces the internal one. A future release will probably revise this.
Bluefrog,
Thank you for the explanation and the pointer to the chat.css file.
You’re welcome.
Do note it’s not prescriptive, i.e., not something I would recommend in the documentation, but it may be useful in the interim.
