Skip to content

Conversation

@ahkhanjani
Copy link

@ahkhanjani ahkhanjani commented Dec 29, 2020

In case you need syntax highlighting with Prism or something similar, you need to get the language of the code via node.sourceInfo like this:

<Markdown
  rules={{
    // markdown-it renders code blocks as "fence".
    fence: (node) => {
      return (
        <CodeBlock
          key={node.key}
          plainCode={node.content}
          
          // Get the language
          lang={node.sourceInfo}
        />
      );
    },
  }}
>
  {wholeMarkdown}
</Markdown>

And then the component:

import Prism from 'prismjs';

interface Props {
  plainCode: string;
  lang: string;
}

const CodeBlock: React.FC<Props> = ({ plainCode, lang }) => {
  let highlightedCode: string = '';
  try {
    highlightedCode = Prism.highlight(plainCode, Prism.languages[lang], lang);
  } catch (_) {
    highlightedCode = plainCode;
  }

  return (
    <View>
      // Use react-native-webview to show the highlighted code.
    </View>
  );
};

Edit: Added sourceMeta as requested in #130.

@zecakeh
Copy link

zecakeh commented Jan 2, 2021

Maybe you could add also sourceMeta like I requested in #130? 🙏

@ahkhanjani ahkhanjani changed the title Added sourceInfo to ASTNode Added sourceInfo and sourceMeta to ASTNode Jan 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants