Markdown

Renders Markdown.

Markdown

Example

<div id="markdown"></div>

import React from 'react';
import {render} from 'react-dom';

import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';

const demo = (
  <Markdown
    source={`
      # Header

      _Various_ types of **highlighting**

      [Link](/)

      [Link with definition][definition]

      [definition]: /

      > Blockquote
      >
      > Second line

      Unordered list:

      * List
      * List

      Ordered list:

      1. One
      2. Two

      Horizontal line

      ---
      Some \`inline(code)\` inside text

      ## Block code
      \`\`\`js
      import React, {Component} from 'react';
      import ChildComponent from './child-component';

      const MyComponent = () => (
        <div className="class">
          <ChildComponent prop="value" />
        </div>
      );
      \`\`\`
    `}
  />
);
render(demo, document.getElementById('markdown'));

Markdown as tagged template

Example

<div id="markdown"></div>

import React from 'react';
import {render} from 'react-dom';

import {md} from '@jetbrains/ring-ui/components/markdown/markdown';

const demo = md`
  # Header

  _Various_ types of **highlighting**

  [Link](/)

  [Link with definition][definition]

  [definition]: /

  > Blockquote
  >
  > Second line

  Unordered list:

  * List
  * List

  Ordered list:

  1. One
  2. Two

  Horizontal line

  ---
  Some \`inline(code)\` inside text

  ## Block code
  \`\`\`js
  import React from 'react';

  import {md} from '@jetbrains/ring-ui/components/markdown/markdown';

  const MarkdownHeader = ({children}) => md\`#\${children}\`;
  \`\`\`
`;
render(demo, document.getElementById('markdown'));