markdown-to-jsx 7.2.0 → 7.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +157 -162
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +17 -7
- package/dist/index.js +0 -2
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ The most lightweight, customizable React markdown component.
|
|
|
17
17
|
- [options.overrides - Override Any HTML Tag's Representation](#optionsoverrides---override-any-html-tags-representation)
|
|
18
18
|
- [options.overrides - Rendering Arbitrary React Components](#optionsoverrides---rendering-arbitrary-react-components)
|
|
19
19
|
- [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)
|
|
20
|
+
- [options.enforceAtxHeadings](#optionsenforceatxheadings)
|
|
20
21
|
- [options.slugify](#optionsslugify)
|
|
21
22
|
- [options.namedCodesToUnicode](#optionsnamedcodestounicode)
|
|
22
23
|
- [options.disableParsingRawHTML](#optionsdisableparsingrawhtml)
|
|
@@ -26,6 +27,7 @@ The most lightweight, customizable React markdown component.
|
|
|
26
27
|
- [Gotchas](#gotchas)
|
|
27
28
|
- [Significant indentation inside arbitrary HTML](#significant-indentation-inside-arbitrary-html)
|
|
28
29
|
- [Code blocks](#code-blocks)
|
|
30
|
+
- [Using The Compiler Directly](#using-the-compiler-directly)
|
|
29
31
|
- [Changelog](#changelog)
|
|
30
32
|
- [Donate](#donate)
|
|
31
33
|
|
|
@@ -35,15 +37,15 @@ The most lightweight, customizable React markdown component.
|
|
|
35
37
|
|
|
36
38
|
`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:
|
|
37
39
|
|
|
38
|
-
-
|
|
39
|
-
|
|
40
|
+
- Arbitrary HTML is supported and parsed into the appropriate JSX representation
|
|
41
|
+
without `dangerouslySetInnerHTML`
|
|
40
42
|
|
|
41
|
-
-
|
|
42
|
-
|
|
43
|
+
- Any HTML tags rendered by the compiler and/or `<Markdown>` component can be overridden to include additional
|
|
44
|
+
props or even a different HTML representation entirely.
|
|
43
45
|
|
|
44
|
-
-
|
|
46
|
+
- GFM task list support.
|
|
45
47
|
|
|
46
|
-
-
|
|
48
|
+
- Fenced code blocks with [highlight.js](https://highlightjs.org/) support.
|
|
47
49
|
|
|
48
50
|
All this clocks in at around 5 kB gzipped, which is a fraction of the size of most other React markdown components.
|
|
49
51
|
|
|
@@ -64,11 +66,11 @@ npm i markdown-to-jsx
|
|
|
64
66
|
ES6-style usage\*:
|
|
65
67
|
|
|
66
68
|
```jsx
|
|
67
|
-
import Markdown from 'markdown-to-jsx'
|
|
68
|
-
import React from 'react'
|
|
69
|
-
import { render } from 'react-dom'
|
|
69
|
+
import Markdown from 'markdown-to-jsx'
|
|
70
|
+
import React from 'react'
|
|
71
|
+
import { render } from 'react-dom'
|
|
70
72
|
|
|
71
|
-
render(<Markdown># Hello world!</Markdown>, document.body)
|
|
73
|
+
render(<Markdown># Hello world!</Markdown>, document.body)
|
|
72
74
|
|
|
73
75
|
/*
|
|
74
76
|
renders:
|
|
@@ -98,15 +100,14 @@ But this string would be considered "block" due to the existence of a header tag
|
|
|
98
100
|
However, if you really want all input strings to be treated as "block" layout, simply pass `options.forceBlock = true` like this:
|
|
99
101
|
|
|
100
102
|
```jsx
|
|
101
|
-
|
|
103
|
+
;<Markdown options={{ forceBlock: true }}>Hello there old chap!</Markdown>
|
|
102
104
|
|
|
103
105
|
// or
|
|
104
106
|
|
|
105
|
-
compiler('Hello there old chap!', { forceBlock: true })
|
|
107
|
+
compiler('Hello there old chap!', { forceBlock: true })
|
|
106
108
|
|
|
107
109
|
// renders
|
|
108
|
-
|
|
109
|
-
<p>Hello there old chap!</p>;
|
|
110
|
+
;<p>Hello there old chap!</p>
|
|
110
111
|
```
|
|
111
112
|
|
|
112
113
|
#### options.forceInline
|
|
@@ -114,15 +115,14 @@ compiler('Hello there old chap!', { forceBlock: true });
|
|
|
114
115
|
The inverse is also available by passing `options.forceInline = true`:
|
|
115
116
|
|
|
116
117
|
```jsx
|
|
117
|
-
|
|
118
|
+
;<Markdown options={{ forceInline: true }}># You got it babe!</Markdown>
|
|
118
119
|
|
|
119
120
|
// or
|
|
120
121
|
|
|
121
|
-
compiler('# You got it babe!', { forceInline: true })
|
|
122
|
+
compiler('# You got it babe!', { forceInline: true })
|
|
122
123
|
|
|
123
124
|
// renders
|
|
124
|
-
|
|
125
|
-
<span># You got it babe!</span>;
|
|
125
|
+
;<span># You got it babe!</span>
|
|
126
126
|
```
|
|
127
127
|
|
|
128
128
|
#### options.wrapper
|
|
@@ -153,15 +153,10 @@ compiler(str, { wrapper: 'article' });
|
|
|
153
153
|
To get an array of children back without a wrapper, set `wrapper` to `null`. This is particularly useful when using `compiler(…)` directly.
|
|
154
154
|
|
|
155
155
|
```jsx
|
|
156
|
-
compiler('One\n\nTwo\n\nThree', { wrapper: null })
|
|
156
|
+
compiler('One\n\nTwo\n\nThree', { wrapper: null })
|
|
157
157
|
|
|
158
158
|
// returns
|
|
159
|
-
|
|
160
|
-
[
|
|
161
|
-
(<p>One</p>),
|
|
162
|
-
(<p>Two</p>),
|
|
163
|
-
(<p>Three</p>)
|
|
164
|
-
]
|
|
159
|
+
;[<p>One</p>, <p>Two</p>, <p>Three</p>]
|
|
165
160
|
```
|
|
166
161
|
|
|
167
162
|
To render children at the same DOM level as `<Markdown>` with no HTML wrapper, set `wrapper` to `React.Fragment`. This will still wrap your children in a React node for the purposes of rendering, but the wrapper element won't show up in the DOM.
|
|
@@ -186,32 +181,30 @@ By default, the compiler does not wrap the rendered contents if there is only a
|
|
|
186
181
|
Pass 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.
|
|
187
182
|
|
|
188
183
|
```jsx
|
|
189
|
-
import Markdown from 'markdown-to-jsx'
|
|
190
|
-
import React from 'react'
|
|
191
|
-
import { render } from 'react-dom'
|
|
184
|
+
import Markdown from 'markdown-to-jsx'
|
|
185
|
+
import React from 'react'
|
|
186
|
+
import { render } from 'react-dom'
|
|
192
187
|
|
|
193
188
|
// surprise, it's a div instead!
|
|
194
|
-
const MyParagraph = ({ children, ...props }) =>
|
|
195
|
-
<div {...props}>{children}</div>
|
|
196
|
-
);
|
|
189
|
+
const MyParagraph = ({ children, ...props }) => <div {...props}>{children}</div>
|
|
197
190
|
|
|
198
191
|
render(
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
)
|
|
192
|
+
<Markdown
|
|
193
|
+
options={{
|
|
194
|
+
overrides: {
|
|
195
|
+
h1: {
|
|
196
|
+
component: MyParagraph,
|
|
197
|
+
props: {
|
|
198
|
+
className: 'foo',
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
}}
|
|
203
|
+
>
|
|
204
|
+
# Hello world!
|
|
205
|
+
</Markdown>,
|
|
206
|
+
document.body
|
|
207
|
+
)
|
|
215
208
|
|
|
216
209
|
/*
|
|
217
210
|
renders:
|
|
@@ -234,19 +227,19 @@ If you only wish to provide a component override, a simplified syntax is availab
|
|
|
234
227
|
|
|
235
228
|
Depending on the type of element, there are some props that must be preserved to ensure the markdown is converted as intended. They are:
|
|
236
229
|
|
|
237
|
-
-
|
|
238
|
-
-
|
|
239
|
-
-
|
|
240
|
-
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
230
|
+
- `a`: `title`, `href`
|
|
231
|
+
- `img`: `title`, `alt`, `src`
|
|
232
|
+
- `input[type="checkbox"]`: `checked`, `readonly` (specifically, the one rendered by a GFM task list)
|
|
233
|
+
- `ol`: `start`
|
|
234
|
+
- `td`: `style`
|
|
235
|
+
- `th`: `style`
|
|
243
236
|
|
|
244
237
|
Any conflicts between passed `props` and the specific properties above will be resolved in favor of `markdown-to-jsx`'s code.
|
|
245
238
|
|
|
246
239
|
Some element mappings are a bit different from other libraries, in particular:
|
|
247
240
|
|
|
248
|
-
- `span`:
|
|
249
|
-
- `code`:
|
|
241
|
+
- `span`: Used for inline text.
|
|
242
|
+
- `code`: Used for inline code.
|
|
250
243
|
- `pre > code`: Code blocks are a `code` element with a `pre` as its direct ancestor.
|
|
251
244
|
|
|
252
245
|
#### options.overrides - Rendering Arbitrary React Components
|
|
@@ -256,11 +249,11 @@ One of the most interesting use cases enabled by the HTML syntax processing in `
|
|
|
256
249
|
By 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:
|
|
257
250
|
|
|
258
251
|
```jsx
|
|
259
|
-
import Markdown from 'markdown-to-jsx'
|
|
260
|
-
import React from 'react'
|
|
261
|
-
import { render } from 'react-dom'
|
|
252
|
+
import Markdown from 'markdown-to-jsx'
|
|
253
|
+
import React from 'react'
|
|
254
|
+
import { render } from 'react-dom'
|
|
262
255
|
|
|
263
|
-
import DatePicker from './date-picker'
|
|
256
|
+
import DatePicker from './date-picker'
|
|
264
257
|
|
|
265
258
|
const md = `
|
|
266
259
|
# DatePicker
|
|
@@ -269,21 +262,21 @@ The DatePicker works by supplying a date to bias towards,
|
|
|
269
262
|
as well as a default timezone.
|
|
270
263
|
|
|
271
264
|
<DatePicker biasTowardDateTime="2017-12-05T07:39:36.091Z" timezone="UTC+5" />
|
|
272
|
-
|
|
265
|
+
`
|
|
273
266
|
|
|
274
267
|
render(
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
)
|
|
268
|
+
<Markdown
|
|
269
|
+
children={md}
|
|
270
|
+
options={{
|
|
271
|
+
overrides: {
|
|
272
|
+
DatePicker: {
|
|
273
|
+
component: DatePicker,
|
|
274
|
+
},
|
|
275
|
+
},
|
|
276
|
+
}}
|
|
277
|
+
/>,
|
|
278
|
+
document.body
|
|
279
|
+
)
|
|
287
280
|
```
|
|
288
281
|
|
|
289
282
|
`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.
|
|
@@ -291,11 +284,11 @@ render(
|
|
|
291
284
|
In the following case, `DatePicker` could simply run `parseInt()` on the passed `startTime` for example:
|
|
292
285
|
|
|
293
286
|
```jsx
|
|
294
|
-
import Markdown from 'markdown-to-jsx'
|
|
295
|
-
import React from 'react'
|
|
296
|
-
import { render } from 'react-dom'
|
|
287
|
+
import Markdown from 'markdown-to-jsx'
|
|
288
|
+
import React from 'react'
|
|
289
|
+
import { render } from 'react-dom'
|
|
297
290
|
|
|
298
|
-
import DatePicker from './date-picker'
|
|
291
|
+
import DatePicker from './date-picker'
|
|
299
292
|
|
|
300
293
|
const md = `
|
|
301
294
|
# DatePicker
|
|
@@ -308,40 +301,40 @@ as well as a default timezone.
|
|
|
308
301
|
timezone="UTC+5"
|
|
309
302
|
startTime={1514579720511}
|
|
310
303
|
/>
|
|
311
|
-
|
|
304
|
+
`
|
|
312
305
|
|
|
313
306
|
render(
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
)
|
|
307
|
+
<Markdown
|
|
308
|
+
children={md}
|
|
309
|
+
options={{
|
|
310
|
+
overrides: {
|
|
311
|
+
DatePicker: {
|
|
312
|
+
component: DatePicker,
|
|
313
|
+
},
|
|
314
|
+
},
|
|
315
|
+
}}
|
|
316
|
+
/>,
|
|
317
|
+
document.body
|
|
318
|
+
)
|
|
326
319
|
```
|
|
327
320
|
|
|
328
321
|
Another possibility is to use something like [recompose's `withProps()` HOC](https://github.com/acdlite/recompose/blob/main/docs/API.md#withprops) to create various pregenerated scenarios and then reference them by name in the markdown:
|
|
329
322
|
|
|
330
323
|
```jsx
|
|
331
|
-
import Markdown from 'markdown-to-jsx'
|
|
332
|
-
import React from 'react'
|
|
333
|
-
import { render } from 'react-dom'
|
|
334
|
-
import withProps from 'recompose/withProps'
|
|
324
|
+
import Markdown from 'markdown-to-jsx'
|
|
325
|
+
import React from 'react'
|
|
326
|
+
import { render } from 'react-dom'
|
|
327
|
+
import withProps from 'recompose/withProps'
|
|
335
328
|
|
|
336
|
-
import DatePicker from './date-picker'
|
|
329
|
+
import DatePicker from './date-picker'
|
|
337
330
|
|
|
338
331
|
const DecemberDatePicker = withProps({
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
})(DatePicker)
|
|
332
|
+
range: {
|
|
333
|
+
start: new Date('2017-12-01'),
|
|
334
|
+
end: new Date('2017-12-31'),
|
|
335
|
+
},
|
|
336
|
+
timezone: 'UTC+5',
|
|
337
|
+
})(DatePicker)
|
|
345
338
|
|
|
346
339
|
const md = `
|
|
347
340
|
# DatePicker
|
|
@@ -358,20 +351,20 @@ as well as a default timezone.
|
|
|
358
351
|
Here's an example of a DatePicker pre-set to only the month of December:
|
|
359
352
|
|
|
360
353
|
<DecemberDatePicker />
|
|
361
|
-
|
|
354
|
+
`
|
|
362
355
|
|
|
363
356
|
render(
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
)
|
|
357
|
+
<Markdown
|
|
358
|
+
children={md}
|
|
359
|
+
options={{
|
|
360
|
+
overrides: {
|
|
361
|
+
DatePicker,
|
|
362
|
+
DecemberDatePicker,
|
|
363
|
+
},
|
|
364
|
+
}}
|
|
365
|
+
/>,
|
|
366
|
+
document.body
|
|
367
|
+
)
|
|
375
368
|
```
|
|
376
369
|
|
|
377
370
|
#### options.createElement - Custom React.createElement behavior
|
|
@@ -379,57 +372,62 @@ render(
|
|
|
379
372
|
Sometimes, 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):
|
|
380
373
|
|
|
381
374
|
```javascript
|
|
382
|
-
import Markdown from 'markdown-to-jsx'
|
|
383
|
-
import React from 'react'
|
|
384
|
-
import { render } from 'react-dom'
|
|
375
|
+
import Markdown from 'markdown-to-jsx'
|
|
376
|
+
import React from 'react'
|
|
377
|
+
import { render } from 'react-dom'
|
|
385
378
|
|
|
386
379
|
const md = `
|
|
387
380
|
# Hello world
|
|
388
|
-
|
|
381
|
+
`
|
|
389
382
|
|
|
390
383
|
render(
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
)
|
|
384
|
+
<Markdown
|
|
385
|
+
children={md}
|
|
386
|
+
options={{
|
|
387
|
+
createElement(type, props, children) {
|
|
388
|
+
return (
|
|
389
|
+
<div className="parent">
|
|
390
|
+
{React.createElement(type, props, children)}
|
|
391
|
+
</div>
|
|
392
|
+
)
|
|
393
|
+
},
|
|
394
|
+
}}
|
|
395
|
+
/>,
|
|
396
|
+
document.body
|
|
397
|
+
)
|
|
405
398
|
```
|
|
406
399
|
|
|
400
|
+
#### options.enforceAtxHeadings
|
|
401
|
+
|
|
402
|
+
Forces the compiler to have space between hash sign `#` and the header text which is explicitly stated in the most of the [markdown specs](https://github.github.com/gfm/#atx-heading).
|
|
403
|
+
|
|
404
|
+
> The opening sequence of `#` characters must be followed by a space or by the end of line.
|
|
405
|
+
|
|
407
406
|
#### options.slugify
|
|
408
407
|
|
|
409
408
|
By 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:
|
|
410
409
|
|
|
411
410
|
```jsx
|
|
412
|
-
|
|
411
|
+
;<Markdown options={{ slugify: str => str }}># 中文</Markdown>
|
|
413
412
|
|
|
414
413
|
// or
|
|
415
414
|
|
|
416
|
-
compiler('# 中文', { slugify: str => str })
|
|
415
|
+
compiler('# 中文', { slugify: str => str })
|
|
417
416
|
|
|
418
417
|
// renders:
|
|
419
|
-
|
|
420
|
-
<h1 id="中文">中文</h1>
|
|
418
|
+
;<h1 id="中文">中文</h1>
|
|
421
419
|
```
|
|
422
420
|
|
|
423
421
|
#### options.namedCodesToUnicode
|
|
424
422
|
|
|
425
423
|
By default only a couple of named html codes are converted to unicode characters:
|
|
426
424
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
425
|
+
- `&` (`&`)
|
|
426
|
+
- `'` (`'`)
|
|
427
|
+
- `>` (`>`)
|
|
428
|
+
- `<` (`<`)
|
|
429
|
+
- ` ` (` `)
|
|
430
|
+
- `"` (`"`)
|
|
433
431
|
|
|
434
432
|
Some projects require to extend this map of named codes and unicode characters. To customize this list with additional html codes pass the option namedCodesToUnicode as object with the code names needed as in the example below:
|
|
435
433
|
|
|
@@ -437,6 +435,7 @@ Some projects require to extend this map of named codes and unicode characters.
|
|
|
437
435
|
<Markdown options={{ namedCodesToUnicode: {
|
|
438
436
|
le: '\u2264',
|
|
439
437
|
ge: '\u2265',
|
|
438
|
+
'#39': '\u0027',
|
|
440
439
|
} }}>This text is ≤ than this text.</Markdown>;
|
|
441
440
|
|
|
442
441
|
// or
|
|
@@ -444,6 +443,7 @@ Some projects require to extend this map of named codes and unicode characters.
|
|
|
444
443
|
compiler('This text is ≤ than this text.', namedCodesToUnicode: {
|
|
445
444
|
le: '\u2264',
|
|
446
445
|
ge: '\u2265',
|
|
446
|
+
'#39': '\u0027',
|
|
447
447
|
});
|
|
448
448
|
|
|
449
449
|
// renders:
|
|
@@ -471,30 +471,31 @@ compiler('This text has <span>html</span> in it but it won't be rendered', { dis
|
|
|
471
471
|
|
|
472
472
|
### Syntax highlighting
|
|
473
473
|
|
|
474
|
-
Some syntax highlighters require you to specify the language.
|
|
474
|
+
Some syntax highlighters require you to specify the language. The language of the code fence is
|
|
475
475
|
forwarded in the className prop of the element used for `<code>`:
|
|
476
476
|
|
|
477
477
|
```jsx
|
|
478
|
-
const Code = ({className, children}) => {
|
|
479
|
-
const language = className.replace(
|
|
478
|
+
const Code = ({ className, children }) => {
|
|
479
|
+
const language = className.replace('lang-', '')
|
|
480
480
|
|
|
481
481
|
return (
|
|
482
482
|
<SyntaxHighlighter language={language}>
|
|
483
483
|
<code>{children}</code>
|
|
484
484
|
</SyntaxHighlighter>
|
|
485
|
-
)
|
|
485
|
+
)
|
|
486
486
|
}
|
|
487
487
|
```
|
|
488
|
+
|
|
488
489
|
### Getting the smallest possible bundle size
|
|
489
490
|
|
|
490
491
|
Many 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.
|
|
491
492
|
|
|
492
493
|
Here are instructions for some of the popular bundlers:
|
|
493
494
|
|
|
494
|
-
-
|
|
495
|
-
-
|
|
496
|
-
-
|
|
497
|
-
-
|
|
495
|
+
- [webpack](https://webpack.js.org/guides/production/#specify-the-environment)
|
|
496
|
+
- [browserify plugin](https://github.com/hughsk/envify)
|
|
497
|
+
- [parcel](https://parceljs.org/production.html)
|
|
498
|
+
- [fuse-box](http://fuse-box.org/plugins/replace-plugin#notes)
|
|
498
499
|
|
|
499
500
|
### Usage with Preact
|
|
500
501
|
|
|
@@ -507,9 +508,7 @@ Everything will work just fine! Simply [Alias `react` to `preact/compat`](https:
|
|
|
507
508
|
People usually write HTML like this:
|
|
508
509
|
|
|
509
510
|
```html
|
|
510
|
-
<div>
|
|
511
|
-
Hey, how are you?
|
|
512
|
-
</div>
|
|
511
|
+
<div>Hey, how are you?</div>
|
|
513
512
|
```
|
|
514
513
|
|
|
515
514
|
Note 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.
|
|
@@ -517,11 +516,7 @@ Note the leading spaces before the inner content. This sort of thing unfortunate
|
|
|
517
516
|
To get around this, `markdown-to-jsx` left-trims approximately as much whitespace as the first line inside the HTML block. So for example:
|
|
518
517
|
|
|
519
518
|
```html
|
|
520
|
-
<div>
|
|
521
|
-
# Hello
|
|
522
|
-
|
|
523
|
-
How are you?
|
|
524
|
-
</div>
|
|
519
|
+
<div># Hello How are you?</div>
|
|
525
520
|
```
|
|
526
521
|
|
|
527
522
|
The 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.
|
|
@@ -540,24 +535,24 @@ The two leading spaces in front of "# Hello" would be left-trimmed from all line
|
|
|
540
535
|
|
|
541
536
|
✅
|
|
542
537
|
|
|
543
|
-
|
|
538
|
+
````md
|
|
544
539
|
<div>
|
|
545
540
|
```js
|
|
546
541
|
var some = code();
|
|
547
542
|
``\`
|
|
548
543
|
</div>
|
|
549
|
-
|
|
544
|
+
````
|
|
550
545
|
|
|
551
546
|
## Using The Compiler Directly
|
|
552
547
|
|
|
553
548
|
If desired, the compiler function is a "named" export on the `markdown-to-jsx` module:
|
|
554
549
|
|
|
555
550
|
```jsx
|
|
556
|
-
import { compiler } from 'markdown-to-jsx'
|
|
557
|
-
import React from 'react'
|
|
558
|
-
import { render } from 'react-dom'
|
|
551
|
+
import { compiler } from 'markdown-to-jsx'
|
|
552
|
+
import React from 'react'
|
|
553
|
+
import { render } from 'react-dom'
|
|
559
554
|
|
|
560
|
-
render(compiler('# Hello world!'), document.body)
|
|
555
|
+
render(compiler('# Hello world!'), document.body)
|
|
561
556
|
|
|
562
557
|
/*
|
|
563
558
|
renders:
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function n(n){if(n&&n.t)return n;var r=Object.create(null);return n&&Object.keys(n).forEach(function(t){if("default"!==t){var e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:function(){return n[t]}})}}),r.default=n,r}var r=/*#__PURE__*/n(require("react"));function t(){return t=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n},t.apply(this,arguments)}var e=["children","options"],u=["allowFullScreen","allowTransparency","autoComplete","autoFocus","autoPlay","cellPadding","cellSpacing","charSet","className","classId","colSpan","contentEditable","contextMenu","crossOrigin","encType","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","hrefLang","inputMode","keyParams","keyType","marginHeight","marginWidth","maxLength","mediaGroup","minLength","noValidate","radioGroup","readOnly","rowSpan","spellCheck","srcDoc","srcLang","srcSet","tabIndex","useMap"].reduce(function(n,r){return n[r.toLowerCase()]=r,n},{for:"htmlFor"}),o={amp:"&",apos:"'",gt:">",lt:"<",nbsp:" ",quot:"“"},a=["style","script"],c=/([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi,i=/mailto:/i,_=/\n{2,}$/,f=/^( *>[^\n]+(\n[^\n]+)*\n*)+\n{2,}/,l=/^ *> ?/gm,s=/^ {2,}\n/,d=/^(?:( *[-*_])){3,} *(?:\n *)+\n/,p=/^\s*(`{3,}|~{3,}) *(\S+)?([^\n]*?)?\n([\s\S]+?)\s*\1 *(?:\n *)*\n?/,m=/^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/,v=/^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,g=/^(?:\n *)*\n/,y=/\r\n?/g,h=/^\[\^([^\]]+)](:.*)\n/,k=/^\[\^([^\]]+)]/,b=/\f/g,x=/^\s*?\[(x|\s)\]/,S=/^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,$=/^ *(#{1,6}) +([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/,z=/^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/,O=/^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?([^>]*)\/{0}>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1)[\s\S])*?)<\/\1>\n*/i,j=/&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi,w=/^<!--[\s\S]*?(?:-->)/,A=/^(data|aria|x)-[a-z_][a-z\d_.-]*$/,E=/^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i,L=/^\{.*\}$/,M=/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,I=/^<([^ >]+@[^ >]+)>/,B=/^<([^ >]+:\/[^ >]+)>/,R=/-([a-z])?/gi,T=/^(.*\|?.*)\n *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*)\n?/,C=/^\[([^\]]*)\]:\s+<?([^\s>]+)>?\s*("([^"]*)")?/,D=/^!\[([^\]]*)\] ?\[([^\]]*)\]/,F=/^\[([^\]]*)\] ?\[([^\]]*)\]/,N=/(\[|\])/g,P=/(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/,Z=/\t/g,q=/^ *\| */,G=/(^ *\||\| *$)/g,H=/ *$/,U=/^ *:-+: *$/,V=/^ *:-+ *$/,W=/^ *-+: *$/,Q=/^([*_])\1((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1\1(?!\1)/,X=/^([*_])((?:\[.*?\][([].*?[)\]]|<.*?>(?:.*?<.*?>)?|`.*?`|~+.*?~+|.)*?)\1(?!\1|\w)/,J=/^==((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)==/,K=/^~~((?:\[.*?\]|<.*?>(?:.*?<.*?>)?|`.*?`|.)*?)~~/,Y=/^\\([^0-9A-Za-z\s])/,nn=/^[\s\S]+?(?=[^0-9A-Z\s\u00c0-\uffff&#;.()'"]|\d+\.|\n\n| {2,}\n|\w+:\S|$)/i,rn=/^\n+/,tn=/^([ \t]*)/,en=/\\([^\\])/g,un=/ *\n+$/,on=/(?:^|\n)( *)$/,an="(?:\\d+\\.)",cn="(?:[*+-])";function _n(n){return"( *)("+(1===n?an:cn)+") +"}var fn=_n(1),ln=_n(2);function sn(n){return new RegExp("^"+(1===n?fn:ln))}var dn=sn(1),pn=sn(2);function mn(n){return new RegExp("^"+(1===n?fn:ln)+"[^\\n]*(?:\\n(?!\\1"+(1===n?an:cn)+" )[^\\n]*)*(\\n|$)","gm")}var vn=mn(1),gn=mn(2);function yn(n){var r=1===n?an:cn;return new RegExp("^( *)("+r+") [\\s\\S]+?(?:\\n{2,}(?! )(?!\\1"+r+" (?!"+r+" ))\\n*|\\s*\\n*$)")}var hn=yn(1),kn=yn(2);function bn(n,r){var t=1===r,e=t?hn:kn,u=t?vn:gn,o=t?dn:pn;return{u:function(n,r,t){var u=on.exec(t);return u&&(r.o||!r.i&&!r._)?e.exec(n=u[1]+n):null},l:Pn.HIGH,p:function(n,r,e){var a=t?+n[2]:void 0,c=n[0].replace(_,"\n").match(u),i=!1;return{m:c.map(function(n,t){var u=o.exec(n)[0].length,a=new RegExp("^ {1,"+u+"}","gm"),_=n.replace(a,"").replace(o,""),f=t===c.length-1,l=-1!==_.indexOf("\n\n")||f&&i;i=l;var s,d=e.i,p=e.o;e.o=!0,l?(e.i=!1,s=_.replace(un,"\n\n")):(e.i=!0,s=_.replace(un,""));var m=r(s,e);return e.i=d,e.o=p,m}),v:t,g:a}},h:function(r,t,e){return n(r.v?"ol":"ul",{key:e.k,start:r.g},r.m.map(function(r,u){return n("li",{key:u},t(r,e))}))}}}var xn=/^\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,Sn=/^!\[([^\]]*)]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/,$n=[f,p,m,S,z,$,w,T,vn,hn,gn,kn],zn=[].concat($n,[/^[^\n]+(?: \n|\n{2,})/,O,E]);function On(n){return n.replace(/[ÀÁÂÃÄÅàáâãä忯]/g,"a").replace(/[çÇ]/g,"c").replace(/[ðÐ]/g,"d").replace(/[ÈÉÊËéèêë]/g,"e").replace(/[ÏïÎîÍíÌì]/g,"i").replace(/[Ññ]/g,"n").replace(/[øØœŒÕõÔôÓóÒò]/g,"o").replace(/[ÜüÛûÚúÙù]/g,"u").replace(/[ŸÿÝý]/g,"y").replace(/[^a-z0-9- ]/gi,"").replace(/ /gi,"-").toLowerCase()}function jn(n){return W.test(n)?"right":U.test(n)?"center":V.test(n)?"left":null}function wn(n,r,t){var e=t.S;t.S=!0;var u=r(n.trim(),t);t.S=e;var o=[[]];return u.forEach(function(n,r){"tableSeparator"===n.type?0!==r&&r!==u.length-1&&o.push([]):("text"!==n.type||null!=u[r+1]&&"tableSeparator"!==u[r+1].type||(n.$=n.$.replace(H,"")),o[o.length-1].push(n))}),o}function An(n,r,t){t.i=!0;var e=wn(n[1],r,t),u=n[2].replace(G,"").split("|").map(jn),o=function(n,r,t){return n.trim().split("\n").map(function(n){return wn(n,r,t)})}(n[3],r,t);return t.i=!1,{O:u,j:o,A:e,type:"table"}}function En(n,r){return null==n.O[r]?{}:{textAlign:n.O[r]}}function Ln(n){return function(r,t){return t.i?n.exec(r):null}}function Mn(n){return function(r,t){return t.i||t._?n.exec(r):null}}function In(n){return function(r,t){return t.i||t._?null:n.exec(r)}}function Bn(n){return function(r){return n.exec(r)}}function Rn(n,r,t){if(r.i||r._)return null;if(t&&!t.endsWith("\n"))return null;var e="";n.split("\n").every(function(n){return!$n.some(function(r){return r.test(n)})&&(e+=n+"\n",n.trim())});var u=e.trimEnd();return""==u?null:[e,u]}function Tn(n){try{if(decodeURIComponent(n).replace(/[^A-Za-z0-9/:]/g,"").match(/^\s*(javascript|vbscript|data(?!:image)):/i))return null}catch(n){return null}return n}function Cn(n){return n.replace(en,"$1")}function Dn(n,r,t){var e=t.i||!1,u=t._||!1;t.i=!0,t._=!0;var o=n(r,t);return t.i=e,t._=u,o}function Fn(n,r,t){var e=t.i||!1,u=t._||!1;t.i=!1,t._=!0;var o=n(r,t);return t.i=e,t._=u,o}function Nn(n,r,t){return t.i=!1,n(r,t)}var Pn,Zn=function(n,r,t){return{$:Dn(r,n[1],t)}};function qn(){return{}}function Gn(){return null}function Hn(){return[].slice.call(arguments).filter(Boolean).join(" ")}function Un(n,r,t){for(var e=n,u=r.split(".");u.length&&void 0!==(e=e[u[0]]);)u.shift();return e||t}function Vn(n,r){var t=Un(r,n);return t?"function"==typeof t||"object"==typeof t&&"render"in t?t:Un(r,n+".component",n):n}function Wn(n,e){void 0===e&&(e={}),e.overrides=e.overrides||{},e.slugify=e.slugify||On,e.namedCodesToUnicode=e.namedCodesToUnicode?t({},o,e.namedCodesToUnicode):o;var _=e.createElement||r.createElement;function G(n,r){var u=Un(e.overrides,n+".props",{});return _.apply(void 0,[Vn(n,e.overrides),t({},r,u,{className:Hn(null==r?void 0:r.className,u.className)||void 0})].concat([].slice.call(arguments,2)))}function H(n){var t=!1;e.forceInline?t=!0:e.forceBlock||(t=!1===P.test(n));for(var u=an(on(t?n:n.trimEnd().replace(rn,"")+"\n\n",{i:t}));"string"==typeof u[u.length-1]&&!u[u.length-1].trim();)u.pop();if(null===e.wrapper)return u;var o,a=e.wrapper||(t?"span":"div");if(u.length>1||e.forceWrapper)o=u;else{if(1===u.length)return"string"==typeof(o=u[0])?G("span",{key:"outer"},o):o;o=null}return r.createElement(a,{key:"outer"},o)}function U(n){var t=n.match(c);return t?t.reduce(function(n,t,e){var o=t.indexOf("=");if(-1!==o){var a=function(n){return-1!==n.indexOf("-")&&null===n.match(A)&&(n=n.replace(R,function(n,r){return r.toUpperCase()})),n}(t.slice(0,o)).trim(),c=function(n){var r=n[0];return('"'===r||"'"===r)&&n.length>=2&&n[n.length-1]===r?n.slice(1,-1):n}(t.slice(o+1).trim()),i=u[a]||a,_=n[i]=function(n,r){return"style"===n?r.split(/;\s?/).reduce(function(n,r){var t=r.slice(0,r.indexOf(":"));return n[t.replace(/(-[a-z])/g,function(n){return n[1].toUpperCase()})]=r.slice(t.length+1).trim(),n},{}):"href"===n?Tn(r):(r.match(L)&&(r=r.slice(1,r.length-1)),"true"===r||"false"!==r&&r)}(a,c);"string"==typeof _&&(O.test(_)||E.test(_))&&(n[i]=r.cloneElement(H(_.trim()),{key:e}))}else"style"!==t&&(n[u[t]||t]=!0);return n},{}):null}var V=[],W={},en={blockQuote:{u:In(f),l:Pn.HIGH,p:function(n,r,t){return{$:r(n[0].replace(l,""),t)}},h:function(n,r,t){return G("blockquote",{key:t.k},r(n.$,t))}},breakLine:{u:Bn(s),l:Pn.HIGH,p:qn,h:function(n,r,t){return G("br",{key:t.k})}},breakThematic:{u:In(d),l:Pn.HIGH,p:qn,h:function(n,r,t){return G("hr",{key:t.k})}},codeBlock:{u:In(m),l:Pn.MAX,p:function(n){return{$:n[0].replace(/^ {4}/gm,"").replace(/\n+$/,""),L:void 0}},h:function(n,r,e){return G("pre",{key:e.k},G("code",t({},n.M,{className:n.L?"lang-"+n.L:""}),n.$))}},codeFenced:{u:In(p),l:Pn.MAX,p:function(n){return{M:U(n[3]||""),$:n[4],L:n[2]||void 0,type:"codeBlock"}}},codeInline:{u:Mn(v),l:Pn.LOW,p:function(n){return{$:n[2]}},h:function(n,r,t){return G("code",{key:t.k},n.$)}},footnote:{u:In(h),l:Pn.MAX,p:function(n){return V.push({I:n[2],B:n[1]}),{}},h:Gn},footnoteReference:{u:Ln(k),l:Pn.HIGH,p:function(n){return{$:n[1],R:"#"+e.slugify(n[1])}},h:function(n,r,t){return G("a",{key:t.k,href:Tn(n.R)},G("sup",{key:t.k},n.$))}},gfmTask:{u:Ln(x),l:Pn.HIGH,p:function(n){return{T:"x"===n[1].toLowerCase()}},h:function(n,r,t){return G("input",{checked:n.T,key:t.k,readOnly:!0,type:"checkbox"})}},heading:{u:In(e.enforceAtxHeadings?$:S),l:Pn.HIGH,p:function(n,r,t){return{$:Dn(r,n[2],t),C:e.slugify(n[2]),D:n[1].length}},h:function(n,r,t){return G("h"+n.D,{id:n.C,key:t.k},r(n.$,t))}},headingSetext:{u:In(z),l:Pn.MAX,p:function(n,r,t){return{$:Dn(r,n[1],t),D:"="===n[2]?1:2,type:"heading"}}},htmlComment:{u:Bn(w),l:Pn.HIGH,p:function(){return{}},h:Gn},image:{u:Mn(Sn),l:Pn.HIGH,p:function(n){return{F:n[1],R:Cn(n[2]),N:n[3]}},h:function(n,r,t){return G("img",{key:t.k,alt:n.F||void 0,title:n.N||void 0,src:Tn(n.R)})}},link:{u:Ln(xn),l:Pn.LOW,p:function(n,r,t){return{$:Fn(r,n[1],t),R:Cn(n[2]),N:n[3]}},h:function(n,r,t){return G("a",{key:t.k,href:Tn(n.R),title:n.N},r(n.$,t))}},linkAngleBraceStyleDetector:{u:Ln(B),l:Pn.MAX,p:function(n){return{$:[{$:n[1],type:"text"}],R:n[1],type:"link"}}},linkBareUrlDetector:{u:function(n,r){return r.P?null:Ln(M)(n,r)},l:Pn.MAX,p:function(n){return{$:[{$:n[1],type:"text"}],R:n[1],N:void 0,type:"link"}}},linkMailtoDetector:{u:Ln(I),l:Pn.MAX,p:function(n){var r=n[1],t=n[1];return i.test(t)||(t="mailto:"+t),{$:[{$:r.replace("mailto:",""),type:"text"}],R:t,type:"link"}}},orderedList:bn(G,1),unorderedList:bn(G,2),newlineCoalescer:{u:In(g),l:Pn.LOW,p:qn,h:function(){return"\n"}},paragraph:{u:Rn,l:Pn.LOW,p:Zn,h:function(n,r,t){return G("p",{key:t.k},r(n.$,t))}},ref:{u:Ln(C),l:Pn.MAX,p:function(n){return W[n[1]]={R:n[2],N:n[4]},{}},h:Gn},refImage:{u:Mn(D),l:Pn.MAX,p:function(n){return{F:n[1]||void 0,Z:n[2]}},h:function(n,r,t){return G("img",{key:t.k,alt:n.F,src:Tn(W[n.Z].R),title:W[n.Z].N})}},refLink:{u:Ln(F),l:Pn.MAX,p:function(n,r,t){return{$:r(n[1],t),q:r(n[0].replace(N,"\\$1"),t),Z:n[2]}},h:function(n,r,t){return W[n.Z]?G("a",{key:t.k,href:Tn(W[n.Z].R),title:W[n.Z].N},r(n.$,t)):G("span",{key:t.k},r(n.q,t))}},table:{u:In(T),l:Pn.HIGH,p:An,h:function(n,r,t){return G("table",{key:t.k},G("thead",null,G("tr",null,n.A.map(function(e,u){return G("th",{key:u,style:En(n,u)},r(e,t))}))),G("tbody",null,n.j.map(function(e,u){return G("tr",{key:u},e.map(function(e,u){return G("td",{key:u,style:En(n,u)},r(e,t))}))})))}},tableSeparator:{u:function(n,r){return r.S?(r.i=!0,q.exec(n)):null},l:Pn.HIGH,p:function(){return{type:"tableSeparator"}},h:function(){return" | "}},text:{u:Bn(nn),l:Pn.MIN,p:function(n){return{$:n[0].replace(j,function(n,r){return e.namedCodesToUnicode[r]?e.namedCodesToUnicode[r]:n})}},h:function(n){return n.$}},textBolded:{u:Mn(Q),l:Pn.MED,p:function(n,r,t){return{$:r(n[2],t)}},h:function(n,r,t){return G("strong",{key:t.k},r(n.$,t))}},textEmphasized:{u:Mn(X),l:Pn.LOW,p:function(n,r,t){return{$:r(n[2],t)}},h:function(n,r,t){return G("em",{key:t.k},r(n.$,t))}},textEscaped:{u:Mn(Y),l:Pn.HIGH,p:function(n){return{$:n[1],type:"text"}}},textMarked:{u:Mn(J),l:Pn.LOW,p:Zn,h:function(n,r,t){return G("mark",{key:t.k},r(n.$,t))}},textStrikethroughed:{u:Mn(K),l:Pn.LOW,p:Zn,h:function(n,r,t){return G("del",{key:t.k},r(n.$,t))}}};!0!==e.disableParsingRawHTML&&(en.htmlBlock={u:Bn(O),l:Pn.HIGH,p:function(n,r,t){var e,u=n[3].match(tn),o=new RegExp("^"+u[1],"gm"),c=n[3].replace(o,""),i=(e=c,zn.some(function(n){return n.test(e)})?Nn:Dn),_=n[1].toLowerCase(),f=-1!==a.indexOf(_);t.P=t.P||"a"===_;var l=f?n[3]:i(r,c,t);return t.P=!1,{M:U(n[2]),$:l,G:f,H:f?_:n[1]}},h:function(n,r,e){return G(n.H,t({key:e.k},n.M),n.G?n.$:r(n.$,e))}},en.htmlSelfClosing={u:Bn(E),l:Pn.HIGH,p:function(n){return{M:U(n[2]||""),H:n[1]}},h:function(n,r,e){return G(n.H,t({},n.M,{key:e.k}))}});var un,on=function(n){var r=Object.keys(n);function t(e,u){for(var o=[],a="";e;)for(var c=0;c<r.length;){var i=r[c],_=n[i],f=_.u(e,u,a);if(f){var l=f[0];e=e.substring(l.length);var s=_.p(f,t,u);null==s.type&&(s.type=i),o.push(s),a=l;break}c++}return o}return r.sort(function(r,t){var e=n[r].l,u=n[t].l;return e!==u?e-u:r<t?-1:1}),function(n,r){return t(function(n){return n.replace(y,"\n").replace(b,"").replace(Z," ")}(n),r)}}(en),an=(un=function(n){return function(r,t,e){return n[r.type].h(r,t,e)}}(en),function n(r,t){if(void 0===t&&(t={}),Array.isArray(r)){for(var e=t.k,u=[],o=!1,a=0;a<r.length;a++){t.k=a;var c=n(r[a],t),i="string"==typeof c;i&&o?u[u.length-1]+=c:null!==c&&u.push(c),o=i}return t.k=e,u}return un(r,n,t)}),cn=H(n);return V.length?G("div",null,cn,G("footer",{key:"footer"},V.map(function(n){return G("div",{id:e.slugify(n.B),key:n.B},n.B,an(on(n.I,{i:!0})))}))):cn}!function(n){n[n.MAX=0]="MAX",n[n.HIGH=1]="HIGH",n[n.MED=2]="MED",n[n.LOW=3]="LOW",n[n.MIN=4]="MIN"}(Pn||(Pn={}));var Qn=function(n){var t=n.children,u=n.options,o=function(n,r){if(null==n)return{};var t,e,u={},o=Object.keys(n);for(e=0;e<o.length;e++)r.indexOf(t=o[e])>=0||(u[t]=n[t]);return u}(n,e);return r.cloneElement(Wn(t,u),o)};Object.assign(Qn,{compiler:Wn}),module.exports=Qn;
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|