Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
markdown-preview
Advanced tools
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.
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
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.
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
);
}
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>
);
}
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.
FAQs
Markdown editor and live preview for React applications
We found that markdown-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.