fixing issue #11 Syntax highlighting & Blockquotes

Author: mientjan

example/App.js

@@ -8,6 +8,7 @@ import Markdown, {
 } from 'react-native-markdown-renderer';
 import markdownItCheckbox from 'markdown-it-checkbox';
 import copyAll from './src/copyAll';
+import code from './src/code';
 import customMarkdownStyle from './src/customMarkdownStyle';
 import copyAllCheckboxPlugin from "./src/copyAllCheckboxPlugin";
 import pluginRules from "./src/pluginRules";
@@ -50,7 +51,7 @@ export default class App extends Component {
   getView(value) {
     switch (value) {
       case 0: {
-        return <Markdown children={copyAll} />;
+        return <Markdown children={code} />;
       }
       case 1: {
         return <Markdown renderer={renderer.render} children={copyAll} />;

example/src/code.js

@@ -0,0 +1,29 @@
+const markdownText = `
+Inline \`code\`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+\`\`\`
+Sample text here...
+\`\`\`
+
+Syntax highlighting
+
+\`\`\` js
+var foo = function (bar) {
+	return bar++;
+};
+
+console.log(foo(5));
+\`\`\`
+`;
+
+export default markdownText;

lib/renderRules.js

@@ -108,10 +108,40 @@ const renderRules = {
     <View key={node.key} style={styles.blockquote}>
       {children}
     </View>,
-  code: (node, children, parent, styles) =>
-    <View key={node.key} style={styles.code}>
-      {children}
-    </View>,
+  code: (node, children, parent, styles) => {
+    switch (node.sourceType) {
+      case 'code_inline': {
+        return (
+          <Text key={node.key} style={styles.codeInline}>
+            {node.content}
+          </Text>
+        );
+        break;
+      }
+      case 'code_block': {
+        return (
+          <Text key={node.key} style={styles.codeBlock}>
+            {node.content}
+          </Text>
+        );
+        break;
+      }
+      case 'fence': {
+        return (
+          <Text key={node.key} style={styles.codeBlock}>
+            {node.content}
+          </Text>
+        );
+        break;
+      }
+    }
+
+    return (
+      <View key={node.key} style={styles.codeInline}>
+        {children}
+      </View>
+    );
+  },
   pre: (node, children, parent, styles) =>
     <View key={node.key} style={styles.pre}>
       {children}

lib/styles.js

@@ -6,8 +6,18 @@ import { StyleSheet } from 'react-native';
 export const styles = StyleSheet.create({
   view: {},
   codeBlock: {
-    fontFamily: 'Courier',
-    fontWeight: '500',
+    borderWidth: 1,
+    borderColor: '#CCCCCC',
+    backgroundColor: '#f5f5f5',
+    padding: 10,
+    borderRadius: 4,
+  },
+  codeInline: {
+    borderWidth: 1,
+    borderColor: '#CCCCCC',
+    backgroundColor: '#f5f5f5',
+    padding: 10,
+    borderRadius: 4,
   },
   del: {
     backgroundColor: '#000000',

lib/util/tokensToAST.js

@@ -29,6 +29,7 @@ function createNode(token, tokenIndex) {
 
   return {
     type,
+    sourceType: token.type,
     key: getUniqueID(),
     content,
     tokenIndex,