Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

markdown-preview

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

markdown-preview

Markdown editor and live preview for React applications

  • 1.0.1
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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.

Keywords

FAQs

Package last updated on 22 Jul 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc