Code block

Learn how to use the CodeBlock component.

The CodeBlock component uses React Syntax Highlighter with a default theme that was designed to match the style of this template. This is how it looks like:

const example = "Code block example";

Add code block

Import the component from code-block folder:

import { CodeBlock } from '../components/code-block';

Specify the code snippet language using language prop:

<CodeBlock language="tsx">
   {'const example = "Code block example";\n' +

Customize code block style

Adjust code block's visual style in the globals.css file by changing the .code-block css classes.

Alternatively you can pass a predefined prism.js or higlight.js theme using the style property.