lynx-markdown-it

A Lynx component library for rendering Markdown content using markdown-it.

Installation

npm install lynx-markdown-it

Usage

MarkdownView Component

import { MarkdownView } from 'lynx-markdown-it';

function App() {
  return (
    <MarkdownView>
      {`# Hello World

This is a **bold** and *italic* text demo.

## Features

- Support heading levels
- Support bullet lists
- Support \`inline code\`

> This is a blockquote

1. First item
2. Second item

---

End of document.`}
    </MarkdownView>
  );
}

Supported Elements

Element	Syntax
Headings	# H1 ## H2 ... ###### H6
Paragraph	Plain text
Bold	**text**
Italic	*text*
Bold Italic	***text***
Inline Code	`code`
Code Block	```code```
Bullet List	- item
Ordered List	1. item
Blockquote	> text
Horizontal Rule	---

API

MarkdownView

The main component for rendering markdown content.

Props:

Prop	Type	Required	Description
children	string	✅	Markdown content string to render

import { MarkdownView } from 'lynx-markdown-it';

<MarkdownView>{markdownString}</MarkdownView>

Styling

The library ships with default CSS styles. All elements use CSS class names prefixed with md- for easy customization:

Class	Element
.md-heading, .md-heading-1 ~ .md-heading-6	Headings
.md-paragraph	Paragraph
.md-bold	Bold text
.md-italic	Italic text
.md-bold-italic	Bold + italic text
.md-inline-code	Inline code
.md-code-block, .md-code-text	Code block
.md-list, .md-list-item	List container and items
.md-list-bullet	Bullet list item
.md-list-number	Ordered list item
.md-blockquote, .md-blockquote-text	Blockquote
.md-hr	Horizontal rule
.md-error	Error message

License

MIT