https://github.com/dirheimerb/markdown-preview
https://github.com/dirheimerb/markdown-preview
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dirheimerb/markdown-preview
- Owner: dirheimerb
- Created: 2023-07-22T00:53:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-22T14:15:49.000Z (almost 3 years ago)
- Last Synced: 2025-02-01T07:28:58.903Z (over 1 year ago)
- Language: TypeScript
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 (
);
}
```
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) => {
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({
markdown: '',
html: '',
handleMarkdownUpdate: () => {}, // Provide a default function
});
export default function MarkdownProvider({
children,
markdown,
html,
handleMarkdownUpdate,
}: MarkdownProviderProps & MarkdownContextProps) {
return (
{children}
);
}
```
## 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.