https://github.com/aliezzahn/rsbuild-plugin-markdown-loader
A plugin for rsbuild.dev that enables importing and rendering Markdown files as React components or pure HTML.
https://github.com/aliezzahn/rsbuild-plugin-markdown-loader
html lib loader markdown neon parser plugin react rsbuild rspack rust
Last synced: 17 days ago
JSON representation
A plugin for rsbuild.dev that enables importing and rendering Markdown files as React components or pure HTML.
- Host: GitHub
- URL: https://github.com/aliezzahn/rsbuild-plugin-markdown-loader
- Owner: aliezzahn
- License: mit
- Created: 2025-05-03T19:11:52.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-04T08:28:19.000Z (8 months ago)
- Last Synced: 2025-08-11T02:46:52.077Z (5 months ago)
- Topics: html, lib, loader, markdown, neon, parser, plugin, react, rsbuild, rspack, rust
- Language: TypeScript
- Homepage: https://npmjs.com/package/rsbuild-plugin-markdown-loader
- Size: 26.4 KB
- Stars: 11
- Watchers: 1
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-rstack - rsbuild-plugin-markdown-loader
README
[](https://github.com/web-infra-dev/awesome-rspack)
# rsbuild-plugin-markdown-loader
A custom Markdown loader plugin for [Rsbuild](https://rsbuild.dev) that supports transforming `.md` files using a high-performance [Neon](https://neon-bindings.com/) 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
```bash
npm add rsbuild-plugin-markdown-loader -D
```
```bash
bun add -d rsbuild-plugin-markdown-loader
```
> **Note:** You must also install the `rs-markdown-parser` native module, which is a Neon-powered Markdown parser.
```bash
npm add rs-markdown-parser
```
```bash
bun add rs-markdown-parser
```
---
## Usage
Add the plugin to your `rsbuild.config.ts`:
```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
```ts
// main.ts or playground.ts
import "./index.css";
import Test from "./test.md";
document.querySelector("#root").innerHTML = `
${Test}
`;
```
### Example: `test.md`
```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`
```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:
```ts
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.
```js
{
test: /\.md$/,
use: [
{
loader: './markdown-loader.cjs',
options: {
gfm: true,
},
},
],
type: 'javascript/auto',
}
```
---
## Loader Implementation
```js
// 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](./LICENSE)