markdown-react-viewer

This is a simple markdown viewer built with React. It uses the [remark-gfm]( github markdown) parser to parse the markdown and then renders it using React components.

Demo

You can try out the editor using storybook in the following link: https://takeshy.github.io/markdown-react-viewer

usage

import React from 'react';
import MarkdownViewer from 'markdown-react-viewer';

export default function SampleViewer() {
  return (
    <MarkdownViewer
      markdown="# Read Only Editor",
      className="markdown-body",
      style={{fontSize: '1.5em'}}
    />
  )
}

Direct Initialization

You can also initialize the editor directly on an HTML element:

you use rails importmap, add the following line to your importmap.rb

※ @latest is the latest version of wysimark-lite. If you want to specify a version, replace @latest with the version you want to use.

pin "markdown-react-viewer", to: "https://cdn.jsdelivr.net/npm/markdown-react-viewer@latest/dist/index.js"

<div id="editor"></div>
<script type="module">
  import {createMarkdownViewer } from "markdown-react-viewer"
  const viewer = createMarkdownViewer(document.getElementById("viewer"), { markdown: markdown, className="markdown-body" })
</script>

run storybook

npm run storybook