expo-markdown

A simple, minimalistic, yet plugggable and extensible, standards compliant markdown renderer for expo, react-native, and react-native-web.

It uses unified and remark to parse markdown to mdast syntax tree and then render it using @expo/html-elements to render native components on mobile and semantic elements on the web.

This architecture let's us render as much or as little markdown as we need. By default, all nodes are rendered, except images and inline html. You can provide your own renderers for these elements as props. Syntax highlighting is also supported, as long as you provide your own highlighter.

Markdown

The main export.

import { Markdown } from "expo-markdown"

Props extend ViewProps and they'll be applied to container component.

Prop | Type | Comment --- | --- | --- text | string | The markdown string to render style | TextStyle & ViewStyle | The ViewStyle will be applied on the container, while TextStyle will selectively be applied on markdown nodes markdownStyle | Record<NodeType, ImageStyle \| TextStyle \| ViewStyle> | An object keyed by node type, where values are styles to be applied on a given node. These styles support more props and take precedence over style prop dynamicStyle | { link: (uri: string, title?: string) => TextStyle } | An object keyed by node type, providing functions to generate additional styles based on node content. Only links are supported for now linkTarget | string | On web, specify where links open (e.g. _blank) handleLink | Function | Function called when a user presses a link. It is called with link uri as the only parameter. scrollRef | RefObject<ScrollView> | If you wrap <Markdown /> with <ScrollView />, provide a ref to enable scrolling on click. htmlRenderer | <HtmlRenderer html={string} /> | A component to render inline html imgRenderer | <ImgRenderer source={{ uri: string }} alt={string} resizeMode="contain" style={ImageStyle} /> | A component to render images syntaxHighLighter | <SyntaxHighlighter fontFamily={string} fontSize={number} language={string} style={TextStyle}>{children: string}</SyntaxHighlighter> | A component to highlight syntax in code blocks plugins | (UnifiedPlugin \| RemarkPlugin)[] | Provide additional plugins to markdown processor. For exact usage, see .use() documention on unified onExtraNode | Function | If you're using plugins to create extra nodes in the syntax tree, provide a function taking node as parameter and returning react node to render

InlineMarkdown

Full text based alterantive to Markdown. Use Text instead of View as the container. This makes it impossible to correctly render some elements, but enables react native features such as maxNumberOfLines and ellipsizeMode.

import { InlineMarkdown } from "expo-markdown"

Props extend TextProps instead of ViewProps. All other props same as Markdown, differences below.

htmlRenderer, imgRenderer, syntaxHighlighter are unavailable in inline mode.

Prop | Type | Comment --- | --- | --- style | TextStyle | Same as Markdown, minus support for ViewStyle

License

Apache-2.0