Markdown viewer and editor for the Zooniverse
npm install markdownzMarkdown viewer, editor, and help components for the Zooniverse. Requires React 16.8 or higher.
Available on npm, include as a dependency using npm install --save markdownz
This package contains three publicly accessible components: a Markdown viewer and a Markdown editor for Zooniverse-flavored Markdown, and a MarkdownHelp component.
Viewer:
Parse markdown to HTML with markdown-it, then render the result as a React component tree with rehype-react.
``jsx
import { Markdown } from 'markdownz';
}
`
Debug the viewer with the debug prop:
`jsx
import { Markdown } from 'markdownz';
}
`
Editor:
`jsx
import { MarkdownEditor } from 'markdownz';
`
Help:
`jsx
import { MarkdownHelp } from 'markdownz'
`
Utilities:
`js
import { utils } from 'markdownz';
const content =
This is a test with a link.
const html = utils.getHTML({ content });
` This is a test paragraph, with a link.';jsx`
// render HTML as JSX with utils.getComponentTree
import { utils } from 'markdownz';
const html = '
const markdownChildren = utils.getComponentTree({ html });
return {markdownChildren};
Hooks:
The useMarkdownz hook accepts the same props as the Markdown component. It returns the parsed content as a React component tree, which can be rendered as JSX or with React.createElement;
`jsx
import { useMarkdownz } from 'markdownz';
const markdownChildren = useMarkdownz({ content: 'This is some markdown', debug: true });
return <>{markdownChildren};
`
| property | default | effect |
|----------|:-------:|--------|
| children | null | Markdown String to Render |null
| components | | Rehype component mappings for the parsed output |''
| content | | Markdown String to Render used if this.props.children is null |false
| debug | | Return error messages, if true, for easier debugging |{}
| settings | | Rehype settings for the parsed output |div
| tag | | HTML tag to wrap markdown content with |''
| className | | css classes for the element |null
| project | | Panoptes project for links |false
| baseURI | 'null' | Set the base URI for building links |
| inline | | Toggles rendering between markdownIt.render and markdownIt.renderInline
| property | default | effect |
|----------|:-------:|--------|
| name | '' | Name for the