The CodeBlock component renders syntax-highlighted code with an optional filename header and copy functionality.
function greet(name) {
return `Hello, ${name}!`;
}
<CodeBlock name="example.js" lang="javascript">
{`function greet(name) {
return \`Hello, \${name}!\`;
}`}
</CodeBlock>
Display a filename in the header to give context about the code:
{
"name": "my-app",
"version": "1.0.0",
"dependencies": {
"react": "^18.0.0",
"next": "^14.0.0"
}
}
Show additions and removals like a patch file. Use diff prop to auto-detect +/- prefixes:
const config = {
- debug: true,
- logLevel: "verbose",
+ debug: false,
+ logLevel: "error",
timeout: 5000,
};
<CodeBlock name="config.js" lang="javascript" diff>
{`const config = {
- debug: true,
+ debug: false,
timeout: 5000,
};`}
</CodeBlock>
Or use explicit line numbers with add and remove props:
.button {
background: blue;
background: red;
padding: 1rem;
}
<CodeBlock name="styles.css" lang="css" add="{2}" remove="{3}">
{`.button {
background: blue;
background: red;
}`}
</CodeBlock>
Highlight specific lines to draw attention:
export const config = {
apiKey: process.env.API_KEY,
baseUrl: "https://api.example.com",
timeout: 5000,
retries: 3,
};
<CodeBlock name="config.ts" highlight="{2,4-5}">
...
</CodeBlock>
Hide the header for cleaner inline code:
npm install @vellocs/core
<CodeBlock lang="bash" showHeader={false}>
npm install @vellocs/core
</CodeBlock>
Filename to display in the header. Alias: filename
Language for syntax highlighting. Alias: language
Show/hide the header. Defaults to true if name is provided.
Lines to highlight, e.g. "{1,3-5}" for lines 1 and 3 through 5.
Lines to mark as added (green), e.g. "{1,3-5}".
Lines to mark as removed (red), e.g. "{2,4}".
Enable auto-detection of +/- prefixes for diff highlighting.
Lines to focus (dim others), e.g. "{2-4}".
Show line numbers on the left side of the code block.
Enable text wrapping for long lines instead of horizontal scrolling.
Make long code blocks collapsible with a "Show more" button.
Icon name to display in the header. See Icons for options.
Additional CSS classes to apply.