How to Use Markdown Callouts

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.

6 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).

1 Like

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:

See…

1 Like

Ah oops, thanks Christian! - I misread eboenisch’s post as referring to DTTG versions :slight_smile: