Syntax highlighting `Code` component in docs explanation

[Maksymilian Pryliński]

About docs

This is a document site related issue.

Languages

• English
• Chinese

Description

I've noticed that Code component in docs uses:

<Code block my={0}>
  <ExampleCodes />
</Code>

I'm having a problem with implementing that component with my custom code examples in it.

<Code block my={0}>
  const a = 'something';
</Code>

or something like this:

const CodeSnippet = () => `
  <div>
    <span>Hello Code snippet!</span>
  </div>
`;

and then

<Code block my={0}>
  <CodeSnippet />
</Code>

but in this particular example CodeSnippet returns string and Code does not add any syntax highlighting.

It would be great to add an explanation how our code snippets should be prepared in order Code component to highlight their syntax properly and/or detect different languages.

Or maybe just add <ExampleCodes /> as a reference. 🤔

Am I the only one who does not get how to use Code component properly ? 😅

Page Links (Optional)

https://geist-ui.dev/en-us/components/code#code-block

[Pavel Udaloff]

AFAIK Syntax highlighting is not something that coming out of box. I used react-syntax-highlighter package as foundation for syntx highlighting.