Obsidian Callouts in Marked

I received a request a while back, shortly after my post about Marked 2 and Obsidian, asking me to support Obsidian callouts. I don’t remember who made the request, but it got lodged in the back of my head. I had an hour today to knock out a solution.

Rather than trying to incorporate this directly into Marked, I made it a script that can be included in a Conductor configuration. Easier, and less intrusive to Marked users who don’t care about Obsidian.

Obsidian callouts are a block quote-style syntax that looks like:

> [!note] A note with Markdown content
> Just *checking*
> how this **works**... 
> [a link](https://brettterpstra.com)

They can be made to fold, nested in each other, have a title only, or a title with content processed as Markdown. Here’s how they look in Obsidian:

And with the script, here’s how they look in Marked:

The output is just nested divs with classes, so a separate stylesheet is required to make them look correct. This stylesheet is injected by Conductor as well, and adapts pretty well to any Style in Marked. For example, here it is with the Manuscript style:

I separated the script from the main Obsidian script so that, should you want to, you can run it on any content and make use of the Obsidian callout syntax irrespective of other syntax.

The script is in my Conductor example config, along with the stylesheet document. You can see in the tracks.yaml file that the script and injection are defined as a sequence:

tracks:
  - title: Preprocessing
    condition: phase is pre
    tracks:
    - title: Obsidian Markdown document
      condition: tree contains .obsidian AND (extension is md OR extension is markdown)
      sequence:
        - script: obsidian-md-filter
        - script: obsidian-callouts
        - filter: insertCSS(callouts)

Note that this makes use of the insertCSS() filter, which I just added in conductor 1.0.16, so make sure you update. This filter compresses the CSS and injects it at the beginning of the document, after any existing metadata.

The files you need are the script (placed in ~/.config/conductor/scripts/) and the style (placed in ~/.config/conductor/css/). Both of these are included if you just clone the example config repo. Then include a sequence like above for any given condition to start handling Obsidian callout syntax. This works best as a Preprocessor, but should still function fine as part of a Processor if you’re also handling the Markdown conversion in a script.