Skip to content

Commit 61f8246

Browse files
iamacupiamacup
committed
readme update
1 parent 3458ebb commit 61f8246

File tree

1 file changed

+120
-85
lines changed

1 file changed

+120
-85
lines changed

‎README.md

Lines changed: 120 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
# React Native Markdown Display [![npm version](https://badge.fury.io/js/react-native-markdown-display.svg)](https://badge.fury.io/js/react-native-markdown-display) [![Known Vulnerabilities](https://snyk.io/test/github/iamacup/react-native-markdown-display/badge.svg)](https://snyk.io/test/github/iamacup/react-native-markdown-display)
22

3-
It a 100% compatible CommonMark renderer, a react-native markdown renderer done right. This is __not__
4-
a web-view markdown renderer but a renderer that uses native components for all its elements. These components can be overwritten when needed as seen in the examples.
3+
It 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.
54

65
### Compatibility with react-native-markdown-renderer
76

8-
This is intended to be a drop-in 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)
7+
This 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)
98

109
### Install
1110

@@ -46,9 +45,9 @@ export default class Page extends PureComponent {
4645

4746
Text 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.
4847

49-
Think of the implementation like applying styles in CSS. changes to the `root` effect everything, but can be overwritten further down the style / component tree.
48+
Think of the implementation like applying styles in CSS. changes to the `body` effect everything, but can be overwritten further down the style / component tree.
5049

51-
**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 `root` style.
50+
**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.
5251

5352

5453
<details><summary>Example</summary>
@@ -173,28 +172,6 @@ And some additional, less used options:
173172
</details>
174173

175174

176-
<details><summary>Typographic Replacements</summary>
177-
<p>
178-
179-
```
180-
Enable typographer option to see result.
181-
182-
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
183-
184-
test.. test... test..... test?..... test!....
185-
186-
!!!!!! ???? ,, -- ---
187-
188-
"Smartypants, double quotes" and 'single quotes'
189-
```
190-
191-
| iOS | Android
192-
| --- | ---
193-
| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-3.png"/> | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-3.png"/>
194-
195-
</p>
196-
</details>
197-
198175

199176
<details><summary>Emphasis</summary>
200177
<p>
@@ -380,6 +357,30 @@ And some additional, less used options:
380357
</p>
381358
</details>
382359

360+
361+
<details><summary>Typographic Replacements</summary>
362+
<p>
363+
364+
```
365+
Enable typographer option to see result.
366+
367+
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
368+
369+
test.. test... test..... test?..... test!....
370+
371+
!!!!!! ???? ,, -- ---
372+
373+
"Smartypants, double quotes" and 'single quotes'
374+
```
375+
376+
| iOS | Android
377+
| --- | ---
378+
| <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/ios-3.png"/> | <img src="https://github.com/iamacup/react-native-markdown-display/raw/master/doc/images/android-3.png"/>
379+
380+
</p>
381+
</details>
382+
383+
383384
<details><summary>Plugins and Extensions</summary>
384385
<p>
385386

@@ -551,36 +552,49 @@ Images
551552
</details>
552553

553554

554-
# Rules
555+
# Rules and Styles
555556

556-
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)
557+
### Styles
557558

558-
The list of rules that can be overwritten is:
559+
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)
559560

560-
```["root" "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"]```
561+
**NOTE:** By default styles are merged with the existing implementation, to change this, see `mergeStyle`
561562

562563
<details><summary>Example Implementation</summary>
563564
<p>
564565

565566
```jsx
566567
import react from 'react';
567568
import {View, PureComponent, Text} from 'react-native';
568-
import Markdown, {getUniqueID} from 'react-native-markdown-display';
569+
import Markdown from 'react-native-markdown-display';
570+
import { StyleSheet } from 'react-native';
569571

570-
const rules = {
571-
heading1: (node, children, parent, styles) =>
572-
<Text key={getUniqueID()} style={[styles.heading, styles.heading1]}>
573-
[{children}]
574-
</Text>,
575-
heading2: (node, children, parent, styles) =>
576-
<Text key={getUniqueID()} style={[styles.heading, styles.heading2]}>
577-
[{children}]
578-
</Text>,
579-
heading3: (node, children, parent, styles) =>
580-
<Text key={getUniqueID()} style={[styles.heading, styles.heading3]}>
581-
[{children}]
582-
</Text>,
583-
};
572+
const styles = StyleSheet.create({
573+
heading: {
574+
borderBottomWidth: 1,
575+
borderColor: '#000000',
576+
},
577+
heading1: {
578+
fontSize: 32,
579+
backgroundColor: '#000000',
580+
color: '#FFFFFF',
581+
},
582+
heading2: {
583+
fontSize: 24,
584+
},
585+
heading3: {
586+
fontSize: 18,
587+
},
588+
heading4: {
589+
fontSize: 16,
590+
},
591+
heading5: {
592+
fontSize: 13,
593+
},
594+
heading6: {
595+
fontSize: 11,
596+
}
597+
});
584598

585599
const copy = `
586600
# h1 Heading 8-)
@@ -597,7 +611,7 @@ const copy = `
597611
export default class Page extends PureComponent {
598612
render() {
599613
return (
600-
<Markdown rules={rules}>{copy}</Markdown>
614+
<Markdown style={styles}>{copy}</Markdown>
601615
);
602616
}
603617
}
@@ -606,52 +620,32 @@ export default class Page extends PureComponent {
606620
</p>
607621
</details>
608622

623+
### Rules
609624

610-
# Style
611-
612-
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)
613-
614-
The list of styles that can be overwritten is:
615-
616-
```["root", "codeBlock", "codeInline", "em", "headingContainer", "heading", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "hr", "blockquote", "list", "listItem", "listUnordered", "listUnorderedItem", "listUnorderedItemIcon", "listOrdered", "listOrderedItem", "listOrderedItemIcon", "paragraph", "hardbreak", "strong", "table", "tableHeader", "tableHeaderCell", "tableRow", "tableRowCell", "text", "textGroup", "strikethrough", "link", "blocklink", "image"]```
617-
618-
**NOTE:** If you specify a style property, it will completely overwrite existing styles for that property **UNLESS** you specify `mergeStyle` as true, in which case a merge will take place.
625+
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)
619626

620627
<details><summary>Example Implementation</summary>
621628
<p>
622629

623630
```jsx
624631
import react from 'react';
625632
import {View, PureComponent, Text} from 'react-native';
626-
import Markdown from 'react-native-markdown-display';
627-
import { StyleSheet } from 'react-native';
633+
import Markdown, {getUniqueID} from 'react-native-markdown-display';
628634

629-
const styles = StyleSheet.create({
630-
heading: {
631-
borderBottomWidth: 1,
632-
borderColor: '#000000',
633-
},
634-
heading1: {
635-
fontSize: 32,
636-
backgroundColor: '#000000',
637-
color: '#FFFFFF',
638-
},
639-
heading2: {
640-
fontSize: 24,
641-
},
642-
heading3: {
643-
fontSize: 18,
644-
},
645-
heading4: {
646-
fontSize: 16,
647-
},
648-
heading5: {
649-
fontSize: 13,
650-
},
651-
heading6: {
652-
fontSize: 11,
653-
}
654-
});
635+
const rules = {
636+
heading1: (node, children, parent, styles) =>
637+
<Text key={getUniqueID()} style={[styles.heading, styles.heading1]}>
638+
[{children}]
639+
</Text>,
640+
heading2: (node, children, parent, styles) =>
641+
<Text key={getUniqueID()} style={[styles.heading, styles.heading2]}>
642+
[{children}]
643+
</Text>,
644+
heading3: (node, children, parent, styles) =>
645+
<Text key={getUniqueID()} style={[styles.heading, styles.heading3]}>
646+
[{children}]
647+
</Text>,
648+
};
655649

656650
const copy = `
657651
# h1 Heading 8-)
@@ -668,7 +662,7 @@ const copy = `
668662
export default class Page extends PureComponent {
669663
render() {
670664
return (
671-
<Markdown style={styles}>{copy}</Markdown>
665+
<Markdown rules={rules}>{copy}</Markdown>
672666
);
673667
}
674668
}
@@ -678,6 +672,47 @@ export default class Page extends PureComponent {
678672
</details>
679673

680674

675+
### All rules and their associated styles:
676+
677+
| Render Rule | Style(s) |
678+
| ------ | ----------- |
679+
| `body` | `body` |
680+
| `heading1` | `heading1` |
681+
| `heading2` | `heading2` |
682+
| `heading3` | `heading3` |
683+
| `heading4` | `heading4` |
684+
| `heading5` | `heading5` |
685+
| `heading6` | `heading6` |
686+
| `hr` | `hr` |
687+
| `strong` | `strong` |
688+
| `em` | `em` |
689+
| `s` | `s` |
690+
| `blockquote` | `blockquote` |
691+
| `bullet_list` | `bullet_list`, `bullet_list_icon`, `bullet_list_content` |
692+
| `ordered_list` | `ordered_list`, `ordered_list_icon`, `ordered_list_content` |
693+
| `list_item` | `list_item` |
694+
| `code_inline` | `code_inline` |
695+
| `code_block` | `code_block` |
696+
| `fence` | `fence` |
697+
| `table` | `table` |
698+
| `thead` | `thead` |
699+
| `tbody` | `tbody` |
700+
| `th` | `th` |
701+
| `tr` | `tr` |
702+
| `td` | `td` |
703+
| `link` | `link` |
704+
| `blocklink` | `blocklink` |
705+
| `image` | `image` |
706+
| `text` | `text` |
707+
| `textgroup` | `textgroup` |
708+
| `paragraph` | `paragraph` |
709+
| `hardbreak` | `hardbreak` |
710+
| `softbreak` | `softbreak` |
711+
| `pre` | `pre` |
712+
| `inline` | `inline` |
713+
| `span` | `span` |
714+
715+
681716
# Handling Links
682717

683718
Links, by default, will be handled with the `import { Linking } from 'react-native';` import and `Linking.openURL(url);` call.

0 commit comments

Comments
 (0)