rsbuild-plugin-markdown-loader

A custom Markdown loader plugin for Rsbuild that supports transforming .md files using a high-performance Neon Rust parser. Supports GitHub-flavored Markdown (GFM).

Features

• Parses .md files via a fast Rust backend using Neon
• Optional GitHub-flavored Markdown support
• Easily pluggable into any Rsbuild project

Installation

npm add rsbuild-plugin-markdown-loader -D

Note: You must also install the rs-markdown-parser native module, which is a Neon-powered Markdown parser.

npm add rs-markdown-parser

Usage

Add the plugin to your rsbuild.config.ts:

// rsbuild.config.ts
import { pluginMarkdownLoader } from "rsbuild-plugin-markdown-loader";

export default {
  plugins: [
    pluginMarkdownLoader({
      gfm: true,
    }),
  ],
};

Use Case

When this plugin is configured, you can directly import .md files into your frontend code and render them as HTML.

Example: Markdown as Component Content

// main.ts or playground.ts
import "./index.css";
import Test from "./test.md";

document.querySelector("#root").innerHTML = `
  <div class="content">
    ${Test}
  </div>
`;

Example: test.md

# Hello Markdown 👋

This is a **Markdown** file rendered using a custom Rsbuild plugin!

- Fast parsing via Rust (Neon)
- Supports GitHub-flavored markdown (optional)

Example: index.css

.content {
  max-width: 600px;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

When you build or serve this project using rsbuild, the plugin will automatically transform test.md into a JavaScript string containing the rendered HTML, which is then injected into the page.

Options

gfm

Enable GitHub-flavored Markdown extensions.

• Type: boolean
• Default: false

Example:

pluginMarkdownLoader({
  gfm: true,
});

How It Works

This plugin hooks into Rsbuild's Rspack config to apply a custom loader (markdown-loader.cjs) for .md files. The loader internally calls a Neon-powered Rust function for fast parsing.

{
  test: /\.md$/,
  use: [
    {
      loader: './markdown-loader.cjs',
      options: {
        gfm: true,
      },
    },
  ],
  type: 'javascript/auto',
}

Loader Implementation

// Loader wrapper for the Neon module
const { processMarkdown } = require("rs-markdown-parser");

module.exports = function (content, map, meta) {
  const callback = this.async();
  const options = this.getOptions();
  const filePath = this.resourcePath;

  try {
    // Call the Rust function via Neon
    const result = processMarkdown(filePath, options.gfm || false);
    callback(null, result, map, meta);
  } catch (err) {
    callback(err);
  }
};

License

MIT