diff --git a/README.md b/README.md
index d240866..18e0064 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,13 @@
# react-native-simple-markdown
[![Build Status](https://travis-ci.org/CharlesMangwa/react-native-simple-markdown.svg?branch=master)](https://travis-ci.org/CharlesMangwa/react-native-simple-markdown)
[![npm version](https://badge.fury.io/js/react-native-simple-markdown.svg)](https://badge.fury.io/js/react-native-simple-markdown)
-[![npm](https://img.shields.io/npm/dm/react-native-simple-markdown.svg?maxAge=2592000)]()
+[![npm](https://img.shields.io/npm/dm/react-native-simple-markdown.svg?maxAge=2592000)](https://www.npmjs.com/package/react-native-simple-markdown)
[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badge/)
A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome 😃 🎉!
## Getting started
-`npm install react-native-simple-markdown --save`
-or
`yarn add react-native-simple-markdown`
## Usage
@@ -104,8 +102,23 @@ Example:
```
-### Features
+RNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.
+
+Example:
+```js
+
+ { description }
+
+```
+
+Will only apply the default styles for `link` and `url`. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.
+
+### Features
+- `blockQuote` (``) - Also `blockQuoteBar` and `blockQuoteText`
- `br` (``)
- `del` (``)
- `em` (``)
@@ -136,8 +149,7 @@ Example:
_Most of these elements can be used, but I'm still working on some improvements. Pull requests are welcome!_
- `autolink` (``)
-- `blockQuote` (``)
-- `codeBlock` (``)
+- `codeBlock` (``)
## Credits
diff --git a/rules.js b/rules.js
index 4acef35..12fa07f 100644
--- a/rules.js
+++ b/rules.js
@@ -17,10 +17,15 @@ export default (styles) => ({
blockQuote: {
react: (node, output, state) => {
state.withinText = true
- return createElement(Text, {
+ const blockBar = createElement(View, {
key: state.key,
- style: styles.blockQuote
+ style: [styles.blockQuoteSectionBar, styles.blockQuoteBar]
+ })
+ const blockText = createElement(Text, {
+ key: state.key + 1,
+ style: styles.blockQuoteText
}, output(node.content, state))
+ return createElement(View, { key: state.key, style: [styles.blockQuoteSection, styles.blockQuote] }, [blockBar, blockText])
}
},
br: {
diff --git a/styles.js b/styles.js
index be2e475..ecd0a4f 100644
--- a/styles.js
+++ b/styles.js
@@ -2,6 +2,15 @@
const styles = {
view: {},
+ blockQuoteSection: {
+ flexDirection: 'row',
+ },
+ blockQuoteSectionBar: {
+ width: 3,
+ height: null,
+ backgroundColor: '#DDDDDD',
+ marginRight: 15,
+ },
codeBlock: {
fontFamily: 'Courier',
fontWeight: '500',