CodeBlock in React pages

[Grafikart]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

It's possible to use block of code in markdown document but the documentation does not explain how to use the same feature in JSX page. Does docusaurus exposes a component for this kind of usage ?

It's possible to use the <Highlight> component from "prism-react-renderer" but we loose the styling and every configuration :(. If there is a component for this I'm willing to add this to the documentation myself

Self-service

• I'd be willing to address this documentation request myself.

[Josh-Cena]

There was a brief mention here: https://docusaurus.io/docs/markdown-features/react#importing-code-snippets

But yes, we can make it more explicitly documented. If you want to document it on the "Code blocks" page, feel free to send a PR!

[slorber]

Yes, this should work:

import CodeBlock from '@theme/CodeBlock';

export default function MyHomePage() {
  return (
    <CodeBlock className="language-bash">
      {"yarn install\nyarn start"}
    </CodeBlock>
  );
}

We still have some improvements left to do, as the original component was initially created for usage inside markdown.

For example we probably want a better language API:

-    <CodeBlock className="language-bash">
+    <CodeBlock language="bash">