Skip to content

Commit 4b3294a

Browse files
iamacupiamacup
committed
docs
1 parent 30a3cf6 commit 4b3294a

File tree

1 file changed

+204
-79
lines changed

1 file changed

+204
-79
lines changed

‎README.md‎

Lines changed: 204 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -62,85 +62,6 @@ And some additional, more advanced options:
6262
| `plugins` | `false` | An array of plugins to be applied to the markdownit instance
6363

6464

65-
# Rules
66-
67-
# Style
68-
69-
# Handling Links
70-
71-
Links, by default, will be handled with the `import { Linking } from 'react-native';` import and `Linking.openURL(url);` call.
72-
73-
It is possible to overwrite this behaviour in one of two ways:
74-
75-
<details><summary>onLinkPress Callback</summary>
76-
<p>
77-
78-
```jsx
79-
import react from 'react';
80-
import { PureComponent } from 'react-native';
81-
import Markdown from 'react-native-markdown-display';
82-
83-
const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
84-
85-
export default class Page extends PureComponent {
86-
onLinkPress = (url) => {
87-
if (url) {
88-
// some custom logic
89-
}
90-
91-
// return true to open with `Linking.openURL
92-
// return false to handle it yourself
93-
return true
94-
}
95-
96-
render() {
97-
return (
98-
<Markdown onLinkPress={this.onLinkPress}>{copy}</Markdown>
99-
);
100-
}
101-
}
102-
```
103-
104-
</p>
105-
</details>
106-
107-
<details><summary>Using a Custom Rule</summary>
108-
<p>
109-
110-
You 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)
111-
112-
Something like this with `yourCustomHandlerFunctionOrLogicHere`:
113-
114-
```jsx
115-
import react from 'react';
116-
import {View, PureComponent, Text} from 'react-native';
117-
import Markdown, {getUniqueID} from 'react-native-markdown-display';
118-
119-
const rules = {
120-
link: (node, children, parent, styles) => {
121-
return (
122-
<Text key={node.key} style={styles.link} onPress={() => yourCustomHandlerFunctionOrLogicHere(node.attributes.href) }>
123-
{children}
124-
</Text>
125-
);
126-
},
127-
};
128-
129-
const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
130-
131-
export default class Page extends PureComponent {
132-
render() {
133-
return (
134-
<Markdown rules={rules}>{copy}</Markdown>
135-
);
136-
}
137-
}
138-
```
139-
140-
</p>
141-
</details>
142-
143-
14465
# Syntax Support
14566

14667
<details><summary>Headings</summary>
@@ -342,6 +263,210 @@ export default class Page extends PureComponent {
342263
</details>
343264

344265

266+
# Rules
267+
268+
Rules 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)
269+
270+
The list of rules that can be overwritten is:
271+
272+
```["unknown", "textgroup", "inline", "text", "span", "strong", "s", "link", "blocklink", "em", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "paragraph", "hardbreak", "blockquote", "code_inline", "code_block", "fence", "pre", "bullet_list", "ordered_list", "list_item", "table", "thead", "tbody", "th", "tr", "td", "hr", "softbreak", "image"]```
273+
274+
<details><summary>Example Implementation</summary>
275+
<p>
276+
277+
```jsx
278+
import react from 'react';
279+
import {View, PureComponent, Text} from 'react-native';
280+
import Markdown, {getUniqueID} from 'react-native-markdown-display';
281+
282+
const rules = {
283+
heading1: (node, children, parent, styles) =>
284+
<Text key={getUniqueID()} style={[styles.heading, styles.heading1]}>
285+
[{children}]
286+
</Text>,
287+
heading2: (node, children, parent, styles) =>
288+
<Text key={getUniqueID()} style={[styles.heading, styles.heading2]}>
289+
[{children}]
290+
</Text>,
291+
heading3: (node, children, parent, styles) =>
292+
<Text key={getUniqueID()} style={[styles.heading, styles.heading3]}>
293+
[{children}]
294+
</Text>,
295+
};
296+
297+
const copy = `
298+
# h1 Heading 8-)
299+
## h2 Heading 8-)
300+
### h3 Heading 8-)
301+
302+
| Option | Description |
303+
| ------ | ----------- |
304+
| data | path to data files to supply the data that will be passed into templates. |
305+
| engine | engine to be used for processing templates. Handlebars is the default. |
306+
| ext | extension to be used for dest files. |
307+
`;
308+
309+
export default class Page extends PureComponent {
310+
render() {
311+
return (
312+
<Markdown rules={rules}>{copy}</Markdown>
313+
);
314+
}
315+
}
316+
```
317+
318+
</p>
319+
</details>
320+
321+
322+
# Style
323+
324+
Styles 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)
325+
326+
The list of styles that can be overwritten is:
327+
328+
```["root", "view", "codeBlock", "codeInline", "del", "em", "headingContainer", "heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "hr", "blockquote", "inlineCode", "list", "listItem", "listUnordered", "listUnorderedItem", "listUnorderedItemIcon", "listUnorderedItemText", "listOrdered", "listOrderedItem", "listOrderedItemIcon", "listOrderedItemText", "paragraph", "hardbreak", "strong", "table", "tableHeader", "tableHeaderCell", "tableRow", "tableRowCell", "text", "strikethrough", "link", "blocklink", "u", "image"]```
329+
330+
**NOTE:** There is no merge of the style properties, if you specify a style property, it will completely overwrite existing styles for that property.
331+
332+
<details><summary>Example Implementation</summary>
333+
<p>
334+
335+
```jsx
336+
import react from 'react';
337+
import {View, PureComponent, Text} from 'react-native';
338+
import Markdown from 'react-native-markdown-display';
339+
import { StyleSheet } from 'react-native';
340+
341+
const styles = StyleSheet.create({
342+
heading: {
343+
borderBottomWidth: 1,
344+
borderColor: '#000000',
345+
},
346+
heading1: {
347+
fontSize: 32,
348+
backgroundColor: '#000000',
349+
color: '#FFFFFF',
350+
},
351+
heading2: {
352+
fontSize: 24,
353+
},
354+
heading3: {
355+
fontSize: 18,
356+
},
357+
heading4: {
358+
fontSize: 16,
359+
},
360+
heading5: {
361+
fontSize: 13,
362+
},
363+
heading6: {
364+
fontSize: 11,
365+
}
366+
});
367+
368+
const copy = `
369+
# h1 Heading 8-)
370+
## h2 Heading 8-)
371+
### h3 Heading 8-)
372+
373+
| Option | Description |
374+
| ------ | ----------- |
375+
| data | path to data files to supply the data that will be passed into templates. |
376+
| engine | engine to be used for processing templates. Handlebars is the default. |
377+
| ext | extension to be used for dest files. |
378+
`;
379+
380+
export default class Page extends PureComponent {
381+
render() {
382+
return (
383+
<Markdown style={styles}>{copy}</Markdown>
384+
);
385+
}
386+
}
387+
```
388+
389+
</p>
390+
</details>
391+
392+
393+
# Handling Links
394+
395+
Links, by default, will be handled with the `import { Linking } from 'react-native';` import and `Linking.openURL(url);` call.
396+
397+
It is possible to overwrite this behaviour in one of two ways:
398+
399+
<details><summary>onLinkPress Callback</summary>
400+
<p>
401+
402+
```jsx
403+
import react from 'react';
404+
import { PureComponent } from 'react-native';
405+
import Markdown from 'react-native-markdown-display';
406+
407+
const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
408+
409+
export default class Page extends PureComponent {
410+
onLinkPress = (url) => {
411+
if (url) {
412+
// some custom logic
413+
}
414+
415+
// return true to open with `Linking.openURL
416+
// return false to handle it yourself
417+
return true
418+
}
419+
420+
render() {
421+
return (
422+
<Markdown onLinkPress={this.onLinkPress}>{copy}</Markdown>
423+
);
424+
}
425+
}
426+
```
427+
428+
</p>
429+
</details>
430+
431+
<details><summary>Using a Custom Rule</summary>
432+
<p>
433+
434+
You 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)
435+
436+
Something like this with `yourCustomHandlerFunctionOrLogicHere`:
437+
438+
```jsx
439+
import react from 'react';
440+
import {View, PureComponent, Text} from 'react-native';
441+
import Markdown, {getUniqueID} from 'react-native-markdown-display';
442+
443+
const rules = {
444+
link: (node, children, parent, styles) => {
445+
return (
446+
<Text key={node.key} style={styles.link} onPress={() => yourCustomHandlerFunctionOrLogicHere(node.attributes.href) }>
447+
{children}
448+
</Text>
449+
);
450+
},
451+
};
452+
453+
const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`;
454+
455+
export default class Page extends PureComponent {
456+
render() {
457+
return (
458+
<Markdown rules={rules}>{copy}</Markdown>
459+
);
460+
}
461+
}
462+
```
463+
464+
</p>
465+
</details>
466+
467+
468+
469+
345470
### Other Resources
346471

347472
- [Documentation / Examples](https://github.com/iamacup/react-native-markdown-display/tree/master/doc)

0 commit comments

Comments
 (0)