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

mui-markdown

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-markdown

mui-markdown uses markdown-to-jsx and MUI(formerly material-ui) to help you render MD/MDX files with MUI components.

  • 0.5.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.8K
increased by8.32%
Maintainers
1
Weekly downloads
 
Created
Source

About

mui-markdown uses markdown-to-jsx and MUI(formerly material-ui) to help you render MD/MDX files with MUI components.

User Guide

Installation

# with npm
npm i mui-markdown

# with yarn
yarn add mui-markdown

Usage

The example below will render the h1 tag using MUI Typography component.

import React from 'react';
import MuiMarkdown from 'mui-markdown';

const App = () => {
  return <MuiMarkdown>{`# Hello markdown`}</MuiMarkdown>;
};

export default App;

Props

Props available for MuiMarkdown component:

NameTypeDefaultOptional or Mandatory
keyReact.keyoptional
overridesMarkdownToJSX.Overridesoptional
optionsMarkdownToJSX.Optionsoptional
disableTableContainerbooleanfalseoptional
blockquoteBorderColorstringMUI info coloroptional
inlineCodeBgColorstringrgba(127, 127, 127, 0.2)optional
inlineCodeColorstringcurrentcoloroptional
codeBlockThemePrismThemevsDarkoptional

overrides

You can optionally override a tag to use your component.

example of override with a regular HTML tag:

JS and JSX:

import React from 'react';
import MuiMarkdown from 'mui-markdown';

const App = () => {
  return (
    <MuiMarkdown
      overrides={{
        h1: {
          component: 'p',
          props: {
            style: { color: 'red' },
          },
        },
      }}
    >
      {`# Hello markdown`}
    </MuiMarkdown>
  );
};

export default App;

TS and TSX:

import React from 'react';
import MuiMarkdown from 'mui-markdown';

const App = () => {
  return (
    <MuiMarkdown
      overrides={{
        h1: {
          component: 'p',
          props: {
            style: { color: 'red' },
          } as React.HTMLProps<HTMLParagraphElement>,
        },
      }}
    >
      {`# Hello markdown`}
    </MuiMarkdown>
  );
};

export default App;

example of override with your component:

JS and JSX:

import React from 'react';
import MuiMarkdown from 'mui-markdown';
import CustomTypography from './components/CustomTypography';

const App = () => {
  return (
    <MuiMarkdown
      overrides={{
        h1: {
          component: CustomTypography,
          props: {
            // custom props
          },
        },
      }}
    >
      {`# Hello markdown`}
    </MuiMarkdown>
  );
};

export default App;

TS and TSX:

import React from 'react';
import MuiMarkdown from 'mui-markdown';
import CustomTypography, {
  CustomTypographyProps,
} from './components/CustomTypography';

const App = () => {
  return (
    <MuiMarkdown
      overrides={{
        h1: {
          component: CustomTypography,
          props: {
            // custom props
          } as CustomTypographyProps,
        },
      }}
    >
      {`# Hello markdown`}
    </MuiMarkdown>
  );
};

export default App;

options

You can read about options in the markdown-to-jsx docs.

Note: If you want to override something and also need to set some options, add the overrides property in the options. Don't use overrides and options property together on the MuiMarkdown component.

disableTableContainer

Optionally you can disable container wrapper around tables. If true, table component will be like this:

  <Table>
    {children}
  <Table>

default(false):

<TableContainer component={Paper}>
  <Table>
    {children}
  <Table>
</TableContainer>

blockquoteBorderColor

You can change the blockquote component border color with this property. The default color is theme.palette.info.main

example:

...
<MuiMarkdown blockquoteBorderColor='gold'>
{
  `> This is a block of code`
}
</MuiMarkdown>
...

inlineCodeBgColor

This property helps you change the inline code background color.

example:

...
<MuiMarkdown inlineCodeBgColor='gold'>
{
  '<p>Install the package via `npm i mui-markdown` or `yarn add mui-markdown`</p>'
}
</MuiMarkdown>
...

inlineCodeColor

With this property you're able to change inline code text color.

example:

...
<MuiMarkdown inlineCodeColor='dodgerblue'>
{
  '<p>Install the package via `npm i mui-markdown` or `yarn add mui-markdown`</p>'
}
</MuiMarkdown>
...

codeBlockTheme

mui-markdown uses prism-react-renderer to highlight code blocks. With this property you can change the highlight theme. Availabe themes are:

  • dracula
  • duotoneDark
  • duotoneLight
  • github
  • nightOwl
  • nightOwlLight
  • oceanicNext
  • okaidia
  • palenight
  • shadesOfPurple
  • synthwave84
  • ultramin
  • vsDark
  • vsLight

Keywords

FAQs

Package last updated on 08 Feb 2022

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