codeNoirMD
menuDocumentationexpand_more

Getting Started

Syntax

Directives

Styling

Reference

smart_toyLLM Reference

Setup — React

Use NoirMD in a React project (Next.js, Vite, CRA, etc.).

Installation

npm install @noirmd/previewer react react-dom

For the editor (optional):

npm install @uiw/react-codemirror @codemirror/view @codemirror/state @codemirror/language @lezer/highlight

⚠️ Required: Import markdown.css

NoirMD renders markdown into HTML with classes like md-h1, md-p, md-table, etc. Without importing the CSS, content will render but have no visual styling — no heading sizes, no table borders, no code block backgrounds.

Import it once at the top level of your app (global CSS file, or your root component):

import '@noirmd/previewer/markdown.css';

This applies to every usage: NRpreviewer, NReditor, custom renderers, etc.

If you're using Tailwind CSS, markdown.css works alongside it — NoirMD's styles use their own class names (md-h1, nr-prose) that don't conflict.

Basic Usage

import { NRpreviewer } from '@noirmd/previewer/react';
import '@noirmd/previewer/markdown.css';

function App() {
  const markdown = `# Hello World

This is **NoirMD** with React.

:::note {title="Tip"}
You can use custom directives!
:::`;

  return <NRpreviewer content={markdown} tailwindCDN />;
}

NRpreviewer Props

PropTypeDefaultDescription
contentstring—Markdown string to render
htmlstring—Pre-rendered HTML (skip parsing)
tailwindCDNbooleanfalseInject Tailwind CSS v4 CDN
classNamestring''Additional CSS class
styleCSSProperties—Inline styles

Editor Component

import NReditor from '@noirmd/previewer/editor';

function Editor() {
  const [value, setValue] = useState('# Hello');

  return (
    <NReditor
      value={value}
      onChange={setValue}
      tailwindCDN
    />
  );
}

NReditor Props

PropTypeDefaultDescription
valuestring—Markdown content
onChange(value: string) => void—Change handler
debounceMsnumber150Debounce for preview updates
tailwindCDNbooleanfalseInject Tailwind CSS v4 CDN
classNamestring''Additional CSS class

TypeScript

Full type definitions are included. Import types as needed:

import type { Token } from '@noirmd/previewer/core';
import type { RenderContext, DirectiveComponentProps } from '@noirmd/previewer/react';

Next.js Notes

NoirMD works with both App Router and Pages Router. Use "use client" directive for components that use hooks:

'use client';
import { NRpreviewer } from '@noirmd/previewer/react';
import '@noirmd/previewer/markdown.css';

export default function DocPage({ content }: { content: string }) {
  return <NRpreviewer content={content} tailwindCDN />;
}

Styling

NoirMD provides its own CSS. Import the stylesheet:

import '@noirmd/previewer/markdown.css';

With tailwindCDN, Tailwind CSS v4 is injected automatically via CDN. For custom themes, use CSS variables:

:root {
  --color-background-primary: #ffffff;
  --color-text-primary: #1a1a2e;
  --color-accent-primary: #6366f1;
}
.dark {
  --color-background-primary: #0f0f23;
  --color-text-primary: #e2e8f0;
  --color-accent-primary: #818cf8;
}