@coreator/remark-wysiwyg-breaks

A remark plugin that preserves line breaks and empty lines exactly as users intended — achieving true WYSIWYG (What You See Is What You Get) behavior for Markdown.

Problem

In standard Markdown:

• A single line break is ignored (treated as a space)
• Multiple empty lines are collapsed into one paragraph break

This plugin fixes that by:

1. Adding two trailing spaces (hard break) to content lines
2. Converting consecutive empty lines to <br> tags

Installation

npm install @coreator/remark-wysiwyg-breaks

Usage

With unified/remark

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkWysiwygBreaks from '@coreator/remark-wysiwyg-breaks'
import remarkHtml from 'remark-html'

const markdown = `Line 1
Line 2

Line after one empty line


Line after two empty lines`

const result = await unified()
  .use(remarkWysiwygBreaks)
  .use(remarkParse)
  .use(remarkHtml)
  .process(markdown)

console.log(String(result))

Standalone preprocessing

You can also use the preprocessing function directly:

import { preprocessMarkdown } from '@coreator/remark-wysiwyg-breaks'

const processed = preprocessMarkdown(markdown)

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | preserveFrontmatter | boolean | true | Whether to preserve YAML frontmatter without processing |

unified()
  .use(remarkWysiwygBreaks, { preserveFrontmatter: false })

How It Works

Markdown Syntax Lines (unchanged)

The following are recognized as Markdown syntax and left untouched:

• Headings (# heading)
• Lists (- item, 1. item)
• Blockquotes (> quote)
• Tables (| cell |)
• Horizontal rules (---, ***, ___)
• Code blocks (```)

Content Lines

Non-syntax lines receive two trailing spaces to create hard breaks.

Empty Lines

• Single empty line between content: converted to <br> + paragraph break
• Multiple consecutive empty lines: each becomes a <br> tag

License

MIT