{"_id":"@azban/markdown-to-jsx","_rev":"2-615950850969ab9ef3840b70b79f6dea","name":"@azban/markdown-to-jsx","dist-tags":{"latest":"6.7.4"},"versions":{"6.7.3":{"name":"@azban/markdown-to-jsx","description":"Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.","license":"MIT","version":"6.7.3","engines":{"node":">= 4"},"keywords":["markdown","markdown converter","react","preact","jsx","html"],"author":{"name":"azban","email":"me@azban.net"},"repository":{"type":"git","url":"git+https://github.com/azban/markdown-to-jsx.git"},"bugs":{"url":"https://github.com/azban/markdown-to-jsx/issues"},"main":"index.cjs.js","jsnext:main":"index.esm.js","module":"index.esm.js","devDependencies":{"babel-cli":"^6.14.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-loader":"^7.1.4","babel-plugin-emotion":"^9.1.2","babel-plugin-transform-react-remove-prop-types":"^0.4.13","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.1","babel-preset-stage-2":"^6.13.0","codecov":"^3.0.1","cross-env":"^5.2.0","emotion":"^9.1.2","eslint":"^4.12.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^3.0.0","eslint-plugin-react":"^7.5.1","in-publish":"^2.0.0","jest":"^22.4.3","jest-serializer-html":"^5.0.0","polished":"^1.3.0","preact":"^8.2.1","preact-compat":"^3.16.0","preact-emotion":"^9.1.2","react":"^15.6.1","react-dom":"^15.6.1","size-limit":"^0.17.0","uglify-js":"^3.3.15","webpack":"^4.1.1","webpack-cli":"^2.0.12","webpack-dev-server":"^3.1.1"},"dependencies":{"prop-types":"^15.5.10","unquote":"^1.1.0"},"peerDependencies":{"react":">= 0.14.0"},"scripts":{"prepublish":"in-publish && npm run build || not-in-publish","lint":"eslint index.js index.spec.js site.js","prepare":"npm run build","build":"babel index.js --out-file index.cjs.js --source-maps && cross-env BABEL_ENV=esm babel index.js --out-file index.esm.js --source-maps","release":"webpack --config ./webpack.config.prod.babel.js -p --display-optimization-bailout","release:debug":"webpack --config ./webpack.config.babel.js --display-optimization-bailout","start":"webpack-dev-server --hot --inline --open","test":"jest --verbose","size":"size-limit","jesse":"babel jesse.js --out-file jesse.cjs.js --source-maps && node jesse.cjs.js"},"size-limit":[{"path":"index.cjs.js","limit":"5 kB"}],"jest":{"snapshotSerializers":["jest-serializer-html"]},"collective":{"type":"opencollective","url":"https://opencollective.com/markdown-to-jsx"},"gitHead":"8cae27bf8dfff619cc2d37d5c5642bb23f9e918a","homepage":"https://github.com/azban/markdown-to-jsx#readme","_id":"@azban/markdown-to-jsx@6.7.3","_nodeVersion":"10.22.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-wKLNGM6RdpAelrN+o7Z8OtumqH4hxxSBncPCNUmEkjBElXV7ZWUeK10ItRTwyZt4/g3fQQ/uk5WeZd8ST9Ea3w==","shasum":"e618fda6759448fe8f13c66de4598c54f6afb197","tarball":"https://registry.npmjs.org/@azban/markdown-to-jsx/-/markdown-to-jsx-6.7.3.tgz","fileCount":7,"unpackedSize":277759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKyqmCRA9TVsSAnZWagAA6zQP/0MKNnhElmVLc8UGIPcE\n8AwBivnKCIZ+9SdCWFGInVzIXX8DWVNm8tvdVyTecLI66Lwo17w3dPpsSCyV\nSqkCaiYvy1MAU1stAJQD6rfdaOR/Gdh9o3tlUoPc8rV5SCPPlffg0+uCb+Fl\nTKyKZLb0lc1jNQLWj5psvrGM1uuPqb/2SQjT+yRi5cLm2jKN3wi6uLBN5Wp6\nhTA6vwhHaX7BBIcOW6V0FwEr/aSw/fTAZLHWV9AaofFtBk9ZvFfz8SlSKmVj\nrr01N3f/Wwrl13O3Yw6FGjRnDhZHXs9b83sut+7uE9YisXrqyng2/3ZndNXt\nCRaxDgnUjDIX4rsza1WwHbgvAQSEXcUpseQofFli5C+AVIdAZaTw8d+EkP+o\nUz0Qkx/Lk6oRY5s7vb5yfaL7F4I5FzjJngXDUJTq8kk6ZDheGGe9aBcUjeTK\nmsfJ/Gnmch4O8uOd2XWLgNDcYzZ+vVkQfDFx9PPEFbJLUtVnZfSSeK2TD4FN\nFw3FEsi9PN4P21QYLIpA2e+hYqeFildUa7pt1zjkpZBYynFMh0jbnxSNuPte\nB1h73I+b5+5tGo7v3ml96Iqb6s+RomkX8ChZsghDTrWzKANrcAGqGVeCBc7Z\n6DEm8BeBdudGvIVYmRjfuNm31i0BWAiOrio88OPJDHgRZp8o8IDO0WUa+/gb\nx7iy\r\n=8YOC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBENcqX8lY+30KROVyopQs4xfhv0NdDwOa2EipaKrcWvAiAOGiw+edF3TAPuOgCz6qrw2OBe20HYVY9AKNYshYQZjQ=="}]},"maintainers":[{"name":"azban","email":"me@azban.net"}],"_npmUser":{"name":"azban","email":"me@azban.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/markdown-to-jsx_6.7.3_1596664485718_0.3595951883297237"},"_hasShrinkwrap":false},"6.7.4":{"name":"@azban/markdown-to-jsx","description":"Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.","license":"MIT","version":"6.7.4","engines":{"node":">= 4"},"keywords":["markdown","markdown converter","react","preact","jsx","html"],"author":{"name":"azban","email":"me@azban.net"},"repository":{"type":"git","url":"git+https://github.com/azban/markdown-to-jsx.git"},"bugs":{"url":"https://github.com/azban/markdown-to-jsx/issues"},"main":"index.cjs.js","jsnext:main":"index.esm.js","module":"index.esm.js","devDependencies":{"babel-cli":"^6.14.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-jest":"^22.4.3","babel-loader":"^7.1.4","babel-plugin-emotion":"^9.1.2","babel-plugin-transform-react-remove-prop-types":"^0.4.13","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.1","babel-preset-stage-2":"^6.13.0","codecov":"^3.0.1","cross-env":"^5.2.0","emotion":"^9.1.2","eslint":"^4.12.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^3.0.0","eslint-plugin-react":"^7.5.1","in-publish":"^2.0.0","jest":"^22.4.3","jest-serializer-html":"^5.0.0","polished":"^1.3.0","preact":"^8.2.1","preact-compat":"^3.16.0","preact-emotion":"^9.1.2","react":"^15.6.1","react-dom":"^15.6.1","size-limit":"^0.17.0","uglify-js":"^3.3.15","webpack":"^4.1.1","webpack-cli":"^2.0.12","webpack-dev-server":"^3.1.1"},"dependencies":{"prop-types":"^15.5.10","unquote":"^1.1.0"},"peerDependencies":{"react":">= 0.14.0"},"scripts":{"prepublish":"in-publish && npm run build || not-in-publish","lint":"eslint index.js index.spec.js site.js","prepare":"npm run build","build":"babel index.js --out-file index.cjs.js --source-maps && cross-env BABEL_ENV=esm babel index.js --out-file index.esm.js --source-maps","release":"webpack --config ./webpack.config.prod.babel.js -p --display-optimization-bailout","release:debug":"webpack --config ./webpack.config.babel.js --display-optimization-bailout","start":"webpack-dev-server --hot --inline --open","test":"jest --verbose","size":"size-limit","jesse":"babel jesse.js --out-file jesse.cjs.js --source-maps && node jesse.cjs.js"},"size-limit":[{"path":"index.cjs.js","limit":"5 kB"}],"jest":{"snapshotSerializers":["jest-serializer-html"]},"collective":{"type":"opencollective","url":"https://opencollective.com/markdown-to-jsx"},"gitHead":"8cae27bf8dfff619cc2d37d5c5642bb23f9e918a","homepage":"https://github.com/azban/markdown-to-jsx#readme","_id":"@azban/markdown-to-jsx@6.7.4","_nodeVersion":"10.22.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-GCe5/cTofPG75hTYywOW52UQefulmieYTR4mO2GMgnCQf2rxOaCSf8in6jBF27lym52MF8NfH+5PhQCAJEOWOw==","shasum":"5b10f11dca226e81904147d9bad3a1fda0d5ddc0","tarball":"https://registry.npmjs.org/@azban/markdown-to-jsx/-/markdown-to-jsx-6.7.4.tgz","fileCount":8,"unpackedSize":280790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKy57CRA9TVsSAnZWagAADTQP/0EHiXzQjuJz7rHj0I8f\ng5vOHPn+pEsZcNc0selLfOOARuXUUlM1F1XZF9x5sZFUcVowZ1UfHsbidVCz\nh2X7JMG2GrldWaMVYNRFVcOrbX2tagpJI5JXOuKhTAA921AvhRMmeYcGVYGw\ngmQOfC8xT7ctfiw/x8BGZA3md4qS3VGbdchT54cNN7vJE9coOyOve+V87dtm\nmSLpYg9HOBosP+xPMV67b9QCIekAVcRbrzcX/xlDQex/phnlt2FMjP7Ia/vA\naBfL9UgbW+Zm0I7dNsLnf/tX9iEYJjpvopYo8Xw7R2XlTqmbKMzW/e+hfMsa\nNRKt9pYf/muuASfnUPvonnVUHH17TYmYP0Ihcnzbq2TWprpM7dy7WqG2fzE2\ne3w+RCQDxWaq95FKj4wjwpm9OkBhNDebtt9S8a29gfmTPJ5kR1grlzddQi4g\nkYyeCqBSRBADWaw0DoRtCAYgWxCYZ2Tx1OMsp+YsZ/u/w20aAQhTxnv6Z5Vr\nT7/hsljaXQH8QYs3PTZ6pMNuGCQEohAC+iIATFWe0hQYtM4Cj2uit2gJZZ/9\n2Uf2Tb0VudCY34Xp6xGH8W/59tTHsC9DfLmN+78q+lOReGdGIEm8VjYxNF8K\nLJcXp6Z3DvsfibjDz3KccMyoC2mQJgKyHZM1Y4Ma5HiZvwIlYpstv36LtchD\nWSss\r\n=ZeMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX1Jis/9jaKQMsbXHs8FzZiD6HEHk2qqO1YWhv4UhTOgIgfPsJQkOivP+j6fTxsCVvGSZwZa9nqeK5cIK0Aw6J55k="}]},"maintainers":[{"name":"azban","email":"me@azban.net"}],"_npmUser":{"name":"azban","email":"me@azban.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/markdown-to-jsx_6.7.4_1596665467225_0.7792681044561769"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-05T21:54:45.718Z","6.7.3":"2020-08-05T21:54:45.930Z","modified":"2022-04-04T17:15:48.976Z","6.7.4":"2020-08-05T22:11:07.371Z"},"maintainers":[{"name":"azban","email":"me@azban.net"}],"description":"Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.","homepage":"https://github.com/azban/markdown-to-jsx#readme","keywords":["markdown","markdown converter","react","preact","jsx","html"],"repository":{"type":"git","url":"git+https://github.com/azban/markdown-to-jsx.git"},"author":{"name":"azban","email":"me@azban.net"},"bugs":{"url":"https://github.com/azban/markdown-to-jsx/issues"},"license":"MIT","readme":"**markdown-to-jsx**\n\nThe most lightweight, customizable React markdown component.\n\n[![npm version](https://badge.fury.io/js/markdown-to-jsx.svg)](https://badge.fury.io/js/markdown-to-jsx) [![build status](https://api.travis-ci.org/probablyup/markdown-to-jsx.svg)](https://travis-ci.org/probablyup/markdown-to-jsx) [![codecov](https://codecov.io/gh/probablyup/markdown-to-jsx/branch/master/graph/badge.svg)](https://codecov.io/gh/probablyup/markdown-to-jsx) [![downloads](https://img.shields.io/npm/dm/markdown-to-jsx.svg)](https://npm-stat.com/charts.html?package=markdown-to-jsx)\n[![Backers on Open Collective](https://opencollective.com/markdown-to-jsx/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/markdown-to-jsx/sponsors/badge.svg)](#sponsors)\n\n<!-- TOC -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n    - [Parsing Options](#parsing-options)\n        - [options.forceBlock](#optionsforceblock)\n        - [options.forceInline](#optionsforceinline)\n        - [options.overrides - Override Any HTML Tag's Representation](#optionsoverrides---override-any-html-tags-representation)\n        - [options.overrides - Rendering Arbitrary React Components](#optionsoverrides---rendering-arbitrary-react-components)\n        - [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)\n        - [options.slugify](#optionsslugify)\n    - [Getting the smallest possible bundle size](#getting-the-smallest-possible-bundle-size)\n    - [Usage with Preact](#usage-with-preact)\n- [Gotchas](#gotchas)\n    - [Significant indentation inside arbitrary HTML](#significant-indentation-inside-arbitrary-html)\n        - [Code blocks](#code-blocks)\n- [Using The Compiler Directly](#using-the-compiler-directly)\n- [Changelog](#changelog)\n- [Donate](#donate)\n- [Credits](#credits)\n    - [Contributors](#contributors)\n    - [Backers](#backers)\n    - [Sponsors](#sponsors)\n\n<!-- /TOC -->\n\n---\n\n`markdown-to-jsx` uses a heavily-modified fork of [simple-markdown](https://github.com/Khan/simple-markdown) as its parsing engine and extends it in a number of ways to make your life easier. Notably, this package offers the following additional benefits:\n\n-   Arbitrary HTML is supported and parsed into the appropriate JSX representation\n    without `dangerouslySetInnerHTML`\n\n-   Any HTML tags rendered by the compiler and/or `<Markdown>` component can be overridden to include additional\n    props or even a different HTML representation entirely.\n\n-   GFM task list support.\n\n-   Fenced code blocks with [highlight.js](https://highlightjs.org/) support.\n\nAll this clocks in at around 5 kB gzipped, which is a fraction of the size of most other React markdown components.\n\nRequires React >= 0.14.\n\n## Installation\n\nInstall `markdown-to-jsx` with your favorite package manager.\n\n```shell\nnpm i markdown-to-jsx\n```\n\n## Usage\n\n`markdown-to-jsx` exports a React component by default for easy JSX composition:\n\nES6-style usage\\*:\n\n```jsx\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\nrender(<Markdown># Hello world!</Markdown>, document.body);\n\n/*\n    renders:\n\n    <h1>Hello world!</h1>\n */\n```\n\n\\* **NOTE: JSX does not natively preserve newlines in multiline text. In general, writing markdown directly in JSX is discouraged and it's a better idea to keep your content in separate .md files and require them, perhaps using webpack's [raw-loader](https://github.com/webpack-contrib/raw-loader).**\n\n### Parsing Options\n\n#### options.forceBlock\n\nBy default, the compiler will try to make an intelligent guess about the content passed and wrap it in a `<div>`, `<p>`, or `<span>` as needed to satisfy the \"inline\"-ness of the markdown. For instance, this string would be considered \"inline\":\n\n```md\nHello. _Beautiful_ day isn't it?\n```\n\nBut this string would be considered \"block\" due to the existence of a header tag, which is a block-level HTML element:\n\n```md\n# Whaddup?\n```\n\nHowever, if you really want all input strings to be treated as \"block\" layout, simply pass `options.forceBlock = true` like this:\n\n```jsx\n<Markdown options={{ forceBlock: true }}>Hello there old chap!</Markdown>;\n\n// or\n\ncompiler('Hello there old chap!', { forceBlock: true });\n\n// renders\n\n<p>Hello there old chap!</p>;\n```\n\n#### options.forceInline\n\nThe inverse is also available by passing `options.forceInline = true`:\n\n```jsx\n<Markdown options={{ forceInline: true }}># You got it babe!</Markdown>;\n\n// or\n\ncompiler('# You got it babe!', { forceInline: true });\n\n// renders\n\n<span># You got it babe!</span>;\n```\n\n#### options.overrides - Override Any HTML Tag's Representation\n\nPass the `options.overrides` prop to the compiler or `<Markdown>` component to seamlessly revise the rendered representation of any HTML tag. You can choose to change the component itself, add/change props, or both.\n\n```jsx\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\n// surprise, it's a div instead!\nconst MyParagraph = ({ children, ...props }) => (\n    <div {...props}>{children}</div>\n);\n\nrender(\n    <Markdown\n        options={{\n            overrides: {\n                h1: {\n                    component: MyParagraph,\n                    props: {\n                        className: 'foo',\n                    },\n                },\n            },\n        }}\n    >\n        # Hello world!\n    </Markdown>,\n    document.body\n);\n\n/*\n    renders:\n\n    <div class=\"foo\">\n        Hello World\n    </div>\n */\n```\n\nIf you only wish to provide a component override, a simplified syntax is available:\n\n```js\n{\n    overrides: {\n        h1: MyParagraph,\n    },\n}\n```\n\nDepending on the type of element, there are some props that must be preserved to ensure the markdown is converted as intended. They are:\n\n-   `a`: `title`, `href`\n-   `img`: `title`, `alt`, `src`\n-   `input[type=\"checkbox\"]`: `checked`, `readonly` (specifically, the one rendered by a GFM task list)\n-   `ol`: `start`\n-   `td`: `style`\n-   `th`: `style`\n\nAny conflicts between passed `props` and the specific properties above will be resolved in favor of `markdown-to-jsx`'s code.\n\n#### options.overrides - Rendering Arbitrary React Components\n\nOne of the most interesting use cases enabled by the HTML syntax processing in `markdown-to-jsx` is the ability to use any kind of element, even ones that aren't real HTML tags like React component classes.\n\nBy adding an override for the components you plan to use in markdown documents, it's possible to dynamically render almost anything. One possible scenario could be writing documentation:\n\n```jsx\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport DatePicker from './date-picker';\n\nconst md = `\n# DatePicker\n\nThe DatePicker works by supplying a date to bias towards,\nas well as a default timezone.\n\n<DatePicker biasTowardDateTime=\"2017-12-05T07:39:36.091Z\" timezone=\"UTC+5\" />\n`;\n\nrender(\n    <Markdown\n        children={md}\n        options={{\n            overrides: {\n                DatePicker: {\n                    component: DatePicker,\n                },\n            },\n        }}\n    />,\n    document.body\n);\n```\n\n`markdown-to-jsx` also handles JSX interpolation syntax, but in a minimal way to not introduce a potential attack vector. Interpolations are sent to the component as their raw string, which the consumer can then `eval()` or process as desired to their security needs.\n\nIn the following case, `DatePicker` could simply run `parseInt()` on the passed `startTime` for example:\n\n```jsx\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport DatePicker from './date-picker';\n\nconst md = `\n# DatePicker\n\nThe DatePicker works by supplying a date to bias towards,\nas well as a default timezone.\n\n<DatePicker\n  biasTowardDateTime=\"2017-12-05T07:39:36.091Z\"\n  timezone=\"UTC+5\"\n  startTime={1514579720511}\n/>\n`;\n\nrender(\n    <Markdown\n        children={md}\n        options={{\n            overrides: {\n                DatePicker: {\n                    component: DatePicker,\n                },\n            },\n        }}\n    />,\n    document.body\n);\n```\n\nAnother possibility is to use something like [recompose's `withProps()` HOC](https://github.com/acdlite/recompose/blob/master/docs/API.md#withprops) to create various pregenerated scenarios and then reference them by name in the markdown:\n\n```jsx\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\nimport withProps from 'recompose/withProps';\n\nimport DatePicker from './date-picker';\n\nconst DecemberDatePicker = withProps({\n    range: {\n        start: new Date('2017-12-01'),\n        end: new Date('2017-12-31'),\n    },\n    timezone: 'UTC+5',\n})(DatePicker);\n\nconst md = `\n# DatePicker\n\nThe DatePicker works by supplying a date to bias towards,\nas well as a default timezone.\n\n<DatePicker\n  biasTowardDateTime=\"2017-12-05T07:39:36.091Z\"\n  timezone=\"UTC+5\"\n  startTime={1514579720511}\n/>\n\nHere's an example of a DatePicker pre-set to only the month of December:\n\n<DecemberDatePicker />\n`;\n\nrender(\n    <Markdown\n        children={md}\n        options={{\n            overrides: {\n                DatePicker,\n                DecemberDatePicker,\n            },\n        }}\n    />,\n    document.body\n);\n```\n\n#### options.createElement - Custom React.createElement behavior\n\nSometimes, you might want to override the `React.createElement` default behavior to hook into the rendering process before the JSX gets rendered. This might be useful to add extra children or modify some props based on runtime conditions. The function mirrors the `React.createElement` function, so the params are [`type, [props], [...children]`](https://reactjs.org/docs/react-api.html#createelement):\n\n```javascript\nimport Markdown from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\nconst md = `\n# Hello world\n`;\n\nrender(\n    <Markdown\n        children={md}\n        options={{\n            createElement(type, props, children) {\n                return (\n                    <div className=\"parent\">\n                        {React.createElement(type, props, children)}\n                    </div>\n                );\n            },\n        }}\n    />,\n    document.body\n);\n```\n\n#### options.slugify\n\nBy default, a [lightweight deburring function](https://github.com/probablyup/markdown-to-jsx/blob/bc2f57412332dc670f066320c0f38d0252e0f057/index.js#L261-L275) is used to generate an HTML id from headings. You can override this by passing a function to `options.slugify`. This is helpful when you are using non-alphanumeric characters (e.g. Chinese or Japanese characters) in headings. For example:\n\n```jsx\n<Markdown options={{ slugify: str => str }}># 中文</Markdown>;\n\n// or\n\ncompiler('# 中文', { slugify: str => str });\n\n// renders:\n\n<h1 id=\"中文\">中文</h1>\n```\n\n#### options.doNotLeftTrimInHTML\n\nBy default, markdown-to-jsx left-trims whitespace of lines inside an HTML block. Please see _Significant indentation inside arbitrary HTML_ below for more context. This left-trimming can be disabled by setting this option to `true`.\n\n```jsx\nconst md = `\n# Hello world\n\nThere are several<ins> ways</ins><del> methods</del> to change the way that markdown-to-jsx works.\n`;\n\nrender(\n    <Markdown\n        children={md}\n        options={{\n            doNotLeftTrimInHTML: true\n        }}\n    />,\n    document.body\n);\n```\n\n### Getting the smallest possible bundle size\n\nMany development conveniences are placed behind `process.env.NODE_ENV !== \"production\"` conditionals. When bundling your app, it's a good idea to replace these code snippets such that a minifier (like uglify) can sweep them away and leave a smaller overall bundle.\n\nHere are instructions for some of the popular bundlers:\n\n-   [webpack](https://webpack.js.org/guides/production/#specify-the-environment)\n-   [browserify plugin](https://github.com/hughsk/envify)\n-   [parcel](https://parceljs.org/production.html)\n-   [fuse-box](http://fuse-box.org/plugins/replace-plugin#notes)\n\n### Usage with Preact\n\nEverything will work just fine! Simply [Alias `react` to `preact-compat`](https://github.com/developit/preact-compat#usage-with-webpack) like you probably already are doing.\n\n## Gotchas\n\n### Significant indentation inside arbitrary HTML\n\nPeople usually write HTML like this:\n\n```html\n<div>\n    Hey, how are you?\n</div>\n```\n\nNote the leading spaces before the inner content. This sort of thing unfortunately clashes with existing markdown syntaxes since 4 spaces === a code block and other similar collisions.\n\nTo get around this, by default, `markdown-to-jsx` left-trims approximately as much whitespace as the first line inside the HTML block. So for example:\n\n```html\n<div>\n  # Hello\n\n  How are you?\n</div>\n```\n\nThe two leading spaces in front of \"# Hello\" would be left-trimmed from all lines inside the HTML block. In the event that there are varying amounts of indentation, only the amount of the first line is trimmed.\n\n> NOTE! This whitespace left-trimming can be turned off with the option `doNotLeftTrimInHTML`. Please be warned that you are responsible for your own left-trimming inside of HTML blocks if you enable this option.\n\n> NOTE! These syntaxes work just fine when you aren't writing arbitrary HTML wrappers inside your markdown. This is very much an edge case of an edge case. 🙃\n\n#### Code blocks\n\n⛔️\n\n```md\n<div>\n    var some = code();\n</div>\n```\n\n✅\n\n```md\n<div>\n```js\nvar some = code();\n```\n</div>\n```\n\n## Using The Compiler Directly\n\nIf desired, the compiler function is a \"named\" export on the `markdown-to-jsx` module:\n\n```jsx\nimport { compiler } from 'markdown-to-jsx';\nimport React from 'react';\nimport { render } from 'react-dom';\n\nrender(compiler('# Hello world!'), document.body);\n\n/*\n    renders:\n\n    <h1>Hello world!</h1>\n */\n```\n\nIt accepts the following arguments:\n\n```js\ncompiler(markdown: string, options: object?)\n```\n\n## Changelog\n\nSee [Github Releases](https://github.com/probablyup/markdown-to-jsx/releases).\n\n## Donate\n\nLike this library? It's developed entirely on a volunteer basis; chip in a few bucks if you can at the [OpenCollective](https://opencollective.com/markdown-to-jsx).\n\n## Credits\n\n### Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n<a href=\"graphs/contributors\"><img src=\"https://opencollective.com/markdown-to-jsx/contributors.svg?width=890&button=false\" /></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/markdown-to-jsx#backer)]\n\n<a href=\"https://opencollective.com/markdown-to-jsx#backers\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/backers.svg?width=890\"></a>\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/markdown-to-jsx#sponsor)]\n\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/0/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/0/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/1/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/1/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/2/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/2/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/3/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/3/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/4/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/4/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/5/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/5/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/6/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/6/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/7/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/7/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/8/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/8/avatar.svg\"></a>\n<a href=\"https://opencollective.com/markdown-to-jsx/sponsor/9/website\" target=\"_blank\"><img src=\"https://opencollective.com/markdown-to-jsx/sponsor/9/avatar.svg\"></a>\n\nMIT\n","readmeFilename":"README.md"}