Obsidian Callouts

[davidvkimball]

Hey there, I tried repurposing the existing syntax of callouts from

:::note
Spit keyboards are not for everyone.
:::

To this:

> [!Note] Important
> Split keyboards are not for everyone.

But am really struggling. Does anyone have pointers on what to do? I tried making a custom script and then removing the old one but I was failing.

[Hasenpfote]

Is that meant to be done as a pre-processing step, or during the build process?
Either way, if the markdown content can be loaded into memory,
how about something like this? It should work for simple syntax.

function convertCallouts(md, lineEnding = '\n') {
  const types = ['note', 'info', 'todo']; // Add other callout types if necessary
  const pattern = `:::(${types.join('|')})\\n([\\s\\S]*?)\\n:::`;
  const regex = new RegExp(pattern, 'g');

  const normalized = md.replace(/\r\n|\r/g, '\n');
  const replaced = normalized.replace(
    regex,
    (_, type, content) => {
      const identifier = type.charAt(0).toUpperCase() + type.slice(1);
      const lines = content.split('\n').map(line => `> ${line}`).join('\n');
      return `> [!${identifier}]\n${lines}`;
    }
  );

  return lineEnding === '\n' ? replaced : replaced.replace(/\n/g, lineEnding);
}

Example:

const markdown = `
Some paragraph here.

:::note
Split keyboards are not for everyone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
:::

Another paragraph.
`;

console.log(convertCallouts(markdown));

Output:

Some paragraph here.

> [!Note]
> Split keyboards are not for everyone.
> 
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another paragraph.

[davidvkimball]

Is that meant to be done as a pre-processing step, or during the build process? Either way, if the markdown content can be loaded into memory, how about something like this? It should work for simple syntax.

function convertCallouts(md, lineEnding = '\n') {
  const types = ['note', 'info', 'todo']; // Add other callout types if necessary
  const pattern = `:::(${types.join('|')})\\n([\\s\\S]*?)\\n:::`;
  const regex = new RegExp(pattern, 'g');

  const normalized = md.replace(/\r\n|\r/g, '\n');
  const replaced = normalized.replace(
    regex,
    (_, type, content) => {
      const identifier = type.charAt(0).toUpperCase() + type.slice(1);
      const lines = content.split('\n').map(line => `> ${line}`).join('\n');
      return `> [!${identifier}]\n${lines}`;
    }
  );

  return lineEnding === '\n' ? replaced : replaced.replace(/\n/g, lineEnding);
}

Example:

const markdown = `
Some paragraph here.

:::note
Split keyboards are not for everyone.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
:::

Another paragraph.
`;

console.log(convertCallouts(markdown));

Output:

Some paragraph here.

> [!Note]
> Split keyboards are not for everyone.
> 
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another paragraph.

Thank you, this is helpful! However, I'm unsure how to actually implement this. I tried creating a remark or rehype plugin and importing it into my config file but it just won't work. I'm not sure what I'm doing wrong.

[davidvkimball]

Alright I actually did get it to work, here's what I did:

// remark-obsidian-callouts.js
// Converts Obsidian-style callouts (e.g., > [!NOTE] Title) to directive format (e.g., :::note[Title])
// Supported types: note, info, todo, tip, important, warning, caution
// Follows unified/remark plugin pattern

import { visit } from 'unist-util-visit';

const SUPPORTED_TYPES = {
  note: 'note',
  info: 'info',
  todo: 'todo',
  tip: 'tip',
  important: 'important',
  warning: 'warning',
  caution: 'caution',
};

const OBSIDIAN_CALLOUT_REGEX = /^\[!(NOTE|INFO|TODO|TIP|IMPORTANT|WARNING|CAUTION)](\s+(.+))?/i;

export default function remarkObsidianCallouts() {
  return (tree) => {
    visit(tree, 'blockquote', (node, index, parent) => {
      if (!node.children || node.children.length === 0) return;
      const firstChild = node.children[0];
      if (firstChild.type !== 'paragraph' || !firstChild.children || firstChild.children.length === 0) return;
      const textNode = firstChild.children[0];
      if (textNode.type !== 'text') return;
      const match = textNode.value.match(OBSIDIAN_CALLOUT_REGEX);
      if (!match) return;
      const type = match[1].toLowerCase();
      if (!SUPPORTED_TYPES[type]) return;
      const customTitle = match[3] ? match[3].trim() : null;
      // Remove the callout marker from the first paragraph
      textNode.value = textNode.value.replace(OBSIDIAN_CALLOUT_REGEX, '').trim();
      // If the first paragraph is now empty, remove it
      if (textNode.value === '' && firstChild.children.length === 1) {
        node.children.shift();
      }
      // If there is a custom title, insert it as a paragraph node at the start
      let children = node.children;
      if (customTitle) {
        children = [
          {
            type: 'paragraph',
            data: { directiveLabel: true },
            children: [{ type: 'text', value: customTitle }],
          },
          ...children,
        ];
      }
      // Build directive node
      const directiveNode = {
        type: 'containerDirective',
        name: type,
        children,
        data: {
          hName: 'div',
        },
      };
      parent.children[index] = directiveNode;
    });
  };
}