code_block can not styled.

[SaimumIslam]

can anyone help please

[priyanshuvishnoi]

facing the same issue

[lvlupharshit]

I am also facing the same issue, Not working even after overriding the rules.

Also marginTop on code_inline is also not wokring. Can anyone suggest why ?

 {!isLoading && (
        <Markdown
          rules={{
            // Override the 'code' rule to render code blocks as plain text
            code_inline: (node, children, parent, styles) => {
              return (
                <View
                  key={node.key}
                  style={{
                    paddingTop: 5,
                    borderRadius: 8,
                    paddingBottom: 2,
                    paddingHorizontal: 10,
                    backgroundColor: Colors.white,
                  }}
                >
                  <MyText>{node.content}</MyText>
                </View>
              );
            },
            // code_block: (node, children, parent, styles) => {
            //   return (
            //     <View
            //       key={node.key}
            //       style={{ padding: 2, backgroundColor: Colors.red, borderRadius: 5 }}
            //     >
            //       <MyText>{node.content}</MyText>
            //       <MyText>{children}</MyText>
            //     </View>
            //   );
            // },
          }}
          style={{
            // styles.answer are also not working in Expo App
            body: { ...styles.answer, color: answerColor },
            heading3: { ...styles.markdownHeading, color: answerColor },

            // Not working in Expo Go, try in development mode
            // code_inline: {
            //   borderRadius: 8,
            //   paddingHorizontal: 5,
            //   paddingTop: 5,
            //   backgroundColor: Colors.white,
            // },
            // code_block: {
            //   color: "red",
            //   fontSize: 30,
            //   borderRadius: 20,
            //   backgroundColor: Colors.green,
            // },
          }}
        >
          {answer}
        </Markdown>
      )}

[johannbuscail]

Any update ?

[nohzafk]

If you use the debugPrintTree attribute you can actually see the ``` block is rendered as fence not code_block

My solution below, it works.

import SyntaxHighlighter from "react-native-syntax-highlighter";
import { docco } from "react-syntax-highlighter/styles/hljs";

const markdownRules = {
    fence: (node, children, parent, styles, inheritedStyles = {}) => {
      // we trim new lines off the end of code blocks because the parser sends an extra one.
      let { content } = node;

      if (
        typeof node.content === "string" &&
        node.content.charAt(node.content.length - 1) === "\n"
      ) {
        content = node.content.substring(0, node.content.length - 1);
      }

      return (
        <SyntaxHighlighter
          language={node.sourceInfo}
          style={docco}
          highlighter={"hljs"}
        >
          {content}
        </SyntaxHighlighter>
      );
    },
  };

 <Markdown
        debugPrintTree
        rules={markdownRules}

[priyanshuvishnoi]

styling the fence worked for me. thanks 😄

[lvlupharshit]

Thanks, This is working for me for big codes ! I also need to apply styles to inline codes like that appear in between the lines. Amy I ask for help in this please :)

style={{
            body: { ...styles.answer, color: answerColor },
            heading3: { ...styles.markdownHeading, color: answerColor },

            // Nothing is working here
            // code_inline: {
            //   borderRadius: 8,
            //   paddingHorizontal: 5,
            //   paddingTop: 5,
            //   backgroundColor: Colors.white,
            // },

// Working
            fence: {
              fontSize: 18,
              borderRadius: 20,
              marginVertical: 15,
              paddingVertical: 20,
              paddingHorizontal: 20,
              backgroundColor: blockColor,
              fontFamily: "Metropolis-Medium",
              color: isLightTheme ? Colors.pureBlack : Colors.white,
            },
          }}

[Banditolabs]

Thank you for calling out the "fence" solution!