README
markdownz
Markdown viewer, editor, and help components for the Zooniverse. Requires React 15.
Usage
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:
import { Markdown } from 'markdownz';
<Markdown>{A String of `Markdown`}</Markdown>
Editor:
import { MarkdownEditor } from 'markdownz';
<MarkdownEditor rows={20} value="A String of `Markdown`" onChange={this.handleMarkdownChange} />
Help:
import { MarkdownHelp } from 'markdownz'
<MarkdownHelp talk={true} title={<h1>Guide to Markdown</h1>} />
Supported Properties
Viewer
property | default | effect |
---|---|---|
children | null |
Markdown String to Render |
content | '' |
Markdown String to Render used if this.props.children is null |
tag | div |
HTML tag to wrap markdown content with |
className | '' |
css classes for the element |
project | null |
Panoptes project for links |
baseURI | 'null' | Set the base URI for building links |
inline | false |
Toggles rendering between markdownIt.render and markdownIt.renderInline |
Editor
property | default | effect |
---|---|---|
name | '' |
Name for the <textarea> in the Markdown editor |
value | '' |
Value of the <textarea> in the Markdown editor |
placeholder | '' |
Placeholder text in the <textarea> |
row | 5 |
Height of the <textarea> |
cols | '' |
null |
onChange | NOOP |
Change listener |
project | null |
Panoptes project for links |
baseURI | 'null' | Set the base URI for building links |
className | '' |
css classes for the element |
helpText | null |
String or Component for custom help text for the editor |
onHelp | NOOP |
Function to run when help button is clicked |
previewing | false | Toggle the editor's preview mode |
Help
property | default | effect |
---|---|---|
talk | false |
Toggle the inclusion of Talk-specific Markdown help content |
title | <h1 className="markdown-editor-title">Guide to using Markdown</h1> |
Title displayed at the top of the MarkdownHelp component |
Zooniverse-Flavoured Markdown
We use markdown-it for rendering Markdown and twemoji for cross-browser emoji support.
TODO: Document custom extensions.
Contributing
See CONTRIBUTING.md
License
Copyright 2015 by The Zooniverse. Licensed under the Apache Public License v2. See LICENSE for details.