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:
npm install markdown-preview
or
yarn add markdown-preview
Usage
Import the necessary components and set up your React application as follows:
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.
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.
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.
License
This package is licensed under the MIT License. Feel free to use it in your projects.