How to use markdown-to-jsx - 10 common examples

To help you get started, we’ve selected a few markdown-to-jsx examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / markdown-to-jsx / markdown-to-jsx-tests.tsx View on Github external
import Markdown, { compiler } from 'markdown-to-jsx';
import * as React from 'react';
import { render } from 'react-dom';

render(<Markdown># Hello world!</Markdown>, document.body);

<Markdown options={{ forceBlock: true }}>Hello there old chap!</Markdown>;
compiler('Hello there old chap!', { forceBlock: true });

<Markdown options={{ forceInline: true }}># You got it babe!</Markdown>;

const MyParagraph: React.FunctionComponent = ({ children, ...props }) => (
    <div {...props}>{children}</div>
);
render(
    <Markdown
        options={{
            overrides: {
                h1: {
                    component: MyParagraph,
                    props: {
                        className: 'foo',
                    },
                },
github telus / tds-core / docs / components / overrides / Markdown / Markdown.js View on Github external
function Markdown({ text, inline }) {
  const overrides = inline ? inlineOverrides : baseOverrides;
  return compiler(text, { overrides, forceBlock: true });
}
github reakit / reakit / website / src / components / Markdown.js View on Github external
const Markdown = ({ text }) => compiler(text, { overrides, forceBlock: true });
github vue-styleguidist / vue-styleguidist / src / rsg-components / Markdown / Markdown.js View on Github external
function Markdown({ classes, text, inline }) {
	const overrides = inline ? getInlineOverrides(classes) : getBaseOverrides(classes);
	return compiler(text, { overrides });
}
github styleguidist / react-styleguidist / src / client / rsg-components / Markdown / Markdown.tsx View on Github external
export const Markdown: React.FunctionComponent<MarkdownProps> = ({ text, inline }) => {
	const overrides = inline ? inlineOverrides : baseOverrides;
	return compiler(stripHtmlComments(text), { overrides, forceBlock: true });
};
github sumup-oss / circuit-ui / src / components / Markdown / Markdown.js View on Github external
const Markdown = ({
  children,
  overrides,
  forceBlock,
  forceInline,
  transformer
}) => {
  deprecate('Markdown has been deprecated.');

  const options = { overrides, forceBlock, forceInline };
  const transformedMarkdown = transformer(children);
  const html = compiler(transformedMarkdown, options);
  return html;
};
github reakit / reakit / packages / website / src / components / Markdown.js View on Github external
const Markdown = ({ text }) => compiler(text, { overrides, forceBlock: true });
github bootstrap-styled / rsg-components / src / Markdown / Markdown.js View on Github external
function Markdown({ text, inline }) {
  const overrides = inline ? inlineOverrides : baseOverrides;
  return compiler(text, { overrides, forceBlock: true });
}
github adamarthurryan / dubdiff / src / common / components / ShowMarkdown.js View on Github external
const ShowMarkdown = (props) => {
  return <div>
    {
        props.text
          ? markdownCompiler(props.text)
          : props.diff
            ? markdownCompiler(diffToHtml(props.diff))
            : null
      }
  </div>
}
github adamarthurryan / dubdiff / src / common / components / ShowMarkdown.js View on Github external
const ShowMarkdown = (props) => {
  return <div>
    {
        props.text
          ? markdownCompiler(props.text)
          : props.diff
            ? markdownCompiler(diffToHtml(props.diff))
            : null
      }
  </div>
}

markdown-to-jsx

Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.

MIT
Latest version published 4 days ago

Package Health Score

92 / 100
Full package analysis

Popular markdown-to-jsx functions

Popular JavaScript code snippets

Find secure code to use in your application or website