diff --git a/NOTICE.txt b/NOTICE.txt
index e6f6c2325..d435e5e86 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -2764,3 +2764,38 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+## react-native-syntax-highlighter
+
+This product contains 'react-native-syntax-highlighter' by Conor Hastings.
+
+A syntax highlighter for react native using https://github.com/conorhastings/react-syntax-highlighter under the hood
+
+* HOMEPAGE:
+  * https://github.com/conorhastings/react-native-syntax-highlighter#readme
+
+* LICENSE: MIT
+
+The MIT License (MIT)
+
+Copyright (c) 2019 Conor Hastings
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/app/components/markdown/markdown_code_block/markdown_code_block.js b/app/components/markdown/markdown_code_block/markdown_code_block.js
index 692cf3a6c..b7589e01a 100644
--- a/app/components/markdown/markdown_code_block/markdown_code_block.js
+++ b/app/components/markdown/markdown_code_block/markdown_code_block.js
@@ -5,19 +5,22 @@ import {PropTypes} from 'prop-types';
 import React from 'react';
 import {intlShape} from 'react-intl';
 import {
+    Platform,
     Clipboard,
     StyleSheet,
     Text,
     View,
 } from 'react-native';
 
+import SyntaxHighlighter from 'react-native-syntax-highlighter';
+
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import FormattedText from 'app/components/formatted_text';
 import TouchableWithFeedback from 'app/components/touchable_with_feedback';
 import BottomSheet from 'app/utils/bottom_sheet';
-import {getDisplayNameForLanguage} from 'app/utils/markdown';
+import {getDisplayNameForLanguage, getCodeFont} from 'app/utils/markdown';
 import {preventDoubleTap} from 'app/utils/tap';
-import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme, getHighlightStyleFromTheme} from 'app/utils/theme';
 import mattermostManaged from 'app/mattermost_managed';
 import {goToScreen} from 'app/actions/navigation';
 
@@ -40,11 +43,13 @@ export default class MarkdownCodeBlock extends React.PureComponent {
     };
 
     handlePress = preventDoubleTap(() => {
-        const {language, content} = this.props;
+        const {language, content, textStyle} = this.props;
         const {intl} = this.context;
         const screen = 'Code';
         const passProps = {
             content,
+            language,
+            textStyle,
         };
 
         const languageDisplayName = getDisplayNameForLanguage(language);
@@ -150,6 +155,26 @@ export default class MarkdownCodeBlock extends React.PureComponent {
             );
         }
 
+        let textComponent = null;
+        if (Platform.OS === 'ios') {
+            textComponent = (
+                <SyntaxHighlighter
+                    language={this.props.language}
+                    style={getHighlightStyleFromTheme(this.props.theme)}
+                    highlighter={'hljs'}
+                    customStyle={{...style.codeText, ...this.props.textStyle}}
+                >
+                    {content}
+                </SyntaxHighlighter>
+            );
+        } else {
+            textComponent = (
+                <Text style={[style.codeText, this.props.textStyle]}>
+                    {content}
+                </Text>
+            );
+        }
+
         return (
             <TouchableWithFeedback
                 onPress={this.handlePress}
@@ -164,9 +189,7 @@ export default class MarkdownCodeBlock extends React.PureComponent {
                     </View>
                     <View style={style.rightColumn}>
                         <View style={style.code}>
-                            <Text style={[style.codeText, this.props.textStyle]}>
-                                {content}
-                            </Text>
+                            {textComponent}
                         </View>
                         {plusMoreLines}
                     </View>
@@ -204,7 +227,15 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flexDirection: 'column',
             flex: 1,
             paddingHorizontal: 6,
-            paddingVertical: 4,
+            ...Platform.select({
+                ios: {
+                    paddingVertical: 0,
+                    backgroundColor: getHighlightStyleFromTheme(theme).hljs.background,
+                },
+                android: {
+                    paddingVertical: 4,
+                },
+            }),
         },
         code: {
             flexDirection: 'row',
@@ -214,6 +245,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             color: changeOpacity(theme.centerChannelColor, 0.65),
             fontSize: 12,
             lineHeight: 18,
+            ...Platform.select({
+                ios: {
+                    fontFamily: getCodeFont(),
+                    paddingVertical: 6,
+                },
+            }),
         },
         plusMoreLinesText: {
             color: changeOpacity(theme.centerChannelColor, 0.4),
diff --git a/app/screens/code/code.js b/app/screens/code/code.js
index 1b60101dd..80021ea2a 100644
--- a/app/screens/code/code.js
+++ b/app/screens/code/code.js
@@ -13,12 +13,17 @@ import {
     View,
 } from 'react-native';
 
+import SyntaxHighlighter from 'react-native-syntax-highlighter';
+
+import CustomPropTypes from 'app/constants/custom_prop_types';
 import {getCodeFont} from 'app/utils/markdown';
+
 import {
     changeOpacity,
     makeStyleSheetFromTheme,
     setNavigatorStyles,
     getKeyboardAppearanceFromTheme,
+    getHighlightStyleFromTheme,
 } from 'app/utils/theme';
 import {popTopScreen} from 'app/actions/navigation';
 
@@ -27,6 +32,8 @@ export default class Code extends React.PureComponent {
         componentId: PropTypes.string,
         theme: PropTypes.object.isRequired,
         content: PropTypes.string.isRequired,
+        language: PropTypes.string,
+        textStyle: CustomPropTypes.Style,
     };
 
     componentDidMount() {
@@ -73,13 +80,20 @@ export default class Code extends React.PureComponent {
         let textComponent;
         if (Platform.OS === 'ios') {
             textComponent = (
-                <TextInput
-                    editable={false}
-                    multiline={true}
-                    value={this.props.content}
-                    style={[style.codeText]}
-                    keyboardAppearance={getKeyboardAppearanceFromTheme(this.props.theme)}
-                />
+                <SyntaxHighlighter
+                    language={this.props.language}
+                    style={getHighlightStyleFromTheme(this.props.theme)}
+                    highlighter={'hljs'}
+                    CodeTag={TextInput}
+                    codeTagProps={{
+                        editable: false,
+                        multiline: true,
+                        keyboardAppearance: getKeyboardAppearanceFromTheme(this.props.theme),
+                        style: {...style.codeText, ...this.props.textStyle},
+                    }}
+                >
+                    {this.props.content}
+                </SyntaxHighlighter>
             );
         } else {
             textComponent = (
@@ -145,6 +159,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flexGrow: 0,
             flexShrink: 1,
             width: '100%',
+            backgroundColor: getHighlightStyleFromTheme(theme).hljs.background,
         },
         code: {
             paddingHorizontal: 6,
@@ -152,9 +167,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
                 android: {
                     paddingVertical: 4,
                 },
-                ios: {
-                    top: -4,
-                },
             }),
         },
         codeText: {
@@ -164,8 +176,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             lineHeight: 18,
             ...Platform.select({
                 ios: {
-                    margin: 0,
-                    padding: 0,
+                    top: -11,
                 },
             }),
         },
diff --git a/app/utils/theme.js b/app/utils/theme.js
index ee4ea9cba..449794d32 100644
--- a/app/utils/theme.js
+++ b/app/utils/theme.js
@@ -5,6 +5,7 @@ import {StyleSheet} from 'react-native';
 import tinyColor from 'tinycolor2';
 
 import * as ThemeUtils from 'mattermost-redux/utils/theme_utils';
+import * as HighlightStyles from 'react-syntax-highlighter/styles/hljs';
 
 import {mergeNavigationOptions} from 'app/actions/navigation';
 
@@ -50,6 +51,14 @@ export function isThemeSwitchingEnabled(state) {
     return config.EnableThemeSelection === 'true';
 }
 
+const snakeCaseToCamelCase = (str) => str.replace(
+    /([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', '')
+);
+
+export function getHighlightStyleFromTheme(theme) {
+    return HighlightStyles[snakeCaseToCamelCase(theme.codeTheme)] || HighlightStyles.github;
+}
+
 export function getKeyboardAppearanceFromTheme(theme) {
     return tinyColor(theme.centerChannelBg).isLight() ? 'light' : 'dark';
 }
diff --git a/app/utils/theme.test.js b/app/utils/theme.test.js
index b6ae57c24..1661ffba9 100644
--- a/app/utils/theme.test.js
+++ b/app/utils/theme.test.js
@@ -1,7 +1,44 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {getKeyboardAppearanceFromTheme} from 'app/utils/theme';
+import {getHighlightStyleFromTheme, getKeyboardAppearanceFromTheme} from 'app/utils/theme';
+import * as HighlightStyles from 'react-syntax-highlighter/styles/hljs';
+
+describe('getHighlightStyleFromTheme', () => {
+    const themes = [{
+        codeTheme: 'github',
+    }, {
+        codeTheme: 'atom-one-light',
+    }, {
+        codeTheme: 'androidstudio',
+    }, {
+        codeTheme: 'invalid_theme',
+    }];
+
+    it('should return github style for codeTheme="github"', () => {
+        const theme = getHighlightStyleFromTheme(themes[0]);
+        expect(theme).toBeTruthy();
+        expect(theme).toBe(HighlightStyles.github);
+    });
+
+    it('should return atomOneLight style for codeTheme="atom-one-light" (snake-case to camelCase)', () => {
+        const theme = getHighlightStyleFromTheme(themes[1]);
+        expect(theme).toBeTruthy();
+        expect(theme).toBe(HighlightStyles.atomOneLight);
+    });
+
+    it('should return androidstudio style for codeTheme="androidstudio" (no case conversion)', () => {
+        const theme = getHighlightStyleFromTheme(themes[2]);
+        expect(theme).toBeTruthy();
+        expect(theme).toBe(HighlightStyles.androidstudio);
+    });
+
+    it('should return github style by default for codeTheme="invalid_theme"', () => {
+        const theme = getHighlightStyleFromTheme(themes[3]);
+        expect(theme).toBeTruthy();
+        expect(theme).toBe(HighlightStyles.github);
+    });
+});
 
 describe('getKeyboardAppearanceFromTheme', () => {
     const themes = [{
diff --git a/package-lock.json b/package-lock.json
index 7f058c820..9204e1c70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5541,6 +5541,21 @@
         }
       }
     },
+    "character-entities": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.3.tgz",
+      "integrity": "sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz",
+      "integrity": "sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz",
+      "integrity": "sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg=="
+    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -5756,6 +5771,17 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
     },
+    "clipboard": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -5838,6 +5864,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "comma-separated-tokens": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz",
+      "integrity": "sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ=="
+    },
     "commander": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
@@ -6310,6 +6341,12 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -7522,6 +7559,14 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fault": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz",
+      "integrity": "sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==",
+      "requires": {
+        "format": "^0.2.2"
+      }
+    },
     "fb-watchman": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
@@ -8376,6 +8421,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -9128,6 +9178,15 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.9.0.tgz",
       "integrity": "sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg=="
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
@@ -9320,6 +9379,27 @@
         "is-stream": "^1.0.1"
       }
     },
+    "hast-util-parse-selector": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.2.tgz",
+      "integrity": "sha512-jIMtnzrLTjzqgVEQqPEmwEZV+ea4zHRFTP8Z2Utw0I5HuBOXHzUPPQWr6ouJdJqDKLbFU/OEiYwZ79LalZkmmw=="
+    },
+    "hastscript": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-5.1.0.tgz",
+      "integrity": "sha512-7mOQX5VfVs/gmrOGlN8/EDfp1GqV6P3gTNVt+KnX4gbYhpASTM8bklFdFQCbFRAadURXAmw0R1QQdBdqp7jswQ==",
+      "requires": {
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.2.0",
+        "property-information": "^5.0.1",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
+    "highlight.js": {
+      "version": "9.12.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
+    },
     "hoist-non-react-statics": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
@@ -9678,6 +9758,20 @@
         }
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.3.tgz",
+      "integrity": "sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz",
+      "integrity": "sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9751,6 +9845,11 @@
       "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
       "dev": true
     },
+    "is-decimal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.3.tgz",
+      "integrity": "sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -9815,6 +9914,11 @@
         "is-extglob": "^1.0.0"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz",
+      "integrity": "sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA=="
+    },
     "is-installed-globally": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -13970,6 +14074,15 @@
       "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
       "dev": true
     },
+    "lowlight": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz",
+      "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==",
+      "requires": {
+        "fault": "^1.0.2",
+        "highlight.js": "~9.12.0"
+      }
+    },
     "lru-cache": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
@@ -15719,6 +15832,19 @@
         }
       }
     },
+    "parse-entities": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-glob": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
@@ -16052,6 +16178,14 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
+      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -16130,6 +16264,14 @@
         "retry": "^0.10.0"
       }
     },
+    "property-information": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.2.2.tgz",
+      "integrity": "sha512-N2moasZmjn2mjVGIWpaqz5qnz6QyeQSGgGvMtl81gA9cPTWa6wpesRSe/quNnOjUHpvSH1oZx0pdz0EEckLFnA==",
+      "requires": {
+        "xtend": "^4.0.1"
+      }
+    },
     "proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@@ -16681,6 +16823,14 @@
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.4.0.tgz",
       "integrity": "sha512-IVJlVbS2dAPerPr927fEi4uXzrPXzlra5ddgyJXZZ2IKA2ZygyYWFZDM+vsQs+Vj20CfL8nOWszQQV57vdQgFg=="
     },
+    "react-native-syntax-highlighter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-syntax-highlighter/-/react-native-syntax-highlighter-2.1.0.tgz",
+      "integrity": "sha512-upu8gpKT2ZeslXn2d763KwtzzhM9OUHGgJjIKKIUw1JnFAzVwQmKCaFGoI6PkQa7T1LVggBW5k5VoaLFhZDb+g==",
+      "requires": {
+        "react-syntax-highlighter": "^6.0.4"
+      }
+    },
     "react-native-tab-view": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.3.5.tgz",
@@ -16981,6 +17131,18 @@
         }
       }
     },
+    "react-syntax-highlighter": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-6.1.2.tgz",
+      "integrity": "sha512-ahNwcZ0FhUd8U5TQYcmAqC/pec6Q308mUAATKMcLFmNYkvGhN9wfmoqxzjACcccGb2e85d5ZnGpOiCIIzGO3yA==",
+      "requires": {
+        "babel-runtime": "^6.18.0",
+        "highlight.js": "~9.12.0",
+        "lowlight": "~1.9.1",
+        "prismjs": "^1.8.4",
+        "refractor": "^2.0.0"
+      }
+    },
     "react-test-renderer": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz",
@@ -17477,6 +17639,16 @@
       "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=",
       "dev": true
     },
+    "refractor": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.0.tgz",
+      "integrity": "sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==",
+      "requires": {
+        "hastscript": "^5.0.0",
+        "parse-entities": "^1.1.2",
+        "prismjs": "~1.17.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -18309,6 +18481,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "semver": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.0.0.tgz",
@@ -18868,6 +19046,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
+    "space-separated-tokens": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz",
+      "integrity": "sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA=="
+    },
     "spawn-wrap": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-1.4.2.tgz",
@@ -19380,6 +19563,12 @@
       "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
diff --git a/package.json b/package.json
index bab0a97ba..d581de53a 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "react-native-slider": "0.11.0",
     "react-native-status-bar-size": "0.3.3",
     "react-native-svg": "9.4.0",
+    "react-native-syntax-highlighter": "2.1.0",
     "react-native-vector-icons": "6.4.2",
     "react-native-video": "4.4.1",
     "react-native-webview": "github:mattermost/react-native-webview#b5e22940a613869d3999feac9451ee65352f4fbe",