{"_id":"@adapta-service/react-native-markdown-display","_rev":"2-ffb9c316c8e1ad8141a26d015e6325b4","name":"@adapta-service/react-native-markdown-display","dist-tags":{"latest":"8.1.2"},"versions":{"8.1.0":{"name":"@adapta-service/react-native-markdown-display","version":"8.1.0","keywords":["react","react-native","native","markdown","commonmark","markdown-it"],"author":{"name":"Michael Lohmann, Daniel Maslowski, Ron Radtke and maintainers of the original library"},"license":"MIT","_id":"@adapta-service/react-native-markdown-display@8.1.0","maintainers":[{"name":"djmbdv","email":"djmbdv@gmail.com"}],"homepage":"https://github.com/adapta-service/react-native-markdown-display","bugs":{"url":"https://github.com/adapta-service/react-native-markdown-display/issues"},"dist":{"shasum":"bedc647db298fb3ddbab0e441530cd555800f0b7","tarball":"https://registry.npmjs.org/@adapta-service/react-native-markdown-display/-/react-native-markdown-display-8.1.0.tgz","fileCount":25,"integrity":"sha512-YxLzTxbsevaDLk3uxoJaDS4x09uB3+h4e2LnSDiE+rQjpS63gUTsh7e6lNYVQW+zNPL0gWMu4EzGrh4T3IQJCA==","signatures":[{"sig":"MEUCIQD2TXE0zZGZOXGhVquci2b4J9Nn7DLF9Jj1kppH8aWaMwIgIiYjQ6GDLwi451i0BIoUTMS5Cye+Wh+ybsr4OEo6emI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":73438},"main":"src/index.js","types":"src/index.d.ts","gitHead":"5743206e5ad4b4e985d97f4fdba2588730bc4916","scripts":{"lint":"eslint --cache ./src","format":"prettier -w src","lint-fix":"eslint --fix --cache ./src","format-check":"prettier --check src"},"_npmUser":{"name":"djmbdv","email":"djmbdv@gmail.com"},"repository":{"url":"git+https://github.com/adapta-service/react-native-markdown-display.git","type":"git"},"_npmVersion":"11.9.0","description":"Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer","directories":{"doc":"doc"},"_nodeVersion":"24.14.0","dependencies":{"prop-types":"^15.7.2","markdown-it":"^13.0.1","css-to-react-native":"^3.2.0","react-native-fit-image":"^1.5.5"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.26.0","prettier":"^2.8.4","typescript":"^4.9.5","@babel/core":"^7.21.0","@babel/runtime":"^7.21.0","@types/markdown-it":"^12.2.3","@types/react-native":">=0.50.0","eslint-plugin-react":"^7.32.2","eslint-plugin-import":"^2.27.5","eslint-config-defaults":"^9.0.0","eslint-config-prettier":"^8.7.0","@typescript-eslint/parser":"^5.53.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-native":"^4.0.0","metro-react-native-babel-preset":"^0.76.0","@typescript-eslint/eslint-plugin":"^5.54.0","@react-native-community/eslint-config":"^3.2.0"},"peerDependencies":{"react":">=16.2.0","react-native":">=0.50.4"},"_npmOperationalInternal":{"tmp":"tmp/react-native-markdown-display_8.1.0_1774914386929_0.3286694896895068","host":"s3://npm-registry-packages-npm-production"}},"8.1.2":{"name":"@adapta-service/react-native-markdown-display","version":"8.1.2","description":"Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer","main":"src/index.js","types":"src/index.d.ts","publishConfig":{"access":"public"},"scripts":{"format":"prettier -w src","format-check":"prettier --check src","lint":"eslint --cache ./src","lint-fix":"eslint --fix --cache ./src"},"repository":{"type":"git","url":"git+https://github.com/adapta-service/react-native-markdown-display.git"},"keywords":["react","react-native","native","markdown","commonmark","markdown-it"],"author":{"name":"Michael Lohmann, Daniel Maslowski, Ron Radtke and maintainers of the original library"},"license":"MIT","bugs":{"url":"https://github.com/adapta-service/react-native-markdown-display/issues"},"homepage":"https://github.com/adapta-service/react-native-markdown-display","dependencies":{"css-to-react-native":"^3.2.0","markdown-it":"^14.1.1","prop-types":"^15.7.2"},"peerDependencies":{"react":">=16.2.0","react-native":">=0.50.4"},"devDependencies":{"@types/markdown-it":"^14.1.2","@typescript-eslint/eslint-plugin":"^8.58.0","@typescript-eslint/parser":"^8.58.0","eslint":"^8.57.1","eslint-config-prettier":"^8.10.2","eslint-plugin-import":"^2.32.0","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^4.6.2","prettier":"^2.8.8","typescript":"^5.9.3"},"directories":{"doc":"doc"},"gitHead":"5743206e5ad4b4e985d97f4fdba2588730bc4916","_id":"@adapta-service/react-native-markdown-display@8.1.2","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-+h8T0Ob6wgrOkZ+rtp05K6Hm5ulrxxkRW6mw9pBpZWLLJyXRgD9rG85vZ9lNAqA62ebHIZ9CxiYiB2PQkPPkiA==","shasum":"a616dc2ce8796b74f9e9a85769c0f00b741eae5b","tarball":"https://registry.npmjs.org/@adapta-service/react-native-markdown-display/-/react-native-markdown-display-8.1.2.tgz","fileCount":26,"unpackedSize":75127,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCPx7Zh/gmjmY7tproIOd6oCEOwFnWunWBmEWZTQlVISQIhAJM03KkqlxH7C3RwhpD+LAnS9i2Y/FyylVAnyErhD7GR"}]},"_npmUser":{"name":"djmbdv","email":"djmbdv@gmail.com"},"maintainers":[{"name":"djmbdv","email":"djmbdv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-markdown-display_8.1.2_1774916856429_0.034721337733820246"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-30T23:46:26.805Z","modified":"2026-03-31T00:27:36.706Z","8.1.0":"2026-03-30T23:46:27.082Z","8.1.2":"2026-03-31T00:27:36.588Z"},"bugs":{"url":"https://github.com/adapta-service/react-native-markdown-display/issues"},"author":{"name":"Michael Lohmann, Daniel Maslowski, Ron Radtke and maintainers of the original library"},"license":"MIT","homepage":"https://github.com/adapta-service/react-native-markdown-display","keywords":["react","react-native","native","markdown","commonmark","markdown-it"],"repository":{"type":"git","url":"git+https://github.com/adapta-service/react-native-markdown-display.git"},"description":"Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer","maintainers":[{"name":"djmbdv","email":"djmbdv@gmail.com"}],"readme":"# React Native Markdown Display [![npm version](https://badge.fury.io/js/@adapta-service%2Freact-native-markdown-display.svg)](https://badge.fury.io/js/@adapta-service%2Freact-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/adapta-service/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/adapta-service/react-native-markdown-display)\n\nIt a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is __not__ a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten and styled as needed.\n\nDependency maintenance roadmap: see `doc/DEPENDENCY_MAINTENANCE_PLAN.md`.\n\nAs of `8.1.2`, the package no longer depends on `react-native-fit-image`; markdown images are rendered with an internal `Image`-based component.\n\n### Compatibility with react-native-markdown-renderer\n\nThis is intended to be a replacement for react-native-markdown-renderer, with a variety of bug fixes and enhancements - **Due to how the new style rules work, there may be some tweaking needed**, [see how to style stuff section below](#How-to-style-stuff)\n\n### Install\n\n#### Yarn\n```npm\nyarn add @adapta-service/react-native-markdown-display\n```\n\n#### NPM\n```npm\nnpm install -S @adapta-service/react-native-markdown-display\n```\n\n### Get Started\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst copy = `# h1 Heading 8-)\n\n**This is some bold text!**\n\nThis is normal text\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\nYou can find this example [here](https://snack.expo.dev/@hassieb/react-native-markdown-display-ordered-list)\n\nThis next example worked with `\"react-native-markdown-display\": \"^7.0.0-alpha.2\",` on React`18.1.0`, React Native `0.70.5` via the Expo command `npx create-expo-app --template` with typescript selected. \n\n```jsx\nimport React from \"react\";\nimport { StyleSheet, SafeAreaView, ScrollView, StatusBar } from \"react-native\";\nimport { useTheme } from \"@react-navigation/native\";\n\nimport Markdown from \"@adapta-service/react-native-markdown-display\";\n\nconst copy = `# h1 Heading 8-)\n\n**This is some bold text!**\n\nThis is normal text\n`;\n\nconst MarkdownWrapper: React.FC = ({ children }) => {\n const { colors } = useTheme();\n // @ts-ignore\n return {children};\n};\n\nconst App: () => React.ReactElement = () => {\n return (\n <>\n \n \n \n {copy}\n \n \n \n );\n};\n\nexport const styles = (props: any) =>\n StyleSheet.create({\n text: {\n color: props.colors.text,\n },\n });\n\nexport default App;\n```\n\nWith text input \n\n```jsx\nimport React from \"react\";\nimport {\n StyleSheet,\n SafeAreaView,\n ScrollView,\n StatusBar,\n TextInput,\n} from \"react-native\";\nimport { useTheme } from \"@react-navigation/native\";\n\nimport Markdown from \"@adapta-service/react-native-markdown-display\";\n\nconst copy = `# h1 Heading 8-)\n\n**This is some bold text!**\n\nThis is normal text\n`;\n\nconst MarkdownWrapper: React.FC = ({ children }) => {\n const { colors } = useTheme();\n // @ts-ignore\n return {children};\n};\n\nconst App: () => React.ReactElement = () => {\n const [text, onChangeText] = React.useState(copy);\n const { colors } = useTheme();\n return (\n <>\n \n \n \n \n {text}\n \n \n \n );\n};\n\nexport const styles = (props: any) =>\n StyleSheet.create({\n text: {\n color: props.colors.text,\n },\n input: {\n height: 80,\n margin: 12,\n borderWidth: 1,\n padding: 10,\n },\n });\n\nexport default App;\n```\n\n### Props and Functions\n\nThe `` object takes the following common props:\n\n| Property | Default | Required | Description \n| --- | --- | --- | ---\n| `children` | N/A | `true` | The markdown string to render, or the [pre-processed tree](#pre-processing)\n| `style` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | `false` | An object to override the styling for the various rules, [see style section below](#rules-and-styles) for more info\n| `mergeStyle` | `true` | `false` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them\n| `rules` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for more info\n| `onLinkPress` | `import { Linking } from 'react-native';` and `Linking.openURL(url);` | `false` | A handler function to change click behaviour, [see handling links section below](#handling-links) for more info\n| `debugPrintTree` | `false` | `false` | Will print the AST tree to the console to help you see what the markdown is being translated to\n\n\nAnd some additional, less used options:\n\n| Property | Default | Required | Description \n| --- | --- | --- | ---\n| `renderer` | `instanceOf(AstRenderer)` | `false` | Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer.\n| `markdownit` | `instanceOf(MarkdownIt)` | `false` | A custom markdownit instance with your configuration, default is `MarkdownIt({typographer: true})`\n| `maxTopLevelChildren` | `null` | `false` | If defined as a number will only render out first `n` many top level children, then will try to render out `topLevelMaxExceededItem`\n| `topLevelMaxExceededItem` | `...` | `false` | Will render when `maxTopLevelChildren` is hit. Make sure to give it a key!\n| `allowedImageHandlers` | `['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://']` | `false` | Any image that does not start with one of these will have the `defaultImageHandler` value prepended to it (unless `defaultImageHandler` is null in which case it won't try to render anything)\n| `defaultImageHandler` | `http://` | `false` | Will be prepended to an image url if it does not start with something in the `allowedImageHandlers` array, if this is set to null, it won't try to recover but will just not render anything instead.\n\n\n# Syntax Support\n\n
Headings\n

\n\n```\n # h1 Heading 8-)\n ## h2 Heading\n ### h3 Heading\n #### h4 Heading\n ##### h5 Heading\n ###### h6 Heading\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Horizontal Rules\n

\n\n```\n Some text above\n ___\n\n Some text in the middle\n\n ---\n\n Some text below\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n\n

\n
\n\n\n\n
Emphasis\n

\n\n```\n **This is bold text**\n\n __This is bold text__\n\n *This is italic text*\n\n _This is italic text_\n\n ~~Strikethrough~~\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Blockquotes\n

\n\n```\n > Blockquotes can also be nested...\n >> ...by using additional greater-than signs right next to each other...\n > > > ...or with spaces between arrows.\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Lists\n

\n\n```\n Unordered\n\n + Create a list by starting a line with `+`, `-`, or `*`\n + Sub-lists are made by indenting 2 spaces:\n - Marker character change forces new list start:\n * Ac tristique libero volutpat at\n + Facilisis in pretium nisl aliquet. This is a very long list item that will surely wrap onto the next line.\n - Nulla volutpat aliquam velit\n + Very easy!\n\n Ordered\n\n 1. Lorem ipsum dolor sit amet\n 2. Consectetur adipiscing elit. This is a very long list item that will surely wrap onto the next line.\n 3. Integer molestie lorem at massa\n\n Start numbering with offset:\n\n 57. foo\n 58. bar\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Code\n

\n \n```\n Inline \\`code\\`\n\n Indented code\n\n // Some comments\n line 1 of code\n line 2 of code\n line 3 of code\n\n\n Block code \"fences\"\n\n \\`\\`\\`\n Sample text here...\n \\`\\`\\`\n\n Syntax highlighting\n\n \\`\\`\\` js\n var foo = function (bar) {\n return bar++;\n };\n\n console.log(foo(5));\n \\`\\`\\`\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Tables\n

\n\n```\n | Option | Description |\n | ------ | ----------- |\n | data | path to data files to supply the data that will be passed into templates. |\n | engine | engine to be used for processing templates. Handlebars is the default. |\n | ext | extension to be used for dest files. |\n\n Right aligned columns\n\n | Option | Description |\n | ------:| -----------:|\n | data | path to data files to supply the data that will be passed into templates. |\n | engine | engine to be used for processing templates. Handlebars is the default. |\n | ext | extension to be used for dest files. |\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n
Links\n

\n\n```\n [link text](https://www.google.com)\n\n [link with title](https://www.google.com \"title text!\")\n\n Autoconverted link https://www.google.com (enable linkify to see)\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n
Images\n

\n\n```\n ![Minion](https://octodex.github.com/images/minion.png)\n ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg \"The Stormtroopocat\")\n\n Like links, Images also have a footnote style syntax\n\n ![Alt text][id]\n\n With a reference later in the document defining the URL location:\n\n [id]: https://octodex.github.com/images/dojocat.jpg \"The Dojocat\"\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Typographic Replacements\n

\n\n```\n Enable typographer option to see result.\n\n (c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\n test.. test... test..... test?..... test!....\n\n !!!!!! ???? ,, -- ---\n\n \"Smartypants, double quotes\" and 'single quotes'\n```\n\n| iOS | Android\n| --- | ---\n| | \n\n

\n
\n\n\n
Plugins and Extensions\n

\n\n Plugins for **extra** syntax support can be added using any markdown-it compatible plugins - [see plugins](https://www.npmjs.com/browse/keyword/markdown-it-plugin) for documentation from markdown-it. An example for integration follows:\n\n\n#### Step 1\n\nIdentify the new components and integrate the plugin with a rendered component. We can use the `debugPrintTree` property to see what rules we are rendering:\n\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar } from 'react-native';\n\nimport Markdown, { MarkdownIt }from '@adapta-service/react-native-markdown-display';\nimport blockEmbedPlugin from 'markdown-it-block-embed';\n\nconst markdownItInstance = \n MarkdownIt({typographer: true})\n .use(blockEmbedPlugin, {\n containerClassName: \"video-embed\"\n });\n\nconst copy = `\n# Some header\n\n@[youtube](lJIrF4YjHfQ)\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n\n```\n\nIn the console, we will see the following rendered tree:\n\n```\nbody\n-heading1\n--textgroup\n---text\n-video\n```\n\nWith the following error message:\n\n```\nWarning, unknown render rule encountered: video. 'unknown' render rule used (by default, returns null - nothing rendered) \n```\n\n\n#### Step 2\n\nWe need to create the **render rules** and **styles** to handle this new **'video'** component\n\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar } from 'react-native';\n\nimport Markdown, { MarkdownIt }from '@adapta-service/react-native-markdown-display';\nimport blockEmbedPlugin from 'markdown-it-block-embed';\n\nconst markdownItInstance = \n MarkdownIt({typographer: true})\n .use(blockEmbedPlugin, {\n containerClassName: \"video-embed\"\n });\n\nconst copy = `\n# Some header\n\n@[youtube](lJIrF4YjHfQ)\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n {\n // examine the node properties to see what video we need to render\n console.log(node); // expected output of this is in readme.md below this code snip\n\n return (\n Return a video component instead of this text component!\n );\n }\n \n }}\n >\n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\nAnd all of the video properties needed to render something meaningful are on the node, like this:\n\n```\n{type: \"video\", sourceType: \"video\", sourceInfo: {…}, sourceMeta: null, block: true, …}\n attributes: {}\n block: true\n children: []\n content: \"\"\n index: 1\n key: \"rnmr_1720a98f540_video\"\n markup: \"@[youtube](lJIrF4YjHfQ)\"\n sourceInfo:\n service: YouTubeService\n env: PluginEnvironment {md: MarkdownIt, options: {…}, services: {…}}\n name: \"youtube\"\n options:\n height: 390\n width: 640\n serviceName: \"youtube\"\n videoID: \"lJIrF4YjHfQ\"\n videoReference: \"lJIrF4YjHfQ\"\n sourceMeta: null\n sourceType: \"video\"\n tokenIndex: 5\n type: \"video\"\n```\n\n#### Other Debugging\n\nYou can do some additional debugging of what the markdown instance is spitting out like this:\n\n```jsx\nimport Markdown, { MarkdownIt }from '@adapta-service/react-native-markdown-display';\nimport blockEmbedPlugin from 'markdown-it-block-embed';\n\nconst markdownItInstance = \n MarkdownIt({typographer: true})\n .use(blockEmbedPlugin, {\n containerClassName: \"video-embed\"\n });\n\nconst copy = `\n# Some header\n\n@[youtube](lJIrF4YjHfQ)\n`;\n\n// this shows you the tree that is used by the react-native-markdown-display\nconst astTree = markdownItInstance.parse(copy, {});\nconsole.log(astTree);\n\n//this contains the html that would be generated - not used by react-native-markdown-display but useful for reference\nconst html = markdownItInstance.render(copy);\nconsole.log(html);\n\n```\n\nThe above code will output something like this:\n\n```\nastTree:\n\n(4) [Token, Token, Token, Token]\n\n0: Token {type: \"heading_open\", tag: \"h1\", attrs: null, map: Array(2), nesting: 1, …}\n1: Token {type: \"inline\", tag: \"\", attrs: null, map: Array(2), nesting: 0, …}\n2: Token {type: \"heading_close\", tag: \"h1\", attrs: null, map: null, nesting: -1, …}\n3: Token {type: \"video\", tag: \"div\", attrs: null, map: Array(2), nesting: 0, …}\n\nlength: 4\n```\n\n```\nhtml:\n\n\n

Some header

\n
\n```\n\n\n

\n
\n\n\n
All Markdown for Testing\n

\n\nThis is all of the markdown in one place for testing that your applied styles work in all cases\n\n```\nHeadings\n\n # h1 Heading 8-)\n ## h2 Heading\n ### h3 Heading\n #### h4 Heading\n ##### h5 Heading\n ###### h6 Heading\n\n\nHorizontal Rules\n\n Some text above\n ___\n\n Some text in the middle\n\n ---\n\n Some text below\n\n\nEmphasis\n\n **This is bold text**\n\n __This is bold text__\n\n *This is italic text*\n\n _This is italic text_\n\n ~~Strikethrough~~\n\n\nBlockquotes\n\n > Blockquotes can also be nested...\n >> ...by using additional greater-than signs right next to each other...\n > > > ...or with spaces between arrows.\n\n\nLists\n\n Unordered\n\n + Create a list by starting a line with `+`, `-`, or `*`\n + Sub-lists are made by indenting 2 spaces:\n - Marker character change forces new list start:\n * Ac tristique libero volutpat at\n + Facilisis in pretium nisl aliquet. This is a very long list item that will surely wrap onto the next line.\n - Nulla volutpat aliquam velit\n + Very easy!\n\n Ordered\n\n 1. Lorem ipsum dolor sit amet\n 2. Consectetur adipiscing elit. This is a very long list item that will surely wrap onto the next line.\n 3. Integer molestie lorem at massa\n\n Start numbering with offset:\n\n 57. foo\n 58. bar\n\n\nCode\n\n Inline \\`code\\`\n\n Indented code\n\n // Some comments\n line 1 of code\n line 2 of code\n line 3 of code\n\n\n Block code \"fences\"\n\n \\`\\`\\`\n Sample text here...\n \\`\\`\\`\n\n Syntax highlighting\n\n \\`\\`\\` js\n var foo = function (bar) {\n return bar++;\n };\n\n console.log(foo(5));\n \\`\\`\\`\n\n\nTables\n\n | Option | Description |\n | ------ | ----------- |\n | data | path to data files to supply the data that will be passed into templates. |\n | engine | engine to be used for processing templates. Handlebars is the default. |\n | ext | extension to be used for dest files. |\n\n Right aligned columns\n\n | Option | Description |\n | ------:| -----------:|\n | data | path to data files to supply the data that will be passed into templates. |\n | engine | engine to be used for processing templates. Handlebars is the default. |\n | ext | extension to be used for dest files. |\n\n\nLinks\n\n [link text](https://www.google.com)\n\n [link with title](https://www.google.com \"title text!\")\n\n Autoconverted link https://www.google.com (enable linkify to see)\n\n\nImages\n\n ![Minion](https://octodex.github.com/images/minion.png)\n ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg \"The Stormtroopocat\")\n\n Like links, Images also have a footnote style syntax\n\n ![Alt text][id]\n\n With a reference later in the document defining the URL location:\n\n [id]: https://octodex.github.com/images/dojocat.jpg \"The Dojocat\"\n\n\nTypographic Replacements\n\n Enable typographer option to see result.\n\n (c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\n test.. test... test..... test?..... test!....\n\n !!!!!! ???? ,, -- ---\n\n \"Smartypants, double quotes\" and 'single quotes'\n\n```\n\n

\n
\n\n\n# Rules and Styles\n\n### How to style stuff\n\nText styles are applied in a way that makes it much more convenient to manage changes to global styles while also allowing fine tuning of individual elements.\n\nThink of the implementation like applying styles in CSS. changes to the `body` effect everything, but can be overwritten further down the style / component tree.\n\n**Be careful when styling 'text':** the text rule is not applied to all rendered text, most notably list bullet points. If you want to, for instance, color all text, change the `body` style.\n\n\n
Example\n

\n\n \n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst copy = `\nThis is some text which is red because of the body style, which is also really small!\n\n\\`\\`\\`\n//This is a code block woooo\n\nconst cool = () => {\n console.log('????');\n};\n\\`\\`\\`\n\nand some more small text\n\n# This is a h1\n## this is a h2\n### this is a h3\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n

\n
\n\n### Styles \n\nStyles are used to override how certain rules are styled. The existing implementation is [here](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js)\n\n**NOTE:** By default styles are merged with the existing implementation, to change this, see the `mergeStyle` prop\n\n
Example Implementation\n

\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst styles = StyleSheet.create({\n heading1: {\n fontSize: 32,\n backgroundColor: '#000000',\n color: '#FFFFFF',\n },\n heading2: {\n fontSize: 24,\n },\n heading3: {\n fontSize: 18,\n },\n heading4: {\n fontSize: 16,\n },\n heading5: {\n fontSize: 13,\n },\n heading6: {\n fontSize: 11,\n }\n});\n\nconst copy = `\n# h1 Heading 8-)\n## h2 Heading 8-)\n### h3 Heading 8-)\n\n| Option | Description |\n| ------ | ----------- |\n| data | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext | extension to be used for dest files. |\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n

\n
\n\n### Rules\n\nRules are used to specify how you want certain elements to be displayed. The existing implementation is [here](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js)\n\n
Example Implementation\n

\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst rules = {\n heading1: (node, children, parent, styles) =>\n \n >> H1 TEXT HERE >> \"{children}\"\n ,\n heading2: (node, children, parent, styles) =>\n \n >> H2 TEXT HERE >> \"{children}\"\n ,\n heading3: (node, children, parent, styles) =>\n \n >> H3 TEXT HERE >> \"{children}\"\n ,\n};\n\nconst copy = `\n# h1 Heading 8-)\n## h2 Heading 8-)\n### h3 Heading 8-)\n\n| Option | Description |\n| ------ | ----------- |\n| data | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext | extension to be used for dest files. |\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n

\n
\n\n\n### All rules and their associated styles:\n\n| Render Rule | Style(s) |\n| ------ | ----------- |\n| `body` | `body` | \n| `heading1` | `heading1` |\n| `heading2` | `heading2` |\n| `heading3` | `heading3` |\n| `heading4` | `heading4` |\n| `heading5` | `heading5` |\n| `heading6` | `heading6` | \n| `hr` | `hr` | \n| `strong` | `strong` | \n| `em` | `em` | \n| `s` | `s` | \n| `blockquote` | `blockquote` | \n| `bullet_list` | `bullet_list` | \n| `ordered_list` | `ordered_list` | \n| `list_item` | `list_item` - This is a special case that contains a set of pseudo classes that don't align to the render rule: `ordered_list_icon`, `ordered_list_content`, `bullet_list_icon`, `bullet_list_content` | \n| `code_inline` | `code_inline` | \n| `code_block` | `code_block` | \n| `fence` | `fence` | \n| `table` | `table` | \n| `thead` | `thead` | \n| `tbody` | `tbody` | \n| `th` | `th` | \n| `tr` | `tr` | \n| `td` | `td` | \n| `link` | `link` | \n| `blocklink` | `blocklink` | \n| `image` | `image` | \n| `text` | `text` | \n| `textgroup` | `textgroup` | \n| `paragraph` | `paragraph` | \n| `hardbreak` | `hardbreak` | \n| `softbreak` | `softbreak` | \n| `pre` | `pre` | \n| `inline` | `inline` | \n| `span` | `span` | \n\n# Handling Links\n\nLinks, by default, will be handled with the `import { Linking } from 'react-native';` import and `Linking.openURL(url);` call.\n\nIt is possible to overwrite this behaviour in one of two ways:\n\n
onLinkPress Callback\n

\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;\n\nconst onLinkPress = (url) => {\n if (url) {\n // some custom logic\n return false;\n }\n \n // return true to open with `Linking.openURL\n // return false to handle it yourself\n return true\n }\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n

\n
\n\n
Using a Custom Rule\n

\n\nYou will need to overwrite one or both of `link` and `blocklink`, the original defenitions can be [found here](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js)\n\nSomething like this with `yourCustomHandlerFunctionOrLogicHere`:\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';\n\nimport Markdown from '@adapta-service/react-native-markdown-display';\n\nconst copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;\n\nconst rules = {\n link: (node, children, parent, styles) => {\n return (\n yourCustomHandlerFunctionOrLogicHere(node.attributes.href) }>\n {children}\n \n );\n },\n};\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n

\n
\n\n\n# Disabling Specific Types of Markdown\n\nYou can dissable any type of markdown you want, which is very useful in a mobile environment, by passing the markdownit property like below. Note that for convenience we also export the `MarkdownIt` instance so you don't have to include it as a project dependency directly just to remove some types of markdown.\n\nThis example will stop images and links.\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';\n\nimport Markdown, { MarkdownIt }from '@adapta-service/react-native-markdown-display';\n\nconst copy = `\n# This heading will show with formatting\n\n[but this link will just](be displayed as this text)\n`;\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {copy}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\nA full list of things you can turn off is [here](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.js)\n\n\n### Pre Processing\n\nIt is possible to need to pre-process the data outside of this library ([related discussion here](https://github.com/iamacup/react-native-markdown-display/issues/79)). As a result, you can pass an AST tree directly as the children like this:\n\n```jsx\nimport React from 'react';\nimport { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native';\n\nimport Markdown, { MarkdownIt, tokensToAST, stringToTokens }from '@adapta-service/react-native-markdown-display';\n\nconst markdownItInstance = MarkdownIt({typographer: true});\n\nconst copy = `\n# Hello this is a title\n\nThis is some text with **BOLD!**\n`;\n\nconst ast = tokensToAST(stringToTokens(copy, markdownItInstance))\n\nconst App: () => React$Node = () => {\n return (\n <>\n \n \n \n \n {ast}\n \n \n \n \n );\n};\n\nexport default App;\n```\n\n\n### Other Notes\n\nThis is a fork of [react-native-markdown-renderer](https://github.com/mientjan/react-native-markdown-renderer), a library that unfortunately has not been updated for some time so i took all of the outstanding pull requests from that library and tested + merged as necessary.\n","readmeFilename":"README.md"}