Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added sourceInfo and sourceMeta to ASTNode #132

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added sourceInfo and sourceMeta to ASTNode #132

wants to merge 3 commits into from

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
src/index.d.ts Outdated Show resolved Hide resolved
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