Code block

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";
console.log(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' +
    'console.log(example);'}
</CodeBlock>

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.