Function Markdown

This component renders markdown as react components.

Example

Simple Example

import { render } from "react-dom";
import { Markdown } from "react-marked-renderer";

const markdown = `# Heading 1

This is some text that will be rendered as a paragraph.

Markdown defaults to the github-flavored markdown.
`;

render(
  <Markdown markdown={markdown} />,
  document.getElementById("root")
);
Copy

Example

Custom Renderers

import { useState } from "react";
import { render } from "react-dom";
import {
  DEFAULT_MARKDOWN_RENDERERS,
  ListRenderer,
  Markdown,
  Renderers,
  getTokensText,
} from "react-marked-renderer";
import { BrowserRouter as Router, Link } from "react-router-dom";

const renderers: Renderers = {
  ...DEFAULT_MARKDOWN_RENDERERS,
  link: function CustomLink({ href, title, children }) {
    // make links use html5 history and not cause reloads
    return (
      <Link to={href} title={title}>
        {children}
      </Link>
    );
  },

  blockquote: function Blockquote({ children }) {
    return <blockquote className="custom">{children}</blockquote>;
  },

  task: function Task({ defaultChecked, tokens, children }) {
    // hooks can be used in these renderers
    const id = useSluggedId(`${getTokensText(tokens)}-task`);
    const [checked, setChecked] = useState(defaultChecked);
    return (
      <li className="task-item">
        <input
          id={id}
          checked={checked}
          onChange={(event) => setChecked(event.currentTarget.checked)}
        />
        <label htmlFor={d}>{children}</label>
      </li>
    );
  },

  list: function List(props) {
    // can get the current renderers as well
    const renderers = useRenderers();
    const { listitem: ListItem } = renderers;
    const item = <ListItem>Content</ListItem>;

    // or just return the default renderer
    return <ListRenderer {...props} />;
  },
};

render(
  <Router>
    <Markdown markdown={markdown} renderers={renderers} />
  </Router>,
  document.getElementById("root")
);
Copy

Example

PrismJS Code Highlighting (Browser)

import { render } from "react-dom";
import {
  DEFAULT_MARKDOWN_RENDERERS,
  Markdown,
  Renderers,
} from "react-marked-renderer";
import Prism from "prismjs";
// import prism theme/components or use `babel-plugin-prismjs`

const renderers: Renderers = {
  ...DEFAULT_MARKDOWN_RENDERERS,
  codespan: function CodeSpan({ children }) {
    // just so it gets some prism styling
    return <code className="language-none">{children}</code>;
  },
};

render(
  <Markdown
    markdown={markdown}
    renderers={renderers}
    highlightElement={Prism.highlightElement}
  />,
  document.getElementById("root")
);
Copy

Example

PrismJS Code Highlighting (Node an Browser)

import { render } from "react-dom";
import {
  DEFAULT_MARKDOWN_RENDERERS,
  DangerouslyHighlight,
  GetCodeLanguage,
  Markdown,
  Renderers,
} from "react-marked-renderer";
import Prism from "prismjs";

const renderers: Renderers = {
  ...DEFAULT_MARKDOWN_RENDERERS,
  codespan: function CodeSpan({ children }) {
    // just so it gets some prism styling
    return <code className="language-none">{children}</code>;
  },
};

const getLanguage: GetCodeLanguage = (lang, _rawCode) => {
  // allow aliases
  lang = lang === "sh" ? "shell" : lang;

  // if the Prism doesn't support the language, default to nothing instead
  // of crashing
  if (!Prism.languages[lang]) {
    return "none";
  }

  return lang;
};

const highlightCode: DangerouslyHighlightCode = (code, lang) =>
  Prism.highlight(code, Prism.languages[lang], lang);

render(
  <Markdown
    markdown={markdown}
    renderers={renderers}
    getLanguage={getLanguage}
    highlightCode={highlightCode}
  />,
  document.getElementById("root")
);
Copy