# markdown-preview

> Markdown editor and live preview for React applications

Latest version **1.0.1** (published 2023-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-preview
pnpm add markdown-preview
yarn add markdown-preview
bun add markdown-preview
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-22 |
| First published | 2023-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 67.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bradley Dirheimer |
| Maintainers | dirheimerb1 |
| Keywords | markdown, editor, preview, react, highlight.js, remarkable |

## Links

- npm: https://www.npmjs.com/package/markdown-preview
- npm.io page: https://npm.io/package/markdown-preview

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [remarkable](https://npm.io/package/remarkable.md) ^2.0.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.8.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-07-22
- 1.0.0 — 2023-07-22

## README

# Markdown Editor and Previewer

This package provides a Markdown editor with a live preview feature for React applications. It allows users to write Markdown content and view its rendered HTML output in real-time. The editor also supports syntax highlighting for code blocks.

## Installation

To use this package in your React project, you can install it using npm or yarn:

```bash
npm install markdown-preview
```

or

```bash
yarn add markdown-preview
```

## Usage

Import the necessary components and set up your React application as follows:

```jsx
import React from 'react';
import MDProvider from "markdown-preview/lib/context/MDProvider";
import MD from "markdown-preview/components/MD";
import './globals.css';

export default function App() {   
    return (
        <MDProvider>
            <MD />
        </MDProvider>
    );
}
```

The `App` component should wrap the editor inside the `MDProvider`, which sets up the context for handling Markdown content.

## MD Component

The `MD` component provides the Markdown editor and live preview. It uses the `MarkdownContext` provided by `MDProvider` to manage the Markdown content.

```jsx
import React from 'react';
import { Tab } from '@headlessui/react';
import clsx from 'clsx';
import { MarkdownContext } from 'markdown-preview/lib/context/MarkdownProvider';

const MDPreview = React.lazy(() => import('markdown-preview/components/MDPreview'));

export default function MD() { 
  const { markdown, handleMarkdownUpdate } =
    React.useContext(MarkdownContext);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Your logic for handling the Markdown content goes here
  };

  return (
    // JSX code for the editor and preview components
  );
}
```

## MarkdownProvider

The `MarkdownProvider` component is used to set up the context for managing Markdown content.

```jsx
import React from 'react';
import { MarkdownContextProps } from 'markdown-preview/lib/context/MarkdownProvider';

export const MarkdownContext = React.createContext<MarkdownContextProps>({
  markdown: '',
  html: '',
  handleMarkdownUpdate: () => {}, // Provide a default function
});

export default function MarkdownProvider({
  children,
  markdown,
  html,
  handleMarkdownUpdate,
}: MarkdownProviderProps & MarkdownContextProps) {
  return (
    <MarkdownContext.Provider value={{ markdown, html, handleMarkdownUpdate }}>
      {children}
    </MarkdownContext.Provider>
  );
}
```

## Custom Markdown Parser

This package uses the `remarkable` library for parsing Markdown and the `highlight.js` library for syntax highlighting in code blocks. The Markdown parser and syntax highlighter are configured in the `./lib/context/MarkdownParser.js` file.

## Contributing

If you encounter any issues or have suggestions for improvement, feel free to open an issue or submit a pull request on the [GitHub repository](https://github.com/your-repo).

## License

This package is licensed under the [MIT License](https://opensource.org/licenses/MIT). Feel free to use it in your projects.

---
_Source: https://npm.io/package/markdown-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._