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
<CodeBlock language="html" code={code} />
<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
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>
<div class="container">
<h1>Hello World</h1>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
console.log('Hello World');
type User {
name: string;
age: number;
}
<script>
let name = 'World';
</script>
<h1>Hello {name}</h1>
function App() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
product: Hyvor Blogs
url: https://blogs.hyvor.com
plans:
- name: Starter
price: €12
- name: Growth
price: €40
{
"product": "Hyvor Blogs",
"url": "https://blogs.hyvor.com",
"plans": [
{
"name": "Starter",
"price": "€12"
},
{
"name": "Growth",
"price": "€40"
}
]
}
<?php
class World
{
public function hello(): void
{
echo 'Hello World';
}
}