Code Block

Code blocks are used to display code snippets. The following languages are supported for syntax highlighting (via highlight.js):

html
css
js
ts
svelte (fallback to html)
jsx (fallback to html)
yaml
json
php

Usage

<CodeBlock language="html" code={code} />

Tabbed Code Block

<TabbedCodeBlock tabs={['JavaScript', 'PHP', 'Go']}>
    <CodeBlock
        code="const x = 10;"
        language="js"
    />
    <CodeBlock
        code="$x = 10;"
        language="php"
    />
    <CodeBlock
        code="x := 10"
    />
</TabbedCodeBlock>

const x = 10;

$x = 10;

x := 10

Examples

Plain

Set language={null} to disable sytax highlighting (note that the default is html).

From: [email protected]
To: [email protected]
Subject: Hello World

<p>Hello World!</p>

HTML

<div class="container">
    <h1>Hello World</h1>
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Javascript

console.log('Hello World');

Typescript

type User {
    name: string;
    age: number;
}

Svelte

<script>
    let name = 'World';
</script>

<h1>Hello {name}</h1>

JSX

function App() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    );
}

YAML

product: Hyvor Blogs
url: https://blogs.hyvor.com
plans:
    - name: Starter
      price: €12
    - name: Growth
      price: €40

JSON

{
    "product": "Hyvor Blogs",
    "url": "https://blogs.hyvor.com",
    "plans": [
        {
            "name": "Starter",
            "price": "€12"
        },
        {
            "name": "Growth",
            "price": "€40"
        }
    ]
}

PHP

<?php

class World 
{
    public function hello(): void
    {
        echo 'Hello World';
    }
}