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',