Marked Plugin

The @mrsf/marked-mrsf package adds Sidemark review metadata to HTML generated by Marked. It uses the same shared controller and CSS as the markdown-it and rehype plugins, so the visual behavior and emitted mrsf:* events stay consistent.

Install

npm install marked @mrsf/marked-mrsf

Live Demo

Show resolved comments Gutter position: RightLeft (margin gutter) Interactive (alerts event payloads) Line highlight

Quick Start

import { Marked } from "marked";
import { markedMrsf } from "@mrsf/marked-mrsf";

const parser = new Marked();
parser.use(markedMrsf({
  documentPath: "docs/guide.md",
}));

const html = parser.parse(markdownSource);

Include the stylesheet:

import "@mrsf/marked-mrsf/style.css";

Data Provisioning

The plugin supports the same sidecar loading priority as the other rendering plugins:

1. comments
2. loader
3. sidecarPath
4. documentPath

In browser environments, use comments or loader. The browser build warns if you pass file-system options.

Interactive Mode

import { refreshAll } from "@mrsf/marked-mrsf/controller";

document.addEventListener("mrsf:submit", async (e) => {
  await saveComment((e as CustomEvent).detail);
});

refreshAll();

The controller adds gutter buttons, selection-based add-comment actions, and built-in dialogs for add/reply/edit/resolve/unresolve/delete. The plugin itself only adds data-mrsf-* line metadata and the serialized comment payload.

Options

Option	Type	Default	Description
comments	MrsfDocument	—	Pre-loaded sidecar data
loader	() => MrsfDocument | null	—	Custom sidecar loader
documentPath	string	—	Path to Markdown file for auto-discovery
sidecarPath	string	—	Explicit path to .review.yaml / .review.json
showResolved	boolean	true	Show resolved comments
dataContainer	'script' | 'element'	'script'	How to embed the serialized thread data
dataElementId	string	'mrsf-comment-data'	Element id when dataContainer: 'element'
interactive	boolean	false	Enable controller action buttons
gutterPosition	'left' | 'right'	'right'	Badge placement
gutterForInline	boolean	true	Show badge for inline-highlighted comments
inlineHighlights	boolean	true	Highlight selected_text inline
lineHighlight	boolean	false	Add background tint on commented lines
theme	'light' | 'dark' | 'auto'	'auto'	Color scheme hint
cwd	string	process.cwd()	Working directory for file resolution

Comparison

Choose the plugin based on your Markdown engine:

	Marked	markdown-it	rehype
Package	@mrsf/marked-mrsf	@mrsf/markdown-it-mrsf	@mrsf/rehype-mrsf
Best for	Marked pipelines, client-side renderers	markdown-it ecosystems like VitePress	unified / MDX / Astro
Integration style	Renderer overrides + token hooks	Token stream rule injection	hast tree transformation