Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

⚛️ Render Markdown as React components

License

NotificationsYou must be signed in to change notification settings

sibiraj-s/marked-react

Repository files navigation

Render Markdown as React components usingmarked.

TestsVersionLicense

TL;DR

  • Usesmarked to parse markdown
  • Renders actual react elements instead of usingdangerouslySetInnerHTML
  • HTML in markdown is rendered as plain text

Demo

Installation

$ npm i marked-react

Usage

importReactDOMfrom'react-dom';importMarkdownfrom'marked-react';constdomContainer=document.getElementById('root');constroot=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] - Attributetarget=_blank will be added to link elements
  • langPrefix [string] - A string to prefix the className in a<code> block. Useful for syntax highlighting. Defaults tolanguage-.
  • breaks [boolean] - Addbr tag on single line breaks. Requiresgfm to betrue
  • gfm [boolean] - Use approvedGithub Flavoured Markdown
  • isInline[boolean] - Parseinline markdown.

Syntax highlight code blocks

An example withreact-lowlight

importReactDOMfrom'react-dom';importMarkdownfrom'marked-react';importLowlightfrom'react-lowlight';importjavascriptfrom'highlight.js/lib/languages/javascript';Lowlight.registerLanguage('js',javascript);constrenderer={code(snippet,lang){return<Lowlightkey={this.elementId}language={lang}value={snippet}/>;},};constmarkdown='console.log("Hello world!")';constdomContainer=document.getElementById('root');constroot=ReactDOM.createRoot(domContainer);root.render(<Markdownvalue={markdown}renderer={renderer}/>);

Some awesome options available to highlight code

About

⚛️ Render Markdown as React components

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors11

[8]ページ先頭
©2009-2025 Movatter.jp