@stoplight/markdown-viewer
A react component that renders Stoplight flavored markdown.
Last updated 3 months ago by marbemac .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @stoplight/markdown-viewer 
SYNC missed versions from official npm registry.

@stoplight/markdown-viewer

A Stoplight Markdown viewer React component

Features

  • Supports Stoplight markdown annotations
  • MDAST-spec compliant
  • Theme-able
  • Render custom components

Installation

Supported in modern browsers.

# latest stable
yarn add @stoplight/markdown-viewer

Usage

import { MarkdownViewer } from "@stoplight/markdown-viewer";
import { defaultComponentMapping } from "@stoplight/markdown-viewer/utils/components";
import { JSONSchemaViewer } from "@stoplight/json-schema-viewer";

const markdown = `
### Features

- **Full** JSON Schema Draft 4 support, including `oneOf` and `anyOf` combiner properties
- Renders complicated nested objects to any depth
- Renders validation properties and markdown descriptions
- Theme-able
- Collapsible

```json_schema
{
  $schema: 'http://json-schema.org/draft-07/schema#',
  definitions: {
    address: {
      type: 'object',
      properties: {
        street_address: {
          type: 'string',
        },
        city: {
          type: 'string',
        },
        state: {
          type: 'string',
        },
      },
      required: ['street_address', 'city', 'state'],
    },
  },
  type: 'object',
  properties: {
    billing_address: {
      $ref: '#/definitions/address',
    },
    shipping_address: {
      $ref: '#/definitions/address',
    },
  },
}
```;
`;

<MarkdownViewer
  markdown={markdown}
  components={{
    // Override the default code renderer for json_schema blocks
    code: (props, key) => {
      if (props.node.lang === 'json_schema') {
        return <JSONSchemaViewer value={JSON.parse(props.node.value)} />;
      }

      // Fallback to the default component mapping
      return defaultComponentMapping.code(props, key);
    }
  }}
/>

More examples can be find in the Storybook stories.

Contributing

  1. Clone repo.
  2. Create / checkout feature/{name}, chore/{name}, or fix/{name} branch.
  3. Install deps: yarn.
  4. Make your changes.
  5. Run tests: yarn test.prod.
  6. Stage relevant files to git.
  7. Commit: yarn commit. NOTE: Commits that don't follow the conventional format will be rejected. yarn commit creates this format for you, or you can put it together manually and then do a regular git commit.
  8. Push: git push.
  9. Open PR targeting the develop branch.

Current Tags

  • 3.0.0-beta.4                                ...           beta (6 months ago)
  • 3.7.0                                ...           latest (3 months ago)

30 Versions

  • 3.7.0                                ...           3 months ago
  • 3.6.0                                ...           3 months ago
  • 3.5.6                                ...           3 months ago
  • 3.5.5                                ...           3 months ago
  • 3.5.4                                ...           3 months ago
  • 3.5.3                                ...           3 months ago
  • 3.5.2                                ...           3 months ago
  • 3.5.1                                ...           3 months ago
  • 3.5.0                                ...           3 months ago
  • 3.4.0                                ...           4 months ago
  • 3.3.1                                ...           5 months ago
  • 3.3.0                                ...           5 months ago
  • 3.2.0                                ...           5 months ago
  • 3.1.1                                ...           5 months ago
  • 3.1.0                                ...           5 months ago
  • 3.0.5                                ...           6 months ago
  • 3.0.4                                ...           6 months ago
  • 3.0.3                                ...           6 months ago
  • 3.0.2                                ...           6 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           6 months ago
  • 3.0.0-beta.4                                ...           6 months ago
  • 3.0.0-beta.3                                ...           7 months ago
  • 3.0.0-beta.2                                ...           7 months ago
  • 3.0.0-beta.1                                ...           7 months ago
  • 2.0.0                                ...           7 months ago
  • 1.1.1                                ...           8 months ago
  • 1.1.0                                ...           8 months ago
  • 1.0.1                                ...           9 months ago
  • 1.0.0                                ...           9 months ago

Copyright 2014 - 2016 © taobao.org |