Markdown editor and live preview for React applications
npm install markdown-previewThis 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.
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
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.
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
);
}
`
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}
);
}
`
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.
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.
This package is licensed under the MIT License. Feel free to use it in your projects.