Ergonomic Markdown

Ergonomic Markdown: Tables, Mermaid, Code Highlighting, Charts, etc.

Features

• 📝 GitHub Flavored Markdown support
• 📊 Mermaid diagram rendering
• 🎨 Syntax highlighting with highlight.js
• 📋 Tables, footnotes, and strikethrough
• 📈 Chart.js integration
• ⚡ Built with unified/remark/rehype ecosystem
• 🎯 TypeScript support
• 🔧 Plugin system for extensibility

Installation

npm install ergonomic-markdown

Usage

Basic Usage

import renderMarkdown from 'ergonomic-markdown'

// Simple markdown rendering
const html = await renderMarkdown({ content: '# Hello World' })
console.log(html) // '<h1>Hello World</h1>'

// With GitHub Flavored Markdown features
const html = await renderMarkdown({ 
  content: `
# Table Example

| Name | Age |
|------|-----|
| John | 25  |
| Jane | 30  |

~~Strikethrough~~ and **bold** text.
  `
})

Advanced Usage

import renderMarkdown from 'ergonomic-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'

// With plugins and options
const html = await renderMarkdown({
  content: '# Hello *World*',
  remarkPlugins: [remarkGfm],
  rehypePlugins: [rehypeRaw],
  allowedElements: ['h1', 'em'],
  unwrapDisallowed: true
})

Available Options

interface HookOptions {
  content?: string
  target?: string
  className?: string
  enableLiveUpdate?: boolean
  loadingClassName?: string
  loadingText?: string
  // Processor options
  allowElement?: AllowElement
  allowedElements?: readonly string[]
  disallowedElements?: readonly string[]
  rehypePlugins?: PluggableList
  remarkPlugins?: PluggableList
  remarkRehypeOptions?: RemarkRehypeOptions
  skipHtml?: boolean
  unwrapDisallowed?: boolean
  urlTransform?: UrlTransform
}

Named Exports

import {
  createProcessor,
  createFile,
  processMarkdown,
  defaultUrlTransform,
  createChartObserver,
  startChartObserver,
  stopChartObserver,
  emptyPlugins,
  emptyRemarkRehypeOptions,
  safeProtocol
} from 'ergonomic-markdown'

// Create a custom processor
const processor = createProcessor({ remarkPlugins: [remarkGfm] })
const file = createFile({ content: '# Hello' })

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run tests
npm test

# Format code
npm run format

License

MIT © Leonardo Venturini