Nashville Plays Music

    marked-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    marked-react

    Render Markdown as React components using marked.

    Tests Version License

    TL;DR

    • Uses marked to parse markdown
    • Renders actual react elements instead of using dangerouslySetInnerHTML

    Demo

    Installation

    $ npm i marked-react

    Usage

    import ReactDOM from 'react-dom';
    import Markdown from 'marked-react';
    
    const domContainer = document.getElementById('root');
    const root = ReactDOM.createRoot(domContainer);
    root.render(<Markdown># Hello world!</Markdown>);

    Component Props

    • value[string] - Markdown content.
    • baseURL [string] - A prefix url for any relative link.
    • openLinksInNewTab [boolean] - Attribute target=_blank will be added to link elements
    • langPrefix [string] - A string to prefix the className in a <code> block. Useful for syntax highlighting. Defaults to language-.
    • breaks [boolean] - Add br tag on single line breaks. Requires gfm to be true
    • gfm [boolean] - Use approved Github Flavoured Markdown

    Syntax highlight code blocks

    An example with react-lowlight

    import ReactDOM from 'react-dom';
    import Markdown from 'marked-react';
    import Lowlight from 'react-lowlight';
    import javascript from 'highlight.js/lib/languages/javascript';
    
    Lowlight.registerLanguage('js', javascript);
    
    const renderer = {
      code(snippet, lang) {
        return <Lowlight key={this.elementId} language={lang} value={snippet} />;
      },
    };
    
    const markdown = 'console.log("Hello world!")';
    
    const domContainer = document.getElementById('root');
    const root = ReactDOM.createRoot(domContainer);
    root.render(<Markdown value={markdown} renderer={renderer} />);

    Some awesome options available to highlight code

    Install

    npm i marked-react

    DownloadsWeekly Downloads

    1,547

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    83.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • sibiraj-s