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

Usage

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

Examples

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: $9
    - name: Growth
      price: $19

JSON

{
    "product": "Hyvor Blogs",
    "url": "https://blogs.hyvor.com",
    "plans": [
        {
            "name": "Starter",
            "price": "$9"
        },
        {
            "name": "Growth",
            "price": "$19"
        }
    ]
}