remark-obsidian plugin doesn't work

[iicdii]

I am trying to use remark-obsidian plugin, but it doesn't work. Help?

import remarkObsidian from "remark-obsidian";

export default defineConfig({
  // ...
  markdown: {
    mdxRs: false,
    remarkPlugins: [remarkObsidian],
  },
});

Input .md

---
title: Obsidian Test
---

# Obsidian Test

> [!note] Callout Note Test
> Callout Note Content

[[Internal Link]] Test

HTML Output

<div class="rspress-doc">
  <h1
    id="obsidian-test-1"
    class="text-3xl mb-10 leading-10 tracking-tight ---theme-default-src-layout-DocLayout-docComponents-index-module__title-b36501"
  >
    <a
      class="---theme-default-src-layout-DocLayout-docComponents-index-module__link-_095b6 header-anchor"
      aria-hidden="true"
      href="#obsidian-test-1"
      >#</a
    >Obsidian Test
  </h1>
</div>

The code below is part of the remark-obsidian code. It reads a blockquote and generates an obsidian-style html node.

// ...
  visit(tree, "blockquote", (node, index, parent) => {
      const blockquote = toString(node);

      if (blockquote.match(CALLOUT_REGEX)) {
        const [, type, title] = CALLOUT_REGEX.exec(blockquote);
        const content = blockquote
          .replace(CALLOUT_REGEX, "")
          .trim()
          .replace(/\n/g, " ");
        const icon = ICONS[type.toLowerCase()];

        const html = {
          type: "html",
          data: {},
          value: `<blockquote class="callout ${type.toLowerCase()}">
                    ${
                      icon
                        ? `
                        <div class="callout-title">
                            ${
                              icon
                                ? `<div class="callout-icon">${icon}</div>`
                                : ""
                            }
                            <div class="callout-title-inner">${
                              title || type.toLowerCase()
                            }</div>
                        </div>
                    `
                        : ""
                    }
                    <div class="callout-content">
                        <p>${content}</p>
                    </div>
                </blockquote>`,
        };

        parent.children.splice(index, 1, html);

        return node;
      }

      return node;
    });

[iicdii]

Self Answer

Adding rehype-raw solved the issue.

rspress.config.ts

import path from 'path';
import { defineConfig } from 'rspress/config';
import remarkObsidian from 'remark-obsidian';
import rehypeRaw from 'rehype-raw';

const mdxNodeTypes = /** @type {const} */ [
  "mdxFlowExpression",
  "mdxJsxFlowElement",
  "mdxJsxTextElement",
  "mdxTextExpression",
  "mdxjsEsm",
];

export default defineConfig({
  markdown: {
    mdxRs: false,
    remarkPlugins: [remarkObsidian],
    rehypePlugins: [[rehypeRaw, { passThrough: mdxNodeTypes }]],
  },
  // ...
});