[Gekidou] Code syntax highlight (#6156)

* Code syntax highlight

* fix code syntax imports for jest

* feedback review

app/components/markdown/markdown_code_block/index.tsx

@@ -9,9 +9,11 @@ import {Keyboard, StyleSheet, Text, TextStyle, TouchableOpacity, View} from 'rea
 
 import FormattedText from '@components/formatted_text';
 import SlideUpPanelItem, {ITEM_HEIGHT} from '@components/slide_up_panel_item';
+import SyntaxHighlighter from '@components/syntax_highlight';
+import {Screens} from '@constants';
 import {useTheme} from '@context/theme';
 import {bottomSheet, dismissBottomSheet, goToScreen} from '@screens/navigation';
-import {getDisplayNameForLanguage} from '@utils/markdown';
+import {getHighlightLanguageFromNameOrAlias, getHighlightLanguageName} from '@utils/markdown';
 import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
@@ -34,36 +36,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderWidth: StyleSheet.hairlineWidth,
             flexDirection: 'row',
         },
-        lineNumbers: {
-            alignItems: 'center',
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.05),
-            borderRightColor: changeOpacity(theme.centerChannelColor, 0.15),
-            borderRightWidth: StyleSheet.hairlineWidth,
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            paddingVertical: 4,
-            width: 21,
-        },
-        lineNumbersText: {
-            color: changeOpacity(theme.centerChannelColor, 0.5),
-            fontSize: 12,
-            lineHeight: 18,
-        },
-        rightColumn: {
-            flexDirection: 'column',
-            flex: 1,
-            paddingHorizontal: 6,
-            paddingVertical: 4,
-        },
         code: {
             flexDirection: 'row',
             overflow: 'scroll', // Doesn't actually cause a scrollbar, but stops text from wrapping
         },
-        codeText: {
-            color: changeOpacity(theme.centerChannelColor, 0.65),
-            fontSize: 12,
-            lineHeight: 18,
-        },
         plusMoreLinesText: {
             color: changeOpacity(theme.centerChannelColor, 0.4),
             fontSize: 11,
@@ -93,12 +69,14 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
     const style = getStyleSheet(theme);
 
     const handlePress = preventDoubleTap(() => {
-        const screen = 'Code';
+        const screen = Screens.CODE;
         const passProps = {
-            content,
+            code: content,
+            language,
+            textStyle,
         };
 
-        const languageDisplayName = getDisplayNameForLanguage(language);
+        const languageDisplayName = getHighlightLanguageName(language);
         let title: string;
         if (languageDisplayName) {
             title = intl.formatMessage(
@@ -182,7 +160,7 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
 
     const renderLanguageBlock = () => {
         if (language) {
-            const languageDisplayName = getDisplayNameForLanguage(language);
+            const languageDisplayName = getHighlightLanguageName(language);
 
             if (languageDisplayName) {
                 return (
@@ -199,15 +177,6 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
 
     const {content: codeContent, numberOfLines} = trimContent(content);
 
-    const getLineNumbers = () => {
-        let lineNumbers = '1';
-        for (let i = 1; i < Math.min(numberOfLines, MAX_LINES); i++) {
-            const line = (i + 1).toString();
-            lineNumbers += '\n' + line;
-        }
-        return lineNumbers;
-    };
-
     const renderPlusMoreLines = () => {
         if (numberOfLines > MAX_LINES) {
             return (
@@ -225,26 +194,28 @@ const MarkdownCodeBlock = ({language = '', content, textStyle}: MarkdownCodeBloc
     };
 
     return (
-        <TouchableOpacity
-            onPress={handlePress}
-            onLongPress={handleLongPress}
-        >
-            <View style={style.container}>
-                <View style={style.lineNumbers}>
-                    <Text style={style.lineNumbersText}>{getLineNumbers()}</Text>
-                </View>
-                <View style={style.rightColumn}>
-                    <View style={style.code}>
-                        <Text style={[style.codeText, textStyle]}>
-                            {codeContent}
-                        </Text>
+        <>
+            <TouchableOpacity
+                onPress={handlePress}
+                onLongPress={handleLongPress}
+            >
+                <View style={style.container}>
+                    <View>
+                        <View style={style.code}>
+                            <SyntaxHighlighter
+                                code={codeContent}
+                                language={getHighlightLanguageFromNameOrAlias(language)}
+                                textStyle={textStyle}
+                            />
+                        </View>
+                        {renderPlusMoreLines()}
                     </View>
-                    {renderPlusMoreLines()}
+                    {renderLanguageBlock()}
                 </View>
-                {renderLanguageBlock()}
-            </View>
-        </TouchableOpacity>
+            </TouchableOpacity>
+        </>
     );
 };
 
 export default MarkdownCodeBlock;
+